Leonardo.Ai - Image Generator

Colors

• #0D0E12background-dark · main page background · top bar background
• #13141Bcard-surface · pricing card container background · secondary toggle background
• #4D38D6card-border-highlight · premium plan card border
• #6352E9accent-purple · primary action button background · yearly toggle active state
• #FFFFFFtext-primary · headline text · pricing amount · button text · restore button
• #A0A3B1text-secondary · feature list items · subtitle text · interval labels · billed yearly text
• #A7F3D0badge-green · best offer badge background · best offer text
• #4ADE80plan-title-green · premium tier title text
• #1D1E26control-surface · back button background · restore button background · token breakdown chip background

Type

• screen-titleInter · 38px · 600 · #FFFFFF
• hero-headlineInter · 66px · 700 · #FFFFFF
• subtitleInter · 34px · 400 · #A0A3B1
• plan-nameInter · 54px · 600 · #4ADE80
• plan-priceInter · 82px · 700 · #FFFFFF
• strikethrough-priceInter · 32px · 400 · #A0A3B1
• button-labelInter · 38px · 600 · #FFFFFF
• feature-textInter · 34px · 400 · #E2E4EB
• badge-labelInter · 28px · 600 · #064E3B

Elements

• top-bar · header

  full width pinned near top below status bar, horizontal layout with back icon on left, title centered, restore action on right · solid dark background with rounded circular icon button on left and pill button on right

• back-button · button

  top left, 100x100 px circular tap target · dark surface #1D1E26 fill with centered left chevron icon

• restore-button · button

  top right, pill shape padding around 18px vertical, 36px horizontal · dark surface #1D1E26 fill with white text

• status-chips · chip-group

  below top bar, left-aligned plan text and right-aligned dropdown button · subtle dark pill background with dropdown chevron

• billing-toggle · segmented-control

  centered horizontally below platform icons, width approx 520px, height approx 88px · pill background with dark inactive tab on left and vibrant purple active tab with 20% off discount on right

• best-offer-badge · badge

  centered horizontally overlapping top border of the premium card · light green pill background with dark green text and star icon

• pricing-card · card

  centered horizontal carousel card, width approx 880px, internal padding approx 48px · dark surface fill #13141B, solid purple border (#4D38D6) approx 3px thick

• subscribe-button · button

  full width of inner card, height approx 110px · solid purple fill (#6352E9) with centered white bold text

• carousel-pagination · indicator

  centered horizontally below active card, horizontal row of 4 dots · 3 inactive dark grey circular dots and 1 active white dot at position 3

Layout

Vertical mobile scroll screen featuring top navigation bar, status and plan banner, hero title and multiplatform support icons, billing cycle segmented toggle, followed by a prominent horizontal card carousel showing the highlighted 'Premium' tier and pagination dots at bottom.

Notes

Inter or system sans-serif (SF Pro) are primary candidates due to uniform stroke and neo-grotesque proportions. Card width reveals partial adjacent cards on left and right edges, confirming horizontal paging behavior.