Kling AI: AI Image&Video Maker

Colors

• #0a0a0cbackground-pure-dark · main screen canvas
• #1b1b1ecard-dark · action button pill background
• #fff3d6gold-gradient-light · subscribe banner light tone
• #f6dfb3gold-gradient-dark · subscribe banner dark tone
• #0e341cbadge-green · inspiration badge background
• #50e38abadge-green-text · inspiration badge label and arrow
• #fffffftext-primary · username · stats numbers · active tab · subscribe heading
• #8a8a93text-secondary · bio text · stats labels · inactive tab
• #30d158accent-neon-green · 'NEW' badge on Events button

Type

• username-header-apple-system, BlinkMacSystemFont, 'SF Pro Display', Roboto, sans-serif · 48px · 700 · #ffffff
• bio-body-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 30px · 400 · #8a8a93
• badge-text-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 28px · 500 · #50e38a
• metric-number-apple-system, BlinkMacSystemFont, 'SF Pro Display', Roboto, sans-serif · 42px · 700 · #ffffff
• metric-label-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 26px · 400 · #8a8a93
• banner-title-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 34px · 700 · #111111

Elements

• Header Action Icons · icon_button_group

  Top row under browser bar; hamburger menu left, two circular glassmorphic icon buttons on the right. · Circular dark translucent surfaces (#28282c) with white stroked icons.

• Avatar Silhouette · avatar

  Centered horizontally in the upper third of the screen. · Organic contoured silhouette graphic with dark translucent fill and subtle outline on a fire-sparks backdrop.

• Subscribe Promotional Card · callout_banner

  Full width with side padding, positioned directly below stats. · Cream-to-gold subtle horizontal gradient, black diamond icon, bold black title 'Subscribe' and muted 'Credits & More' with right disclosure arrow.

• Action Button Row · button_group

  Row of 3 evenly sized rounded buttons below the subscribe banner. · Dark graphite fills (#1b1b1e), white icons with labels ('Tasks', 'Invite', 'Events'). Events button features an accent green 'NEW' badge.

• Profile Tabs · segmented_tabs

  Two tabs ('Published', 'Likes') spanning the width beneath action buttons. · Published tab is highlighted with an active white underline indicator.

• Empty State Illustration · empty_state

  Centered in the lower viewport. · Monochrome layered photo/picture frame graphic in dark grey tones.

Layout

User profile screen organized vertically: header graphic and profile details, stats row, promotional banner, secondary actions, segment tabs, and empty state list area, with a persistent bottom navigation bar.

Notes

Header background features atmospheric particle/spark imagery behind translucent controls.