fluz___style_reference:
  info: "> Gemstone vault on warm parchment"

  theme: "light"

  info: "Fluz runs a warm, opulent financial interface built on a single near-black brand color (#1a0000) that replaces pure black with a hint of cocoa, making the dense condensed display typography feel rich rather than clinical. The hero is maximalist — a full-bleed prismatic gradient (sky blue → lavender → mint → emerald) behind a Greed Condensed headline scaled to 96–203px, floating with 3D gems and butterflies — while every other section stays quiet, white, and typographically disciplined. Buttons are aggressively pill-shaped (200px radius) in the warm-black fill, creating a tactile, almost candy-like contrast against the minimal product card grid. The system deliberately oscillates between two registers: a one-screen burst of playful abundance, and a long, cream-toned product showcase that trusts tight tracking and condensed display type to carry the brand."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Espresso Ink | `#1a0000` | `--color-espresso-ink` | Primary text, filled CTA buttons, top navigation bar, icon strokes — warm near-black replaces pure #000 to feel like ground cocoa rather than ink |"
    info: "| Prism Spectrum | `linear-gradient(90deg, rgb(130, 190, 255), rgb(166, 180, 247) 47.21%, rgb(91, 184, 154) 73.75%, rgb(33, 186, 76) 91.26%)` | `--color-prism-spectrum` | Hero background gradient — sky blue to lavender to mint to emerald, used as a one-screen burst of color at the top of the page only |"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Page background, product card surfaces, button text on dark fills |"
    info: "| Linen Mist | `#f2f2f2` | `--color-linen-mist` | Secondary card surface, alternating section background, subtle depth against pure white |"
    info: "| Bone | `#ededec` | `--color-bone` | Hairline borders, dividers, icon strokes, subtle surface elevation — the warm-tinted neutral that holds the system together |"
    info: "| Taupe Slate | `#514f4c` | `--color-taupe-slate` | Secondary body text, card borders, muted labels — warm gray that pairs with Espresso Ink without going cold |"
    info: "| Ash Gray | `#aeaea6` | `--color-ash-gray` | Helper text, tertiary metadata, low-emphasis borders |"
    info: "| Charcoal Bronze | `#3a3a3a` | `--color-charcoal-bronze` | Badge backgrounds, dark overlay surfaces, secondary dark elements |"
    info: "| Obsidian Roast | `#221919` | `--color-obsidian-roast` | Deep section backgrounds, dark overlay panels — warmer and richer than #000 |"
    info: "| Iris Blue | `#98bbf4` | `--color-iris-blue` | Accent card surface, decorative highlight wash on product cards — echoes the hero gradient's blue end |"

  tokens___typography:

    greed_semibold___greed_semibold___detected_in_extracted_data_but_not_described_by_ai____font_greed_semibold:
      - "**Weights:** 400, 700"
      - "**Sizes:** 11px, 14px"
      - "**Line height:** 1.27, 1.29"
      - "**Role:** Greed-SemiBold — detected in extracted data but not described by AI"

    greed_condensed___display_and_headings___the_signature_condensed_face__hero_headlines_stretch_to_96_203px_with_ultra_tight_tracking__0_025em_and_compressed_line_heights_0_79_that_let_the_massive_letters_stack_vertically__this_is_the_brand_s_typographic_exclamation_point_____font_greed_condensed:
      - "**Substitute:** Bebas Neue, Oswald, Anton"
      - "**Weights:** 700"
      - "**Sizes:** 32px, 42px, 54px, 64px, 96px, 203px"
      - "**Line height:** 0.79–1.33"
      - "**Letter spacing:** -0.005em to -0.030em, tightening as size increases"
      - "**Role:** Display and headings — the signature condensed face. Hero headlines stretch to 96–203px with ultra-tight tracking (-0.025em) and compressed line-heights (0.79) that let the massive letters stack vertically. This is the brand's typographic exclamation point."

    area___body_text__ui_labels__button_text__links__badges__a_geometric_sans_with_generous_x_height_and_normal_tracking___the_steady_workhorse_that_keeps_the_interface_readable_below_the_display_headlines_____font_area:
      - "**Substitute:** Inter, Söhne, General Sans"
      - "**Weights:** 400, 700"
      - "**Sizes:** 14px, 16px, 17px, 20px"
      - "**Line height:** 1.40–1.50"
      - "**Role:** Body text, UI labels, button text, links, badges. A geometric sans with generous x-height and normal tracking — the steady workhorse that keeps the interface readable below the display headlines."

    greed_condensed___subheading_tier___same_condensed_family_at_reduced_weight_and_size_for_section_titles_that_need_display_character_without_hero_scale____font_greed_condensed:
      - "**Substitute:** Oswald, Barlow Condensed"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 24px"
      - "**Line height:** 1.17–1.50"
      - "**Role:** Subheading tier — same condensed family at reduced weight and size for section titles that need display character without hero scale"

    arial___arial___detected_in_extracted_data_but_not_described_by_ai____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.2"
      - "**Role:** Arial — detected in extracted data but not described by AI"

    greed_semibold___greed_semibold___detected_in_extracted_data_but_not_described_by_ai____font_greed_semibold:
      - "**Weights:** 600, 700"
      - "**Sizes:** 15px, 54px"
      - "**Line height:** 0.92, 1.6"
      - "**Letter spacing:** -0.03"
      - "**Role:** Greed SemiBold — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.27 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.29 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 24px | 1.25 | -0.38px | `--text-subheading` |"
      info: "| heading-sm | 42px | 1.2 | -0.84px | `--text-heading-sm` |"
      info: "| heading | 64px | 1.15 | -1.22px | `--text-heading` |"
      info: "| heading-lg | 96px | 1 | -2.4px | `--text-heading-lg` |"
      info: "| display | 203px | 0.79 | -5.08px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 140 | 140px | `--spacing-140` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 20px |"
      info: "| links | 100px |"
      info: "| badges | 100px |"
      info: "| inputs | 100px |"
      info: "| buttons | 200px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 20px"
      - "**Element gap:** 8px"

  components:

    pill_cta_button_filled:
      role: "Primary action — the 'Sign up' and 'Log in' buttons"

      info: "Background #1a0000 (Espresso Ink), text #ffffff in Area Semibold 16px, padding 10px 16px, border-radius 200px (fully pill-shaped). No border, no shadow. The dark fill against light surfaces is the only button weight needed."

    pill_ghost_button:
      role: "Secondary action, nav controls (Search)"

      info: "Transparent background, border 1px solid #ffffff or #ededec, text #ffffff or #1a0000, Area 16px, border-radius 100px. Used for the search button in the dark nav bar."

    top_navigation_bar:
      role: "Global header — sticky, full-bleed"

      info: "Background #1a0000, height ~56px, flex row with logo left, nav links center (Area 16px weight 400, #ffffff), search + CTA right. A second utility row above contains 'Money / Marketplace / Blog' links in smaller Area. The black bar is the visual anchor — everything below it is light."

    product_showcase_card:
      role: "Feature card displaying a product screenshot or photograph"

      info: "Background #ffffff or #f2f2f2, border-radius 20px, no visible border or shadow. Contains a full-bleed image (hand holding phone, burger, app screen) with 20px corner clipping. Cards sit in a horizontal scroll or 3-column grid with comfortable gaps."

    category_feature_card:
      role: "Product pillar card (Personal / Business / Platform)"

      info: "Background #f2f2f2, border-radius 20px, padding 20px. Category label in Greed Condensed SemiBold 24px, #1a0000. Description in Area 16px, #514f4c. Product image or 3D render at the bottom. No shadow — the warm gray fill is the only elevation."

    hero_gradient_section:
      role: "Full-bleed opening banner — the one place color explodes"

      background: "linear-gradient(90deg, rgb(130,190,255) → rgb(166,180,247) 47% → rgb(91,184,154) 74% → rgb(33,186,76) 91%). Centered Greed Condensed SemiBold 203px display headline in #ffffff with 3D decorative elements (gems, butterflies) floating around. Subtext in Area 16–18px, #ffffff at 80% opacity. The single pill CTA below."

    display_headline:
      role: "Hero and section H1"

      info: "Greed Condensed SemiBold 700, sizes ranging 64–203px, line-height 0.79–1.15, letter-spacing -0.019em to -0.030em. Color: #1a0000 on light surfaces, #ffffff on dark or gradient surfaces. The compressed line-height lets multi-line headlines stack tight."

    badge___pill_tag:
      role: "Category labels, status indicators"

      info: "Background #3a3a3a or #ededec, text #ffffff or #1a0000, Area Semibold 11–14px, border-radius 100px, padding 2px 10px. Small, compact, never decorative — functional punctuation only."

    image_mask_card:
      role: "Cards containing organic or photographic imagery"

      info: "Border-radius 20px on the container, image fills the card edge-to-edge. No border, no shadow — the image's own color and content provide visual weight. Used for the 3-card product showcase row."

    dark_overlay_panel:
      role: "Full-bleed dark section for dramatic contrast"

      info: "Background #221919 or #1a0000, content in #ffffff and #ededec. Used sparingly — one or two per page maximum — to break the white rhythm. Text uses Greed Condensed for headings and Area for body, maintaining the type system."

    footer_link_block:
      role: "Footer navigation column"

      info: "Area 14px weight 400, #514f4c, line-height 1.6. Column headings in Area Semibold 14px, #1a0000. No icons, no dividers — just generous spacing between link items."

    search_button_nav:
      role: "Global search trigger in navigation"

      ghost_pill_on_the_dark_nav_bar: "transparent background, border 1px solid #ededec, text + icon in #ffffff, border-radius 100px, padding 8px 16px."

  do_s_and_don_ts:

    do:
      - "Use Greed Condensed 700 for all display and heading text; use Area 400/700 for everything below heading level — never mix the two in the same role."
      - "Use #1a0000 (Espresso Ink) for all primary text, filled buttons, and the nav bar — never substitute #000000 or #111111."
      - "Set border-radius to 200px on filled CTA buttons and 100px on ghost buttons, badges, and inputs — pill shapes are non-negotiable."
      - "Use the hero gradient (blue → lavender → mint → green) only in the first-screen hero section; treat it as a one-time brand burst, not a repeating background."
      - "Tighten letter-spacing on Greed Condensed as size increases: -0.005em at 32px up to -0.030em at 203px — the tracking compresses proportionally with scale."
      - "Set card border-radius to 20px and use no visible border or shadow — let the #f2f2f2 fill or the image content provide the visual weight."
      - "Keep line-height at 0.79–1.15 on Greed Condensed display sizes — the tight leading is what makes 96px+ headlines feel sculptural rather than loose."

    don_t:
      - "Don't use pure #000000 or #ffffff borders for emphasis — the system's warmth comes from #1a0000 and #ededec."
      - "Don't apply the prism gradient to cards, buttons, or section backgrounds — it belongs only in the hero."
      - "Don't use shadow-based elevation on cards; the system uses surface color shifts (#ffffff → #f2f2f2 → #ededec) instead of box-shadows."
      - "Don't set Greed Condensed to weight 400 at display sizes — it looks anemic; reserve 700 for headings and use Area for body weight contrast."
      - "Don't break the pill convention with rectangular or rounded-rect buttons (4–8px radius) — the system is fully pill or fully card."
      - "Don't introduce additional brand colors (purple, orange, pink) — the palette is warm-black, white, warm grays, and the four-stop prism gradient only."
      - "Don't center-align body text; reserve center alignment for hero headlines and single-line CTAs. Body copy and descriptions stay left-aligned."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Primary page background |"
    info: "| 1 | Linen Card | `#f2f2f2` | Secondary card surface, subtle section differentiation |"
    info: "| 2 | Bone Edge | `#ededec` | Hairline borders, tertiary surface for nested elements |"
    info: "| 3 | Iris Wash | `#98bbf4` | Accent card surface echoing the hero gradient |"
    info: "| 4 | Dark Overlay | `#221919` | Full-bleed dark sections, nav bar, dramatic contrast breaks |"

  elevation:

    info: "This system deliberately avoids box-shadows. Elevation is communicated through surface color layering (#ffffff → #f2f2f2 → #ededec) and border contrast (hairline #ededec borders on #f2f2f2 cards). The dark nav bar (#1a0000) and hero gradient provide the only dramatic contrast breaks; the rest of the interface stays flat and weightless."

  imagery:

    info: "Imagery is split into two distinct registers. The hero uses 3D-rendered decorative objects — translucent iridescent gems, metallic butterflies, floating crystals — that suggest abundance and optimism, placed against the prismatic gradient. Below the hero, imagery shifts to grounded product photography: a hand holding a phone displaying the Fluz app, a burger held in two hands, a close-cropped credit card, app transaction screens. These product shots are full-bleed within 20px-radius card masks, never with lifestyle context or human faces — the object is the hero. Icon style is simple monoline strokes in #1a0000 or #ffffff, consistent with the warm-black palette."

  layout:

    info: "Max-width 1200px centered container with comfortable 64px section gaps. The hero is full-bleed (edge-to-edge gradient) with centered text, breaking the container constraint once. Below the hero, a horizontal card scroll or 3-column grid showcases products at full-bleed within 20px-radius masks. Feature sections use a 3-column card grid on white with 20–24px gaps. Navigation is a two-tier sticky black bar (utility links above, brand + nav + CTAs below). Content rhythm alternates between white (#ffffff) and warm gray (#f2f2f2) section backgrounds, with occasional dark (#1a0000) or gradient breaks. The overall density is comfortable — generous vertical breathing room, no information-dense blocks."

  agent_prompt_guide:

  quick_color_reference:
    - "Primary text: #1a0000 (Espresso Ink)"
    - "Background: #ffffff"
    - "Secondary surface: #f2f2f2 (Linen Mist)"
    - "Border: #ededec (Bone)"
    - "Accent: #98bbf4 (Iris Blue)"
    - "primary action: #1a0000 (filled action)"
    - "Hero gradient: linear-gradient(90deg, #82beff, #a6b4f7 47%, #5bb89a 74%, #21ba4c 91%)"

  example_component_prompts:
    - "**Hero Section**: Full-bleed background linear-gradient(90deg, #82beff, #a6b4f7 47%, #5bb89a 74%, #21ba4c 91%). Centered headline in Greed Condensed 700, 96–203px, #ffffff, letter-spacing -0.025em, line-height 0.85. Subtext in Area 16px, #ffffff at 80% opacity. Single filled pill CTA below: #1a0000 background, #ffffff text in Area Semibold 16px, padding 10px 16px, border-radius 200px."

    - "**Product Card**: Background #ffffff, border-radius 20px, no border, no shadow. Full-bleed image inside the 20px mask. Padding 0 — image fills to edges. If text label needed: Greed Condensed 700, 24px, #1a0000."

    - "**Category Feature Card**: Background #f2f2f2, border-radius 20px, padding 20px. Category title in Greed Condensed 700, 24px, #1a0000. Description in Area 400, 16px, #514f4c. Product render or screenshot at bottom, full-width within card."

    - "**Pill Ghost Button**: Transparent background, border 1px solid #ededec, text #ffffff or #1a0000 in Area 16px, border-radius 100px, padding 8px 16px. Used for search and secondary nav actions."

    - "**Section Heading Block**: Max-width 1200px centered. H2 in Greed Condensed 700, 64px, #1a0000, line-height 1.15, letter-spacing -0.019em. Subtext in Area 400, 18px, #514f4c, max-width 640px."

  similar_brands:

    - "**Klarna** — Same pill-button CTA system and warm-dark brand color (Klarna's near-black pink undertones mirror Fluz's Espresso Ink) with playful product imagery in rounded cards"
    - "**Cash App** — Bold condensed display typography in fintech, with a single dominant brand color against white surfaces and a willingness to let one section be visually loud while the rest stays minimal"
    - "**Wise** — Warm-toned financial brand that uses #1a0000-like warm near-blacks instead of pure #000, paired with generous white space and tight typographic hierarchy"
    - "**Mercury** — Clean cream-and-warm-gray surface stack with pill-shaped buttons and a disciplined two-font system (display + body sans)"
    - "**Robinhood** — Aggressive condensed display type in a financial context, with a single accent color burst (Robinhood green / Fluz prism gradient) breaking an otherwise monochrome interface"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-espresso-ink: #1a0000;
          --color-prism-spectrum: #a6b4f7;
          --gradient-prism-spectrum: linear-gradient(90deg, rgb(130, 190, 255), rgb(166, 180, 247) 47.21%, rgb(91, 184, 154) 73.75%, rgb(33, 186, 76) 91.26%);
          --color-canvas-white: #ffffff;
          --color-linen-mist: #f2f2f2;
          --color-bone: #ededec;
          --color-taupe-slate: #514f4c;
          --color-ash-gray: #aeaea6;
          --color-charcoal-bronze: #3a3a3a;
          --color-obsidian-roast: #221919;
          --color-iris-blue: #98bbf4;
        
          /* Typography — Font Families */
          --font-greed-semibold: 'Greed-SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-greed-condensed: 'Greed Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-area: 'Area', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.27;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 24px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.38px;
          --text-heading-sm: 42px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.84px;
          --text-heading: 64px;
          --leading-heading: 1.15;
          --tracking-heading: -1.22px;
          --text-heading-lg: 96px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.4px;
          --text-display: 203px;
          --leading-display: 0.79;
          --tracking-display: -5.08px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-96: 96px;
          --spacing-140: 140px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 20px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-xl: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 100px;
          --radius-full-2: 200px;
          --radius-full-3: 500px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-links: 100px;
          --radius-badges: 100px;
          --radius-inputs: 100px;
          --radius-buttons: 200px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-linen-card: #f2f2f2;
          --surface-bone-edge: #ededec;
          --surface-iris-wash: #98bbf4;
          --surface-dark-overlay: #221919;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-espresso-ink: #1a0000;
          --color-prism-spectrum: #a6b4f7;
          --color-canvas-white: #ffffff;
          --color-linen-mist: #f2f2f2;
          --color-bone: #ededec;
          --color-taupe-slate: #514f4c;
          --color-ash-gray: #aeaea6;
          --color-charcoal-bronze: #3a3a3a;
          --color-obsidian-roast: #221919;
          --color-iris-blue: #98bbf4;
        
          /* Typography */
          --font-greed-semibold: 'Greed-SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-greed-condensed: 'Greed Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-area: 'Area', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.27;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 24px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.38px;
          --text-heading-sm: 42px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.84px;
          --text-heading: 64px;
          --leading-heading: 1.15;
          --tracking-heading: -1.22px;
          --text-heading-lg: 96px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.4px;
          --text-display: 203px;
          --leading-display: 0.79;
          --tracking-display: -5.08px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-96: 96px;
          --spacing-140: 140px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-xl: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 100px;
          --radius-full-2: 200px;
          --radius-full-3: 500px;
        }