leonardo_ai___style_reference:
  info: "> Inverted editorial gallery. A black-walled museum where 165px violet headlines act as wall installations and AI-generated portraits hang in a tight grid below."

  theme: "dark"

  info: "Leonardo.ai is a cinematic dark-mode creative arena: near-black canvas (#000000) serves as an infinite gallery floor, and the interface speaks through sheer typographic mass rather than chrome. The brand voice is built on one saturated violet (#6e60ee) used sparingly as identity punctuation, surrounded by a vivid six-color tag palette (green, violet, yellow, pink, coral, blue) that acts as categorical color-coding for plans, styles, and creator types. Display type reaches absurd scale (up to 165px) with compressed line-heights of 0.80–0.90 and tight -0.02em tracking, making headlines feel like sculptural objects rather than text. Controls are soft and pill-shaped (60px radius), surfaces are nearly borderless, and the layout breathes with generous negative space punctuated by a tight card grid of generated imagery. The system is editorial-meets-product: it treats the page itself as a generative canvas where the UI recedes and the creator's output dominates."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Canvas | `#000000` | `--color-midnight-canvas` | Primary page background, hero canvas, footer base |"
    info: "| Obsidian Surface | `#0a0a0a` | `--color-obsidian-surface` | Elevated surface, nav backdrop, deep overlay wash |"
    info: "| Charcoal Card | `#353535` | `--color-charcoal-card` | Card surface, image card background, raised panel |"
    info: "| Fog | `#f5f5f5` | `--color-fog` | Light surface inversion, subtle highlight wash |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Primary text, filled primary action background, high-contrast iconography |"
    info: "| Mist | `#e5e5e5` | `--color-mist` | Hairline borders, dividers, subtle structural lines across all surfaces |"
    info: "| Ash Text | `#999999` | `--color-ash-text` | Muted body text, list items, secondary link color |"
    info: "| Charcoal Mute | `#666666` | `--color-charcoal-mute` | De-emphasized text, disabled states, tertiary metadata |"
    info: "| Ink Black | `#030303` | `--color-ink-black` | SVG decorative fills, near-black accent inside dark composition |"
    info: "| Leonardo Violet | `#6e60ee` | `--color-leonardo-violet` | Brand identity color — logo mark, active tab indicator, brand surface highlights, signature wordmark |"
    info: "| Toxic Lime | `#03e65b` | `--color-toxic-lime` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"
    info: "| Voltage Yellow | `#ffc533` | `--color-voltage-yellow` | Warm accent for category tags, feature highlight chips, energy-coded badges |"
    info: "| Shock Pink | `#ff3386` | `--color-shock-pink` | Hot accent for tag chips, creator-type badges, vibrant category markers |"
    info: "| Ember Coral | `#ff5d4b` | `--color-ember-coral` | Warm accent for tag chips, plan indicators, red-orange category coding |"
    info: "| Plasma Pink | `#d25fff` | `--color-plasma-pink` | Magenta-violet accent for card backgrounds, secondary brand surface treatment |"
    info: "| Arc Blue | `#33d0ff` | `--color-arc-blue` | Cool accent for tag chips, informational category markers, data-state indicators |"

  tokens___typography:

    leosans___display_and_editorial_headlines__the_signature_font___used_at_massive_scale_up_to_165px_for_brand_wordmarks__section_heroes__and_sculptural_typography__weights_800_900_create_the_compressed__almost_condensed_poster_feel__the_extremely_tight_line_heights_0_80_0_90_let_words_stack_into_blocks__letter_spacing_tightens_to__0_02em_on_the_largest_sizes_to_optically_close_the_gaps_between_heavy_strokes_____font_leosans:
      - "**Substitute:** Druk, Tungsten, Inter (900 only)"
      - "**Weights:** 500, 800, 900"
      - "**Sizes:** 34, 44, 65, 90, 165"
      - "**Line height:** 0.80–0.93"
      - "**Letter spacing:** -0.02em (display) down to -0.01em (mid-headings)"
      - "**Role:** Display and editorial headlines. The signature font — used at massive scale (up to 165px) for brand wordmarks, section heroes, and sculptural typography. Weights 800–900 create the compressed, almost-condensed poster feel; the extremely tight line-heights (0.80–0.90) let words stack into blocks. Letter-spacing tightens to -0.02em on the largest sizes to optically close the gaps between heavy strokes."

    canvasans___ui_and_body_text___navigation__buttons__tab_labels__captions__list_items__card_metadata__clean_geometric_sans_across_10_19px__weight_500_carries_the_most_ui_presence__700_is_reserved_for_emphasis_in_tabs_and_active_states__the_narrow_10_19px_range_keeps_the_type_system_disciplined_and_ui_focused_____font_canvasans:
      - "**Substitute:** Inter, Plus Jakarta Sans, General Sans"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 10, 12, 14, 16, 18, 19"
      - "**Line height:** 1.10–1.33"
      - "**Letter spacing:** normal"
      - "**Role:** UI and body text — navigation, buttons, tab labels, captions, list items, card metadata. Clean geometric sans across 10–19px. Weight 500 carries the most UI presence; 700 is reserved for emphasis in tabs and active states. The narrow 10–19px range keeps the type system disciplined and UI-focused."

    ufficiodisplay___specialty_editorial_accent___used_sparingly_for_a_single_mid_scale_heading_where_a_different_personality_is_needed____font_ufficiodisplay:
      - "**Substitute:** Times Now, Playfair Display, GT Sectra"
      - "**Weights:** 500"
      - "**Sizes:** 34"
      - "**Line height:** 0.92"
      - "**Letter spacing:** -0.02em"
      - "**Role:** Specialty editorial accent — used sparingly for a single mid-scale heading where a different personality is needed"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | — | `--text-caption` |"
      info: "| body | 14px | 1.33 | — | `--text-body` |"
      info: "| subheading | 19px | 1.15 | — | `--text-subheading` |"
      info: "| heading-sm | 34px | 0.92 | -0.68px | `--text-heading-sm` |"
      info: "| heading | 48px | 0.9 | -0.96px | `--text-heading` |"
      info: "| heading-lg | 78px | 0.85 | -1.56px | `--text-heading-lg` |"
      info: "| display | 98px | 0.8 | -1.96px | `--text-display` |"
      info: "| display-xl | 165px | 0.8 | -3.3px | `--text-display-xl` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 34 | 34px | `--spacing-34` |"
      info: "| 41 | 41px | `--spacing-41` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 47 | 47px | `--spacing-47` |"
      info: "| 54 | 54px | `--spacing-54` |"
      info: "| 61 | 61px | `--spacing-61` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 135 | 135px | `--spacing-135` |"
      info: "| 203 | 203px | `--spacing-203` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 270px |"
      info: "| cards | 8px |"
      info: "| inputs | 6px |"
      info: "| buttons | 60px |"
      info: "| cardsLarge | 20px |"
      info: "| imageCards | 8px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    primary_cta_button_filled_pill:
      role: "Main conversion action — the only filled button in the system"

      white_filled_pill_button: "60px border-radius (full pill), white background (#ffffff), black text (#0a0a0a), canvaSans weight 500 at 14–16px, padding 27px horizontal × 10px vertical. No border, no drop shadow — the white-on-black contrast is the elevation. Used for the single primary action per screen ('Start now')."

    secondary_ghost_button_outlined_pill:
      role: "Companion action beside the primary CTA"

      transparent_fill_pill_button: "60px border-radius, 1px border in #e5e5e5 (or #b3b3b3 at lower contrast), canvaSans weight 500 white text at 14–16px, padding 27px × 10px. Sits beside the primary CTA as a quieter alternative path ('Developer API')."

    active_tab_pill:
      role: "Selected category tab in horizontal filter bars"

      filled_violet_pill: "60px border-radius, #6e60ee background, white canvaSans weight 500 text at 16px, padding 20px × 10px. Carries a subtle violet glow (0 0 24px rgba(110,96,238,0.45)) to mark the active state. Inactive tabs are plain white text on black, no background."

    nav_utility_button_tutorial___log_in:
      role: "Top-right navigation actions"

      info: "Ghost pill for 'Tutorial' (transparent fill, 1px #e5e5e5 border, white text) paired with a filled white pill for 'Log in' (matching the primary CTA style but smaller — padding 14px × 7px, 14px text). These sit as a utility pair in the top-right corner of the nav bar."

    navigation_bar:
      role: "Site-wide top navigation"

      info: "Transparent or #0a0a0a background, full-bleed, 60–80px tall. Left: LEONARDO.AI wordmark in canvaSans weight 700 white at ~16px. Center: dropdown nav links (Create, Industry, Business, Learn, Pricing, Contact) in canvaSans weight 500 white at 14–16px. Right: Tutorial ghost + Log in filled pill. No visible bottom border — the nav floats on the dark canvas."

    gallery_image_card:
      role: "Showcase tile for AI-generated output in galleries and grids"

      info: "Charcoal (#353535) or near-black background with a single generated image filling the card. 8.4px border-radius. No padding around the image — the image bleeds to the card edge. Image-as-hero treatment: the card is a frame, not a container. Arranged in a tight 3–4 column grid with 10–14px gaps."

    category_tag_chip:
      role: "Color-coded labels for creator types, plan tiers, style categories"

      info: "Pill-shaped (270px or 60px radius), small height (auto from text). Background fills with one of the six accent colors (#03e65b, #6e60ee, #ffc533, #ff3386, #ff5d4b, #33d0ff). Text in canvaSans weight 700 white, 12–14px. Padding 7px × 14px. The rainbow palette IS the taxonomy — each tag is immediately identifiable by color alone."

    hero_display_wordmark:
      role: "Brand expression in the hero — the signature element"

      info: "leoSans weight 800–900 at 90–165px, color #6e60ee (violet). Line-height compressed to 0.80–0.85, letter-spacing -0.02em. The word 'LEONARDO' is rendered oversized, sometimes perspective-warped or repeated in 3D, filling the full hero viewport. This is not a heading — it is a graphic object that IS the hero."

    section_headline:
      role: "Standard heading for content sections below the hero"

      info: "leoSans weight 800 at 44–78px, white (#ffffff), line-height 0.85–0.90, letter-spacing -0.01em to -0.02em. Centered or left-aligned. Below it, canvaSans body text at 14–18px in #999999 or #e5e5e5."

    icon_button___creator_avatar_tile:
      role: "Tab or filter activation in the 'For Makers' section"

      info: "A square tile containing a stylized illustration of a creator type (e.g., profile silhouette in violet). The illustration replaces a traditional icon — the artwork itself is the icon. Violet (#6e60ee) fill for the active selection; neutral grayscale for inactive. ~120px square, 6–8px radius."

    footer_link_list:
      role: "Secondary navigation in the footer"

      info: "Vertical list of canvaSans links at 14px weight 500 in #999999, 7–10px row gap. No list bullets. On hover, links brighten to #ffffff. Organized in multi-column groups at the page bottom."

  do_s_and_don_ts:

    do:
      - "Use the 60px pill radius for all buttons and active tabs — this is the system's signature curve"
      - "Push display type to 90px+ with leoSans weight 800–900 and line-height compressed to 0.80–0.90; let headlines become graphic objects"
      - "Use #6e60ee (Leonardo Violet) as the single brand accent for logo, active state, and brand surfaces — never as a decorative fill"
      - "Apply the six-color accent palette (#03e65b, #ffc533, #ff3386, #ff5d4b, #d25fff, #33d0ff) exclusively to tag chips, category badges, and small color-coded markers"
      - "Set page background to #000000 and card surfaces to #353535 — the 3-step neutral ramp is the entire surface system"
      - "Use hairlines (1px #e5e5e5) rather than shadows for structural separation; on the black canvas, shadows disappear"
      - "Keep body type in canvaSans at 10–19px; reserve leoSans for everything 34px and above"

    don_t:
      - "Do not place the white-filled pill on a non-black surface — the white-on-black contrast is what makes it work"
      - "Do not use the accent palette for large fills, backgrounds, or hero sections — those colors are for tag-sized elements only"
      - "Do not use line-height above 1.0 for any leoSans text — the compressed leading is what gives the type its poster-like density"
      - "Do not use the 8.4px card radius for buttons; cards are sharp-cornered, buttons are pill-shaped — do not mix"
      - "Do not introduce new accent colors beyond the six-color palette — the rainbow is the taxonomy"
      - "Do not add drop shadows larger than 1px on dark surfaces; they vanish into the black and create visual noise"
      - "Do not use #6e60ee for body text or large headings; violet is identity, not information"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Midnight Canvas | `#000000` | Base page background, hero immersion field, footer plane |"
    info: "| 1 | Obsidian Surface | `#0a0a0a` | Navigation bar, sticky overlays, slightly lifted dark zones |"
    info: "| 2 | Charcoal Card | `#353535` | Image card panels, content blocks, gallery items |"

  elevation:

    - "**Image Card:** `0 0 0 1px rgba(229,229,229,0.06), 0 20px 40px rgba(0,0,0,0.5)`"
    - "**Active Tab Pill:** `0 0 24px rgba(110,96,238,0.45)`"
    - "**Primary CTA:** `0 0 0 1px rgba(255,255,255,0.08)`"

  imagery:

    info: "Imagery is the product. AI-generated images are presented as gallery prints: edge-to-edge fills in dark cards with 8.4px corners, no padding, no captions, no chrome around them. The images are always tightly cropped and high-quality, arranged in dense 3–4 column grids. The page treats generated output like a portfolio wall — the UI is the gallery, the art is the content. Decorative elements include a sculptural violet wordmark in the hero (leoSans at 165px, sometimes perspective-warped into a 3D environment) and small iconographic creator silhouettes in violet. No stock photography, no lifestyle imagery, no abstract gradients used as backgrounds."

  layout:

    info: "Max-width 1440px contained, centered on a full-bleed #000000 canvas. The hero is a full-viewport sculptural typography piece — oversized violet leoSans wordmarks (90–165px) float on black in a perspective/3D arrangement, with the actual headline ('THE CREATOR-FIRST GENERATIVE AI PLATFORM') centered at a comparatively modest 34–48px in white. Below the hero, sections alternate between image gallery grids (3–4 columns, tight 10–14px gaps) and centered text blocks with the vivid six-color tag palette. Tab filter rows sit above gallery sections as horizontal pill bars. Navigation is a minimal transparent top bar with a left wordmark, centered dropdown links, and right-aligned utility buttons. Footer is a multi-column link grid in muted gray (#999999). Vertical rhythm uses 80px section gaps with compact 10px element gaps within sections — the page breathes vertically but packs information horizontally."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #ffffff"
    - "background: #000000"
    - "surface (card): #353535"
    - "border: #e5e5e5"
    - "accent: #6e60ee (Leonardo Violet — brand)"
    - "primary action: #ffffff (filled action)"

  example_component_prompts:
    - "**Hero Wordmark Block**: Full-viewport black (#000000) background. Oversized leoSans weight 900 at 165px, #6e60ee, line-height 0.80, letter-spacing -3.3px. Repeating the brand name as a sculptural element."

    - "Create a Primary Action Button: #ffffff background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "**Ghost Outline Pill**: 60px border-radius, transparent background, 1px border #e5e5e5, canvaSans weight 500 at 16px, text #ffffff, padding 27px × 10px."

    - "**Active Tab Filter**: Horizontal row of filter labels. Active = 60px radius pill, #6e60ee fill, white canvaSans 16px weight 500. Inactive = plain white text, no background. 27px horizontal gap between pills."

    - "**Gallery Image Card**: 8.4px border-radius, image fills the card edge-to-edge with no padding, #353535 fallback background. Arrange in a 3-column grid with 14px gaps. The image IS the content — the card is just a frame."

  similar_brands:

    - "**Midjourney** — Same dark-canvas gallery model with AI-generated imagery as the hero; identical 'the art is the UI' philosophy"
    - "**Runway** — Same dark-mode creative-tool aesthetic with minimal chrome and vivid accent-color category tags"
    - "**NightCafe Creator** — Same creator-first AI art platform with grid-based gallery showcase and compact card surfaces"
    - "**Pika** — Same oversize display type on black, minimal navigation, and treatment of generated media as the page's primary content"
    - "**Stability AI** — Same editorial-poster hero treatment with massive brand wordmarks and a single saturated accent against pure black"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-canvas: #000000;
          --color-obsidian-surface: #0a0a0a;
          --color-charcoal-card: #353535;
          --color-fog: #f5f5f5;
          --color-bone-white: #ffffff;
          --color-mist: #e5e5e5;
          --color-ash-text: #999999;
          --color-charcoal-mute: #666666;
          --color-ink-black: #030303;
          --color-leonardo-violet: #6e60ee;
          --color-toxic-lime: #03e65b;
          --color-voltage-yellow: #ffc533;
          --color-shock-pink: #ff3386;
          --color-ember-coral: #ff5d4b;
          --color-plasma-pink: #d25fff;
          --color-arc-blue: #33d0ff;
        
          /* Typography — Font Families */
          --font-leosans: 'leoSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-canvasans: 'canvaSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ufficiodisplay: 'ufficioDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body: 14px;
          --leading-body: 1.33;
          --text-subheading: 19px;
          --leading-subheading: 1.15;
          --text-heading-sm: 34px;
          --leading-heading-sm: 0.92;
          --tracking-heading-sm: -0.68px;
          --text-heading: 48px;
          --leading-heading: 0.9;
          --tracking-heading: -0.96px;
          --text-heading-lg: 78px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: -1.56px;
          --text-display: 98px;
          --leading-display: 0.8;
          --tracking-display: -1.96px;
          --text-display-xl: 165px;
          --leading-display-xl: 0.8;
          --tracking-display-xl: -3.3px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-27: 27px;
          --spacing-34: 34px;
          --spacing-41: 41px;
          --spacing-44: 44px;
          --spacing-47: 47px;
          --spacing-54: 54px;
          --spacing-61: 61px;
          --spacing-68: 68px;
          --spacing-135: 135px;
          --spacing-203: 203px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 8.4375px;
          --radius-2xl: 16.4375px;
          --radius-2xl-2: 20.4375px;
          --radius-full: 60px;
          --radius-full-2: 270px;
        
          /* Named Radii */
          --radius-tags: 270px;
          --radius-cards: 8px;
          --radius-inputs: 6px;
          --radius-buttons: 60px;
          --radius-cardslarge: 20px;
          --radius-imagecards: 8px;
        
          /* Surfaces */
          --surface-midnight-canvas: #000000;
          --surface-obsidian-surface: #0a0a0a;
          --surface-charcoal-card: #353535;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-canvas: #000000;
          --color-obsidian-surface: #0a0a0a;
          --color-charcoal-card: #353535;
          --color-fog: #f5f5f5;
          --color-bone-white: #ffffff;
          --color-mist: #e5e5e5;
          --color-ash-text: #999999;
          --color-charcoal-mute: #666666;
          --color-ink-black: #030303;
          --color-leonardo-violet: #6e60ee;
          --color-toxic-lime: #03e65b;
          --color-voltage-yellow: #ffc533;
          --color-shock-pink: #ff3386;
          --color-ember-coral: #ff5d4b;
          --color-plasma-pink: #d25fff;
          --color-arc-blue: #33d0ff;
        
          /* Typography */
          --font-leosans: 'leoSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-canvasans: 'canvaSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ufficiodisplay: 'ufficioDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body: 14px;
          --leading-body: 1.33;
          --text-subheading: 19px;
          --leading-subheading: 1.15;
          --text-heading-sm: 34px;
          --leading-heading-sm: 0.92;
          --tracking-heading-sm: -0.68px;
          --text-heading: 48px;
          --leading-heading: 0.9;
          --tracking-heading: -0.96px;
          --text-heading-lg: 78px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: -1.56px;
          --text-display: 98px;
          --leading-display: 0.8;
          --tracking-display: -1.96px;
          --text-display-xl: 165px;
          --leading-display-xl: 0.8;
          --tracking-display-xl: -3.3px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-27: 27px;
          --spacing-34: 34px;
          --spacing-41: 41px;
          --spacing-44: 44px;
          --spacing-47: 47px;
          --spacing-54: 54px;
          --spacing-61: 61px;
          --spacing-68: 68px;
          --spacing-135: 135px;
          --spacing-203: 203px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 8.4375px;
          --radius-2xl: 16.4375px;
          --radius-2xl-2: 20.4375px;
          --radius-full: 60px;
          --radius-full-2: 270px;
        }