Kling AI: AI Image&Video Maker

Colors

• #0D0D0Ebg-primary · screen background
• #1E1F22surface-subtle · icon tile background · search icon bubble
• #FFFFFFtext-primary · main titles · icon captions
• #8A8D93text-muted · inactive tabs · breadcrumbs · more link
• #E6E6E6badge-bg · motion control badge background
• #0E0E0Ebadge-text · motion control badge label
• #111215tab-bar-bg · bottom navigation bar background

Type

• Banner TitleBaskerville · 34px · 600 · #FFFFFF
• Section HeaderSF Pro Display · 36px · 600 · #FFFFFF
• Tool LabelSF Pro Text · 28px · 500 · #FFFFFF
• Tab Item ActiveSF Pro Text · 32px · 700 · #FFFFFF
• Tab Item InactiveSF Pro Text · 32px · 500 · #8A8D93
• Bottom Nav LabelSF Pro Text · 20px · 500 · #8A8D93

Elements

• Header Action Bar · header

  top horizontal row, padding 32px · menu burger left, search icon and rounded pill 'Sign in for credits' button right

• Hero Carousel · carousel

  top-mid, height ~390px, full-width inset with rounded corners · image card with text overlay and pagination dots beneath

• Tool Quick Actions · grid

  horizontal row of 3 items (Omni, AI Image, AI Video) · dark pill shaped icons with badges

• Trends Section · horizontal_scroll

  horizontal list of rounded image cards (Yesterday, GlideGlide, SurfSurf) · portrait cards with inner text shadow

• Bottom Navigation · tab_bar

  fixed bottom edge, 5 items with center elevated plus button · dark solid bar (#111215) with icons and tiny text labels

Layout

Vertical scrolling dashboard with featured carousel, quick generation tools, horizontal trend previews, category sub-tabs, and a 2-column video grid.

Notes

Banner serif typography may be Georgia or Garamond.