glow___style_reference:
  info: "> Magenta pulse on porcelain white. A single saturated brand color cuts through a quiet, gallery-bright canvas where phone screens are the art and a peach badge is the only warmth."

  theme: "light"

  info: "Glow uses a gallery-white product launch language: a porcelain #f4f5f6 canvas with confident bold headlines and phone mockups as the hero artifact. One vivid magenta carries the brand — appearing in the filled CTA, the logo gradient, and link accents — while orange and a peach badge provide small warm punctuation. Typography is geometric and tight-tracked (Roobert at -0.018em), giving copy a designed-objects feel rather than a marketing-brochure feel. The layout is spacious with large 40px-radius cards cradling product screenshots, and a distinctive layer of ghosted feature text on the hero that lists capabilities like museum wall labels."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Voltage Magenta | `#cc62d5` | `--color-voltage-magenta` | Filled buttons, link borders, brand accents — the single saturated current that makes the otherwise quiet page feel switched on |"
    info: "| Plasma Gradient | `radial-gradient(86% 86% at 6% 9%, rgb(136, 0, 255) 0%, rgb(167, 50, 214) 51%, rgb(239, 121, 255) 100%)` | `--color-plasma-gradient` | Logo fill, decorative gradient washes — the spectrum from deep purple to hot pink that anchors brand identity |"
    info: "| Ember Orange | `#ec660d` | `--color-ember-orange` | NEW badges, lightning-bolt icons, warm accent punctuation — used sparingly as energy, not as a second brand |"
    info: "| Signal Red | `#e83b47` | `--color-signal-red` | Red wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color |"
    info: "| Ink Black | `#131517` | `--color-ink-black` | Primary text, all borders and dividers, dark button surface, icon strokes — the structural neutral that carries 800+ usages |"
    info: "| Porcelain | `#f4f5f6` | `--color-porcelain` | Page background, feature card surfaces, phone-mockup panels — the off-white that lets white cards lift off the canvas |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Graphite | `#333537` | `--color-graphite` | Dark filled-button variant, high-contrast surfaces, secondary button backgrounds |"
    info: "| Stone | `#737577` | `--color-stone` | Body text, icon strokes, supporting metadata — the readable gray for non-headline copy |"
    info: "| Mist | `#b3b5b7` | `--color-mist` | Light borders, link underlines, disabled dividers, subtle separators |"

  tokens___typography:

    roobert___all_ui_text___headlines_at_700_56px__section_headings_at_700_40px__body_at_400_16px__caption_labels_at_500_12px_tracked_out____font_roobert:
      - "**Substitute:** Inter, Manrope, or Satoshi for a similarly geometric grotesque with tight tracking"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 13px, 16px, 18px, 24px, 40px, 56px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** -0.018em on body and display sizes; 0.083em on all-caps labels (12px captions)"
      - "**OpenType features:** `\"ss01\" on, \"ss02\" on, \"cv11\" on`"
      - "**Role:** All UI text — headlines at 700/56px, section headings at 700/40px, body at 400/16px, caption labels at 500/12px tracked out"

    apple_system___fallback___system_rendering____font_apple_system:
      - "**Substitute:** SF Pro Text"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.50"
      - "**Role:** Fallback / system rendering"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.996px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.288px | `--text-body` |"
      info: "| subheading | 18px | 1.5 | -0.324px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.432px | `--text-heading-sm` |"
      info: "| heading | 40px | 1.1 | -0.72px | `--text-heading` |"
      info: "| display | 56px | 1 | -1.008px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 40px |"
      info: "| pills | 100px |"
      info: "| small | 8px |"
      info: "| badges | 4px |"
      info: "| buttons | 19px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    primary_filled_button:
      role: "Main conversion action — mobile app download, primary CTAs"

      info: "Background #cc62d5, text #ffffff, font Roobert 500/16px, border-radius 19px, padding 10px 14px. No shadow; the saturated fill alone carries the weight. Letter-spacing inherits the tight body tracking (-0.018em)."

    outlined_ghost_button:
      role: "Secondary action paired with primary — browser extension, alt CTAs"

      info: "Background #ffffff, border 1.5px #131517, text #131517, border-radius 19px, padding 10px 14px. Matches primary height exactly so the pair sits as equal-weight siblings."

    dark_filled_button:
      role: "Tertiary or contrast action on light cards"

      info: "Background #333537 or #131517, text #ffffff, border-radius 19px, padding 10px 14px. Used when a neutral high-contrast surface beats the magenta accent."

    new_announcement_badge:
      role: "Inline product-news callout in the hero"

      info: "Background #fef0e8 (soft peach), text #ec660d, font Roobert 600/12px uppercase, letter-spacing 0.083em, border-radius 4px, padding 2px 8px. Sharp 4px corners deliberately contrast the pill-radius buttons nearby."

    phone_mockup_card:
      role: "Hero artifact — product showcase, feature illustration"

      info: "Outer panel background #f4f5f6, border-radius 40px, padding 48–64px on all sides. Contains a centered phone frame with #ffffff screen and a faint drop shadow. The large 40px radius is a signature: mockups feel cradled, not boxed."

    brand_logo_mark:
      role: "Wordmark + gradient icon in nav and hero"

      info: "Wordmark 'glow' in Roobert 700 lowercase, #131517. Companion icon: 56px rounded square (19px radius) filled with the Plasma Gradient (#8800ff → #a732d6 → #ef79ff radial), with a white abstract glyph centered."

    hero_headline:
      role: "Primary page-level headline"

      info: "Roobert 700 at 56px, line-height 1.0, letter-spacing -1px, color #131517. Sets in two to three short lines; the tight tracking and weight 700 create a designed-poster feel, not a SaaS-hero feel."

    section_heading:
      role: "Feature-section title below the fold"

      info: "Roobert 700 at 40px, line-height 1.1, letter-spacing -0.72px, color #131517. Used for 'Swap Coins with Zero Fees', 'All your activity. In one place.', and other feature blocks."

    all_caps_feature_label:
      role: "Museum-label text, section dividers, link accents"

      info: "Roobert 500 at 12px, uppercase, letter-spacing 0.083em (~1px), color #737577 or #131517. Examples: 'EXPLORE GLOW FEATURES' under the hero. The tracked-out caps create a print-design rhythm against the bold display headlines."

    ghosted_feature_text_layer:
      role: "Decorative background texture listing product capabilities"

      info: "Set at very low opacity (~8–12%) in Roobert 600, color #131517. Words like 'Transaction History', 'Cloud Backup', 'NFT Exchange' tile the hero right side behind the phone. The signature move: turning a feature list into wallpaper."

    quote___attribution_block:
      role: "Social proof — investor or founder endorsement"

      info: "Quote in Roobert 400/16px italic-feel regular #131517 with opening curly quote, em-dash attribution below in #737577, 13px. Sits flush-left, no border or container."

    footer_link_bar:
      role: "Minimal site footer"

      info: "Horizontal row of inline links in Roobert 400/13px #737577, separated by ~16px gap. No dividers, no background — the footer is just type on the porcelain canvas."

  do_s_and_don_ts:

    do:
      - "Use Roobert at 700/56px with letter-spacing -1px for the hero headline — this is the signature display treatment."
      - "Use #cc62d5 (Voltage Magenta) for exactly one element per viewport — the primary CTA — and let it carry the brand alone."
      - "Use 19px border-radius for all buttons; this half-pill is the system's signature shape language."
      - "Use 40px border-radius for product cards and phone-mockup cradles — the soft enclosure is what makes the layout feel gallery-like."
      - "Use uppercase 12px Roobert 500 with 0.083em letter-spacing for section labels, 'NEW' badges, and museum-style captions."
      - "Stack a 24px card padding inside 48–64px section padding to create the calm, spacious rhythm."
      - "Keep the page at least 85% achromatic; let magenta and orange function as punctuation, not decoration."

    don_t:
      - "Do not use #cc62d5 for body text, borders, or non-action surfaces — overusing it dilutes the brand accent."
      - "Do not use system fonts or fall back to Arial/Helvetica — Roobert's geometric letterforms (with ss01/ss02 alternates) carry the identity."
      - "Do not use sharp 0px or 4px radii on buttons; 19px is the rule. 4px is reserved for the peach NEW badge only."
      - "Do not add drop shadows to cards or buttons — the design is intentionally flat, using surface color and radius for separation."
      - "Do not place more than one filled magenta button per screen; pair it with a ghost outlined button in #131517."
      - "Do not use the Plasma Gradient outside the logo mark — it is an identity element, not a decorative wash."
      - "Do not break the white-on-#f4f5f6 surface stack with mid-gray cards; only #ffffff sits on top of porcelain."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Porcelain Canvas | `#f4f5f6` | Page background; the off-white floor beneath all content |"
    info: "| 1 | Pure White Card | `#ffffff` | Card surfaces, phone-mockup screens, button fills — the lifted top layer |"
    info: "| 2 | Ink Surface | `#131517` | Dark filled buttons, inverted surface moments |"

  elevation:

    info: "The design relies on large radii and color contrast rather than shadow to separate layers. Phone mockups carry the only visible shadow — a soft, short blur (~0 12px 32px rgba(0,0,0,0.06)) that lifts them off the porcelain panel. Cards, buttons, and badges are flat; depth comes from the white-on-#f4f5f6 surface stack and the 40px-radius cradling."

  imagery:

    product_photography_is_the_only_imagery: "iPhone mockups showing the live Glow app, rendered at 1× scale and centered in 40px-radius porcelain cradles. Token/coin illustrations are holographic 3D disks with iridescent rainbow reflections, floating in negative space around the phones. No lifestyle photography, no people, no environments — the product screen IS the hero. The Plasma Gradient logo mark and lightning-bolt orange icon are the only branded graphic elements."

  layout:

    info: "Two-column hero (text-left, phone-mockup-right) inside a 1200px max-width container on a full-bleed #f4f5f6 canvas. Below the fold, single-column sections each centered around a phone mockup with a heading above and feature list below. Section rhythm: spacious 64px gaps, alternating placement of phones (center, then offset, then center) to create visual cadence. Navigation is a minimal top-left wordmark only — no nav bar, no menu, no CTA in the header. The Ghosted Feature Text Layer tiles the right side of the hero as decorative background type. Footer is a single inline link row, no container."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #131517"
    - "background: #f4f5f6"
    - "surface/card: #ffffff"
    - "border: #b3b5b7"
    - "accent: #cc62d5"
    - "primary action: #cc62d5 (filled action)"

    example_component_prompts:

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

    - "**Phone mockup card:** Outer panel #f4f5f6, border-radius 40px, padding 64px. Inside, an iPhone frame with a #ffffff screen and a subtle 0 12px 32px rgba(0,0,0,0.06) shadow."

    - "**NEW badge:** #fef0e8 background, #ec660d text, Roobert 600 12px uppercase, letter-spacing 1px, border-radius 4px, padding 2px 8px."

    - "**All-caps feature label:** Roobert 500, 12px, uppercase, letter-spacing 0.083em, color #737577. Use for 'EXPLORE GLOW FEATURES' style section dividers."

    - "**Section heading block:** Centered on #f4f5f6, heading in Roobert 700 40px line-height 1.1 letter-spacing -0.72px color #131517, with a 64px gap to the next section."

  gradient_system:

    one_gradient_is_used_in_the_system: "the Plasma Gradient on the brand logo mark. radial-gradient(86% 86% at 6% 9%, #8800ff 0%, #a732d6 51%, #ef79ff 100%). It is anchored top-left, creating a luminous spot that fades from deep purple to hot pink. This gradient must not be reused for backgrounds, buttons, or decorative washes — it is an identity-only element. All other surfaces are flat color."

  similar_brands:

    - "**Phantom** — Same Solana-wallet product page structure — phone mockup hero, single saturated brand color, quiet white canvas with one vivid accent"
    - "**Rainbow Wallet** — Similar product-showcase pattern with playful gradient branding on a minimal white landing page"
    - "**Foundation (NFT marketplace)** — Gallery-white layout with oversized typography and large-radius cards cradling product artifacts"
    - "**Zerion** — Clean DeFi product site with tight-tracked geometric sans (Inter-class) and confident bold display headlines"
    - "**Backpack (xNFT wallet)** — Same Solana-wallet audience and product-card density, with phone mockups as the central visual artifact"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-voltage-magenta: #cc62d5;
          --color-plasma-gradient: #a732d6;
          --gradient-plasma-gradient: radial-gradient(86% 86% at 6% 9%, rgb(136, 0, 255) 0%, rgb(167, 50, 214) 51%, rgb(239, 121, 255) 100%);
          --color-ember-orange: #ec660d;
          --color-signal-red: #e83b47;
          --color-ink-black: #131517;
          --color-porcelain: #f4f5f6;
          --color-pure-white: #ffffff;
          --color-graphite: #333537;
          --color-stone: #737577;
          --color-mist: #b3b5b7;
        
          /* Typography — Font Families */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.996px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.288px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.324px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.432px;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --tracking-heading: -0.72px;
          --text-display: 56px;
          --leading-display: 1;
          --tracking-display: -1.008px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 19px;
          --radius-3xl: 40px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-cards: 40px;
          --radius-pills: 100px;
          --radius-small: 8px;
          --radius-badges: 4px;
          --radius-buttons: 19px;
        
          /* Surfaces */
          --surface-porcelain-canvas: #f4f5f6;
          --surface-pure-white-card: #ffffff;
          --surface-ink-surface: #131517;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-voltage-magenta: #cc62d5;
          --color-plasma-gradient: #a732d6;
          --color-ember-orange: #ec660d;
          --color-signal-red: #e83b47;
          --color-ink-black: #131517;
          --color-porcelain: #f4f5f6;
          --color-pure-white: #ffffff;
          --color-graphite: #333537;
          --color-stone: #737577;
          --color-mist: #b3b5b7;
        
          /* Typography */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.996px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.288px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.324px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.432px;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --tracking-heading: -0.72px;
          --text-display: 56px;
          --leading-display: 1;
          --tracking-display: -1.008px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 19px;
          --radius-3xl: 40px;
          --radius-full: 100px;
        }