Kling AI: AI Image&Video Maker

Colors

• #111113background-dark · main screen background
• #1a1a1ccard-surface · pricing tier card fill
• #38ea35accent-neon-green · primary purchase button fill · credit leaf icon · tab indicator
• #6c5332border-gold · selected pricing tier border
• #fffffftext-primary · plan titles · price values · section header
• #7d7d85text-muted · plan description · disclaimers · inactive tabs

Type

• nav-action-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 34px · 600 · #ffffff
• user-title-apple-system, BlinkMacSystemFont, 'SF Pro Display', Roboto, sans-serif · 40px · 700 · #ffffff
• plan-title-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 38px · 600 · #ffffff
• plan-price-apple-system, BlinkMacSystemFont, 'SF Pro Display', Roboto, sans-serif · 68px · 700 · #ffffff
• primary-button-label-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 36px · 700 · #000000
• disclaimer-text-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif · 24px · 400 · #636366

Elements

• Navigation Bar · header

  Top edge below browser bar with a left back chevron and right 'Manage' text link. · Transparent header background with clean white icons and text.

• Bonus Notification Banner · callout_card

  Full width with horizontal margins, placed directly below user status info. · Dark grey surface (#1c1c1f), green sprout icon, two-line promotional copy, and right disclosure caret.

• Billing Cycle Tabs · tab_bar

  Three options ('One-Time', 'Monthly', 'Yearly') arranged in a row. · Plain text tab list with a solid white indicator bar under the active 'Monthly' tab.

• Pricing Cards Carousel · card_row

  Horizontal row of cards ('Standard', 'Pro', 'Premier') extending off-screen to the right. · Standard card is highlighted with a fine gold outline (#6c5332) and crown artwork; others have dark subtle surfaces (#1a1a1c).

• Primary CTA Button · button

  Prominent near the bottom, full width with side margins. · Vibrant lime/neon green solid fill (#38ea35) with bold black text 'Purchase Now $10'.

Layout

Paywall / subscription screen layout: top account balance status, promotional offer card, duration toggle tabs, side-scrolling tier comparison cards, feature benefits list, and a fixed bottom CTA button with legal disclaimers.

Notes

The active Standard plan card displays a semi-opaque background crown illustration.