uglycash___style_reference:
  info: "> Sticker-covered notebook on cream paper — a vibe of irreverent, maximalist fintech that wears its chaos proudly."

  theme: "light"

  info: "UGLYCASH runs a sticker-bombed Gen-Z finance language: warm light canvas, oversized black display type, and a riot of vivid accent panels (hot pink, electric cyan, toxic lime, dusty khaki) splashed across mostly achromatic layouts. The signature move is a heavy black hairline (1px) that traces every surface — cards, phone frames, buttons, illustrations — giving the impression of printed stickers peeled onto a page. Radii are exaggerated (16px for controls, 38–46px for hero cards) to amplify the soft, toy-like feel, while the palette stays disciplined: one neutral canvas, one neutral surface, and three or four saturated brand colors used as full-bleed card fills rather than thin accents. Headlines shout at 85–164px with negative tracking; body text retreats to 14–18px Inter. Everything reads as fast, loud, and deliberately unpolished."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Static Black | `#000000` | `--color-static-black` | Text, borders, icon strokes, button outlines — the structural ink that outlines every sticker-like surface and carries all body and heading type |"
    info: "| Paper Cream | `#f2f2f2` | `--color-paper-cream` | Page canvas, body backgrounds, and soft section fills |"
    info: "| Card White | `#ffffff` | `--color-card-white` | Elevated card surfaces and inverse text on dark panels |"
    info: "| Surface Graphite | `#3a3a3a` | `--color-surface-graphite` | Dark card and panel fills for inverted sections |"
    info: "| Hardware Ink | `#000100` | `--color-hardware-ink` | Near-black phone-frame and hardware fills (visually indistinguishable from #000000, used on device mockups) |"
    info: "| Hairline Smoke | `#6e6e6e` | `--color-hairline-smoke` | Muted body text and secondary borders |"
    info: "| Placeholder Ash | `#888888` | `--color-placeholder-ash` | Helper text, disabled-state type, and low-priority metadata |"
    info: "| Sticker Khaki | `#e7e3bf` | `--color-sticker-khaki` | Card and panel fills — dusty olive-cream that reads as vintage paper against the white canvas |"
    info: "| Riot Pink | `#fa00ff` | `--color-riot-pink` | Saturated card fills, sticker backgrounds, hero callouts — the loudest voice in the accent set |"
    info: "| Voltage Cyan | `#02bbff` | `--color-voltage-cyan` | Saturated card fills and feature panel backgrounds — secondary brand voice, often paired with phone mockup screenshots |"
    info: "| Toxic Lime | `#adff02` | `--color-toxic-lime` | Green action color for filled buttons, selected navigation states, and focused conversion moments |"

  tokens___typography:

    helvetica_now_display_cn_bold___display_and_headline_voice___compressed__ultra_bold__negative_tracking__0_033em_at_85_164px__carries_the_page_s_identity__shouty_statements_like_164px_section_openers__substitute_with__helvetica_neue_condensed_bold__or__roboto_condensed_900_____font_helvetica_now_display_cn_bold:
      - "**Substitute:** Helvetica Neue Condensed Bold or Roboto Condensed 900"
      - "**Weights:** 700, 900"
      - "**Sizes:** 20px, 64px, 85px, 164px"
      - "**Line height:** 0.85, 0.94, 1.20"
      - "**Letter spacing:** -0.033em at display sizes, -0.020em at 20px"
      - "**Role:** Display and headline voice — compressed, ultra-bold, negative tracking (-0.033em at 85–164px). Carries the page's identity: shouty statements like 164px section openers. Substitute with 'Helvetica Neue Condensed Bold' or 'Roboto Condensed 900'."

    inter___body__ui__navigation__and_small_headings__weight_400_for_body__500_for_emphasis__700_for_subheadings__letter_spacing__0_02em_tightens_the_ui_text__free_google_font_____font_inter:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 12px, 14px, 18px, 20px, 24px"
      - "**Line height:** 1.17, 1.20, 1.22, 1.29, 1.33, 1.40"
      - "**Letter spacing:** -0.02em"
      - "**Role:** Body, UI, navigation, and small headings. Weight 400 for body, 500 for emphasis, 700 for subheadings. Letter-spacing -0.02em tightens the UI text. Free Google Font."

    miss_fajardose___hand_lettered_display_accent___used_sparingly_one_observation_for_a_personal_signature_on_a_card__substitute_with__caveat_brush__or__permanent_marker__for_the_same_marker_on_paper_feel_____font_miss_fajardose:
      - "**Substitute:** Caveat Brush or Permanent Marker"
      - "**Weights:** 400"
      - "**Sizes:** 38px"
      - "**Line height:** 1.20"
      - "**Role:** Hand-lettered display accent — used sparingly (one observation) for a personal signature on a card. Substitute with 'Caveat Brush' or 'Permanent Marker' for the same marker-on-paper feel."

    system_sans_serif___fallback_body_fallback__appears_in_357_instances_as_the_default_rendering_surface_for_generic_ui_chrome_and_inline_text_nodes_____font_system_sans_serif:
      - "**Substitute:** system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Role:** Fallback body fallback; appears in 357 instances as the default rendering surface for generic UI chrome and inline text nodes."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | -0.24px | `--text-caption` |"
      info: "| body-sm | 14px | 1.29 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.33 | -0.36px | `--text-body` |"
      info: "| subheading | 20px | 1.2 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.22 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 64px | 0.94 | -1.28px | `--text-heading` |"
      info: "| heading-lg | 85px | 0.85 | -2.81px | `--text-heading-lg` |"
      info: "| display | 164px | 0.85 | -5.41px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 34 | 34px | `--spacing-34` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 168 | 168px | `--spacing-168` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| buttons | 16px |"
      info: "| hairline | 1px |"
      info: "| heroCards | 38px |"
      info: "| phoneFrames | 43px |"
      info: "| featurePanels | 46px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 96px"
      - "**Card padding:** 24px"
      - "**Element gap:** 10px"

  components:

    floating_navigation_pill:
      role: "Persistent top header"

      info: "White (#ffffff) pill, 16px radius, 1px black border, fixed at the top center of the viewport. Contains the wordmark left-aligned, social icons centered, and a black-bordered 'Get the App' ghost button on the right with a small black square icon. Padding roughly 10px vertical, 20px horizontal."

    ghost_navigation_button_get_the_app:
      role: "Secondary header action"

      info: "White background, 1px black border, 16px radius, Inter 14px weight 500, black text, padding 5–10px. Left-side 20px black square icon."

    display_headline_block:
      role: "Hero and section openers"

      info: "Helvetica Now Display Cn Bold 85–164px, weight 900, line-height 0.85, letter-spacing -0.033em (-2.81px at 85px, -5.41px at 164px), color #000000, centered or left-aligned at 168px page padding. The condensed bold caps are the loudest element on any screen."

    feature_card_saturated_sticker:
      role: "Three-up feature showcase"

      info: "Full-bleed saturated fill (Riot Pink #fa00ff, Voltage Cyan #02bbff, or Sticker Khaki #e7e3bf), 1px black border, 16px radius, 24px padding. Contains a tilted phone-mockup illustration and a heading. Cards sit on a 34px column gap."

    sticker_card_khaki:
      role: "Neutral feature card"

      info: "Sticker Khaki (#e7e3bf) fill, 1px black border, 16px radius, 24px padding, no shadow. Used when a card needs visual weight without screaming a brand color."

    dark_panel_card:
      role: "Inverted surface for bank/account listings"

      info: "Surface Graphite (#3a3a3a) or Hardware Ink (#000100) fill, white (#ffffff) text, 1px black border, 16–46px radius. Hosts list rows with flag icons, country names, and outlined 'Open' buttons."

    toxic_lime_pill_button:
      role: "Primary action in lists or CTAs"

      info: "Toxic Lime (#adff02) background, 1px black border, 16px radius, Inter 14px weight 700, black text, padding 5–10px. The only filled color CTA in the system."

    outlined_open_button:
      role: "Row-level action inside account lists"

      info: "White (#ffffff) background, 1px black border, 16px radius, Inter 14px weight 500 black text, padding 5–10px."

    bank_account_row:
      role: "List item inside Dark Panel Card"

      info: "White interior surface inside a dark panel, 1px black border, 8–16px radius. Left: 24px square flag icon. Center: country name (Inter 18px weight 700) over muted helper text (Inter 14px weight 400 in #6e6e6e). Right: Outlined Open Button."

    phone_mockup_frame:
      role: "Product preview"

      info: "Hardware Ink (#000100) or Surface Graphite (#3a3a3a) body, 1px black border, 43px outer radius with 8–16px offset duplicate frame creating the peeled-sticker effect. Interior shows the app screen on a white card."

    tilted_sticker_illustration:
      role: "Decorative motif across cards"

      info: "Saturated fills (#fa00ff, #02bbff, #adff02, #e7e3bf) with 1px black borders, rotated -8° to +12°, sitting on top of card surfaces as if physically pasted on. Often contains bold short copy or iconography."

    footer_social_row:
      role: "Brand/footer micro-interaction"

      info: "Inline icon group (Discord, Instagram) rendered as 16–20px black-filled glyphs inside the navigation pill. No background, no border, 10px gap between icons."

    section_title_h2:
      role: "Mid-page section headers"

      info: "Helvetica Now Display Cn Bold 64px, weight 700, line-height 0.94, letter-spacing -0.02em (-1.28px), color #000000, left-aligned, 96px section padding above/below."

    card_caption_sub_label:
      role: "Two-line card description"

      info: "Inter 18px weight 500, line-height 1.33, color #000000. Always rendered as a two-line stack: action verb first, benefit clause second."

  do_s_and_don_ts:

    do:
      - "Use 1px solid #000000 borders on every card, button, and phone frame — borders are the load-bearing structure, not shadows"
      - "Use Helvetica Now Display Cn Bold at 85–164px with letter-spacing -0.033em for section openers; never let body text reach display sizes"
      - "Reach for the saturated brand colors (#fa00ff, #02bbff, #adff02, #e7e3bf) as full card or panel fills, never as thin text accents"
      - "Set card and button radius to 16px; escalate to 38–46px only for hero-scale panels and phone frames"
      - "Keep the page canvas at #f2f2f2 and default card surface at #ffffff; let the saturated stickers do the loud work on top"
      - "Use Inter for everything below 24px — body, UI, navigation, captions — at 14–18px with -0.02em tracking"
      - "Maintain 96px vertical section gaps and 10–20px element gaps to preserve the comfortable, sticker-pasted rhythm"

    don_t:
      - "Do not add drop shadows; elevation is drawn with borders and offset duplicate frames"
      - "Do not use the saturated brand colors for thin underlines, icon strokes, or 1px borders — they need fill to read as stickers"
      - "Do not use more than two type families on a single surface; Helvetica Now + Inter (or one handwritten accent) is the ceiling"
      - "Do not push body text below 14px or above 20px — the UI scale is tight and the contrast assumes 14–18px body"
      - "Do not set radius to 0 or to 9999px; the system lives in the 1px / 16px / 38–46px range"
      - "Do not use the brand colors as text color on white backgrounds — black text on saturated fills, white text only on #000100/#3a3a3a panels"
      - "Do not let display headlines wrap before 4 words; the 164px size assumes 1–3 short lines at 0.85 line-height"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas Cream | `#f2f2f2` | Page background and outer gutter |"
    info: "| 1 | Card White | `#ffffff` | Default product/feature card surface |"
    info: "| 2 | Sticker Khaki | `#e7e3bf` | Tinted feature panel and section background |"
    info: "| 3 | Surface Graphite | `#3a3a3a` | Inverted dark sections and phone-frame fills |"

  elevation:

    - "**Sticker Cards:** `1px solid #000000 — borders carry the weight`"
    - "**Phone Mockups:** `1px solid #000000 with optional 8–16px offset duplicate frame for the peeled-sticker depth illusion`"

  imagery:

    info: "Imagery is dominated by tilted, sticker-style illustrations of credit cards, percentage badges, candy/gem shapes, and phone mockups — all rendered with 1px black outlines and saturated fills as if die-cut and pasted onto the page. Photography is absent. Phone mockups appear repeatedly, sometimes overlapping cards at -8° to +12° rotations. Icons are flat, single-color, and outline-stroked in black. The visual register is printed-ephemera, not polished product render."

  layout:

    info: "Max-width 1200px centered, with the navigation rendered as a floating pill (not a full-width bar). The hero is a centered stacked composition: small floating nav, two-line 164px headline, then a phone mockup directly below. Mid-page alternates a three-column feature card row (16px radius, 24px column gap) with two-line captions beneath. A 168px horizontal padding wraps the hero, and 96px vertical gaps separate major sections. The bank-listing section uses a single dark panel with stacked white rows rather than a grid. Overall density is comfortable — generous whitespace between sections, tight rhythm inside cards."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background: #f2f2f2"
    - "surface (card): #ffffff"
    - "border: #000000 (1px, non-negotiable)"
    - "accent sticker fills: #fa00ff (Riot Pink), #02bbff (Voltage Cyan), #adff02 (Toxic Lime), #e7e3bf (Sticker Khaki)"
    - "primary action: no distinct CTA color"

  example_component_prompts:
    - "**Floating Nav Pill**: white (#ffffff) pill, 1px #000000 border, 16px radius, 10px/20px padding, fixed top-center, contains 'UGLYCASH' wordmark left, Discord + Instagram black icons middle, 'Get the App' ghost button right (white fill, 1px #000000 border, 16px radius, Inter 14/500)."
    - "**Display Headline Section**: 164px Helvetica Now Display Cn Bold weight 900, #000000, line-height 0.85, letter-spacing -5.41px, centered, with 168px horizontal page padding and 96px vertical gap below."
    - "**Three-Up Feature Card Row**: three cards on a 24px column gap, each 16px radius with 1px #000000 border. Card 1 fill #e7e3bf, Card 2 fill #fa00ff, Card 3 fill #02bbff. Each card has 24px padding, a tilted phone mockup inside, and below the row a two-line caption in Inter 18/500 #000000."
    - "**Toxic Lime Pill Action**: #adff02 background, 1px #000000 border, 16px radius, Inter 14/700 #000000, padding 5px/10px, sits inside any card or panel as a list-level action."
    - "**Dark Bank-Listing Panel**: #3a3a3a fill, 1px #000000 border, 46px radius, 24px padding, containing white (#ffffff) interior rows with 16px radius, flag icon left, Inter 18/700 country name, Inter 14/400 #6e6e6e helper text, and a white-fill outlined 'Open' button right."

  similar_brands:

    - "**Cash App** — Same bright-against-neutral sticker aesthetic with single-vivid accent panels and oversized bold type, but UGLYCASH pushes the outlined-sticker border treatment harder"
    - "**Revolut** — Comparable fintech information architecture (multi-currency account lists inside dark panels), though UGLYCASH swaps Revolut's purple for a louder neon-pink/cyan/lime palette and a brutalist border language"
    - "**Gumroad** — Shares the irreverent Gen-Z tone, sticker-style illustration treatment, and a cream-and-black canvas that lets saturated accent colors do the work"
    - "**Pimento** — Tilted illustrated cards, condensed display headlines, and a paper-on-paste visual metaphor are virtually identical in approach"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-static-black: #000000;
          --color-paper-cream: #f2f2f2;
          --color-card-white: #ffffff;
          --color-surface-graphite: #3a3a3a;
          --color-hardware-ink: #000100;
          --color-hairline-smoke: #6e6e6e;
          --color-placeholder-ash: #888888;
          --color-sticker-khaki: #e7e3bf;
          --color-riot-pink: #fa00ff;
          --color-voltage-cyan: #02bbff;
          --color-toxic-lime: #adff02;
        
          /* Typography — Font Families */
          --font-helvetica-now-display-cn-bold: 'Helvetica Now Display Cn Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-miss-fajardose: 'Miss Fajardose', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --text-body: 18px;
          --leading-body: 1.33;
          --tracking-body: -0.36px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.22;
          --tracking-heading-sm: -0.48px;
          --text-heading: 64px;
          --leading-heading: 0.94;
          --tracking-heading: -1.28px;
          --text-heading-lg: 85px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: -2.81px;
          --text-display: 164px;
          --leading-display: 0.85;
          --tracking-display: -5.41px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-27: 27px;
          --spacing-34: 34px;
          --spacing-96: 96px;
          --spacing-168: 168px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 24px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-lg: 8.2px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 23px;
          --radius-3xl: 38px;
          --radius-3xl-2: 43px;
          --radius-3xl-3: 46px;
          --radius-full: 50px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-buttons: 16px;
          --radius-hairline: 1px;
          --radius-herocards: 38px;
          --radius-phoneframes: 43px;
          --radius-featurepanels: 46px;
        
          /* Surfaces */
          --surface-canvas-cream: #f2f2f2;
          --surface-card-white: #ffffff;
          --surface-sticker-khaki: #e7e3bf;
          --surface-surface-graphite: #3a3a3a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-static-black: #000000;
          --color-paper-cream: #f2f2f2;
          --color-card-white: #ffffff;
          --color-surface-graphite: #3a3a3a;
          --color-hardware-ink: #000100;
          --color-hairline-smoke: #6e6e6e;
          --color-placeholder-ash: #888888;
          --color-sticker-khaki: #e7e3bf;
          --color-riot-pink: #fa00ff;
          --color-voltage-cyan: #02bbff;
          --color-toxic-lime: #adff02;
        
          /* Typography */
          --font-helvetica-now-display-cn-bold: 'Helvetica Now Display Cn Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-miss-fajardose: 'Miss Fajardose', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --text-body: 18px;
          --leading-body: 1.33;
          --tracking-body: -0.36px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.22;
          --tracking-heading-sm: -0.48px;
          --text-heading: 64px;
          --leading-heading: 0.94;
          --tracking-heading: -1.28px;
          --text-heading-lg: 85px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: -2.81px;
          --text-display: 164px;
          --leading-display: 0.85;
          --tracking-display: -5.41px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-27: 27px;
          --spacing-34: 34px;
          --spacing-96: 96px;
          --spacing-168: 168px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-lg: 8.2px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 23px;
          --radius-3xl: 38px;
          --radius-3xl-2: 43px;
          --radius-3xl-3: 46px;
          --radius-full: 50px;
          --radius-full-2: 100px;
        }