Kling AI: AI Image&Video Maker

Colors

• #121214background-dark · main screen background
• #1c1c1esurface-card · notification banner background · card footer surface
• #fffffftext-primary · active tab text · card title text · notification text
• #76767ctext-muted · inactive tab text · meta stats text · bottom nav labels
• #49dc6eaccent-green · success checkmark icon inside notification
• #000000overlay-pill · play button badge overlay

Type

• notification-title-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 34px · 600 · #ffffff
• tab-active-apple-system, BlinkMacSystemFont, 'SF Pro Display', Roboto, sans-serif · 38px · 700 · #ffffff
• tab-inactive-apple-system, BlinkMacSystemFont, 'SF Pro Display', Roboto, sans-serif · 36px · 500 · #76767c
• card-title-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 34px · 600 · #ffffff
• card-meta-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 28px · 400 · #8e8e93
• bottom-nav-label-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 24px · 500 · #ffffff

Elements

• Notification Toast · toast_banner

  Positioned near top below browser navigation bar, spanning nearly full width with ~30px horizontal margins. · Dark charcoal rounded container (#222226), translucent sheen, containing a stylized gift box icon badge with glowing green sparkles and text 'Monthly trial package claimed'.

• Horizontal Filter Bar · tab_list

  Horizontally scrollable list of text tabs directly beneath the toast notification. · Text links spaced evenly; active tab 'For You' is bright white and bold, while inactive categories are muted grey.

• Content Grid Feed · grid

  2-column masonry or staggered grid of vertical media cards with ~16px gutters. · Rounded rectangular cards featuring media imagery, video badge overlay in upper right corner, and bottom section with title, avatar, username, and like counter.

• Bottom Navigation Bar · tab_bar

  Fixed along the bottom edge of the viewport with five evenly spaced action slots. · Dark semi-translucent background, monochrome stroke icons, center circular '+' action button.

Layout

Vertical mobile application feed layout. Top browser bar and toast message sit above a horizontal category slider. The center consists of a two-column video/image feed, anchored by a bottom fixed tab bar.

Notes

Exact font family cannot be guaranteed; standard modern neo-grotesque (San Francisco / Roboto) assumed from typical mobile rendering.