franky_s___style_reference:
  info: "> Retro arcade kiosk on a skate-shop counter."

  theme: "light"

  info: "Franky's is a retro arcade-meets-skate-shop visual language: a warm cream canvas (#f3e5df) wrapped in hard pixel-art borders, an omnipresent black-and-white checkerboard, and a single Arcade pixel font carrying every word on the site. The palette is deliberately impoverished — only two chromatic colors survive (signal-orange #faa21f for the marquee bar and a punchy green #128e44 for the buy button), with all hierarchy expressed through the Arcade font's weight jump from 400 to 700 and through black-on-cream contrast. Surfaces stay flat and monolithic; depth comes only from a 1px inset cream line on buttons and the checkerboard's tonal play. Components feel like 1990s shopfront sprites: thick black borders, tight 6–12px radii, compact 4–8px internal padding, and 3D/AR toggles that read as pixel icons rather than chrome. New pages should preserve the arcade cabinet feel: no gradients except the orange marquee, no soft shadows, no decorative typography — just cream paper, black pixel rules, and one warm orange call."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Arcade Cream | `#f3e5df` | `--color-arcade-cream` | Page background, product card surfaces, inset highlights on buttons |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, checkerboard tiles, all UI borders, card outlines, icon strokes |"
    info: "| Pixel Gray | `#e5e7eb` | `--color-pixel-gray` | Hairline borders, card dividers, structural rules between grid cells |"
    info: "| Charcoal | `#333333` | `--color-charcoal` | Secondary surface tone, checkerboard shadow squares, shadow color |"
    info: "| Carbon | `#151515` | `--color-carbon` | Deep neutral for illustration fills and the densest checkerboard tiles |"
    info: "| Muted Gray | `#737373` | `--color-muted-gray` | Disabled/muted text on buttons and body copy |"
    info: "| Marquee Orange | `#faa21f` | `--color-marquee-orange` | Top notification bar, marquee accents, brand signature |"
    info: "| Buy Green | `#128e44` | `--color-buy-green` | Filled ADD TO CART button — the only green purchase action |"

  tokens___typography:

    arcade___sole_typeface_across_the_entire_interface___every_heading__label__price__button__body_and_icon_is_set_in_arcade__the_400_700_weight_jump_is_the_only_hierarchy_tool__using_a_second_typeface_would_shatter_the_kiosk_illusion_____font_arcade:
      - "**Substitute:** VT323, Press Start 2P (Google Fonts pixel set) — match the 8-bit, all-caps-leaning look"
      - "**Weights:** 400, 700"
      - "**Sizes:** 10px, 14px, 16px, 18px"
      - "**Line height:** 1.25, 1.43, 1.50, 1.56"
      - "**Letter spacing:** normal across all sizes — the font's bitmap grid is the rhythm, not tracking"
      - "**Role:** Sole typeface across the entire interface — every heading, label, price, button, body and icon is set in Arcade. The 400/700 weight jump is the only hierarchy tool; using a second typeface would shatter the kiosk illusion."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.56 | — | `--text-subheading` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 44 | 44px | `--spacing-44` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 12px |"
      info: "| buttons | 6px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(243, 229, 223) 0px 1px 0px 0px inset` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 43-61px"
      - "**Card padding:** 12px"
      - "**Element gap:** 4-8px"

  components:

    marquee_announcement_bar:
      role: "Top-of-page strip"

      info: "Full-width band filled with the Marquee Sheen gradient (orange → cream → orange). Arcade 14px/400, letter-spacing normal, black or dark-brown text. Height ~36px, flush with the top of the viewport. It is the only decorative chromatic surface on the page."

    header_bar:
      role: "Primary navigation"

      info: "Cream (#f3e5df) background, 1px solid #000000 bottom border. Wordmark 'franky's' set in Arcade 18px/700 in #000000 with a small black cross pixel-icon. Hamburger menu on the right (three 2px black lines, 16px apart). No drop shadow, no sticky elevation — it sits flat on the cream canvas."

    product_showcase_panel_3d_ar:
      role: "Hero product viewer"

      info: "Large left-hand panel (roughly 55% of viewport width) with a black-and-cream checkerboard floor receding in perspective. A charcoal (#333333) cap floats centered with a soft #333333 shadow. Bottom-center contains two pill toggles: '3D' and 'AR', each 6px radius, 1px inset cream highlight (#f3e5df 0px 1px 0px 0px inset), 2px 8px padding, Arcade 14px/400."

    product_card:
      role: "Grid cell for one SKU"

      info: "Cream (#f3e5df) background, 12px radius, 1px solid #e5e7eb border. Internal padding 12px. Product image fills the top ~70% of the card on a pure cream backdrop. Title (e.g. 'FRANKY'S GREEN 665') in Arcade 14px/700 #000000 at the bottom-left, price in Arcade 14px/400 #000000 at the bottom-right. Two stacked controls under the title area: ghost 'TRY IN AR' button and filled or ghost 'ADD TO CART' / 'OUT OF STOCK' button."

    try_in_ar_button_ghost:
      role: "3D/AR preview trigger"

      info: "6px radius, transparent fill, 1px solid #000000 border, Arcade 14px/400 #000000. Padding 4px 12px. The 'AR' suffix is wrapped in a tiny pill (9999px) to read as a badge."

    add_to_cart_button_filled_green:
      role: "Primary purchase action"

      info: "6px radius, #128e44 background, Arcade 14px/700 #ffffff (white) text, fully uppercase. Padding 8px 12px. Optional 1px inset cream highlight (#f3e5df 0px 1px 0px 0px inset) to keep the arcade-button feel. This is the only green surface in the system."

    out_of_stock_button_disabled_ghost:
      role: "Depleted SKU state"

      info: "6px radius, transparent fill, 1px solid #737373 border, Arcade 14px/400 #737373 text. Same dimensions as the live Add-To-Cart button so the grid stays uniform."

    marquee_tag_pill_badge:
      role: "Inline label inside buttons and cards"

      info: "9999px radius, 1px solid #000000 border, Arcade 10px/400 #000000, padding 2px 8px. Used for suffixes like 'AR' or sub-tags inside cards."

    footer_strip:
      role: "Bottom-of-page info bar"

      info: "1px solid #e5e7eb top border on cream. Left: '© FRANKY'S AMSTERDAM 2023' in Arcade 14px/400 #000000. Right: 'SUBSCRIBE' and 'SHIPPING' in Arcade 14px/700 #000000 acting as ghost links."

    checkerboard_surface:
      role: "Hero texture / brand pattern"

      info: "Repeating two-tone square grid in #f3e5df and #000000 (or #333333 for shadowed variants). Square size ~48px. Used as the hero panel backdrop and as decorative banding; never as a functional UI surface."

  do_s_and_don_ts:

    do:
      - "Use Arcade 400 for body, labels, prices, and captions; jump to Arcade 700 only for titles, nav items, and the footer links — the weight shift is the entire hierarchy."
      - "Set every CTA, tag, and toggle to a 6px radius (or 9999px for the inline 'AR' pill) and add the 1px inset cream highlight (#f3e5df 0px 1px 0px 0px inset) to keep the arcade-button bevel."
      - "Use Buy Green (#128e44) only for the filled Add-To-Cart button; never reuse it for links, borders, or hover states."
      - "Anchor the page on Arcade Cream (#f3e5df); use Pixel Gray (#e5e7eb) for 1px structural rules and card borders, Ink Black (#000000) for text and checkerboard contrast."
      - "Reserve Marquee Orange (#faa21f) for the top announcement bar and the optional Marquee Sheen gradient — it should never appear as a button fill or large text color."
      - "Keep vertical rhythm in 4px increments; element gaps live at 4–8px, card padding at 12px, and section gaps at 43–61px."
      - "Pair every product card with a Try-In-AR ghost button stacked above the Add-To-Cart (or Out-Of-Stock) button so the right-hand grid stays uniform."

    don_t:
      - "Don't introduce a second typeface — no system fonts, no sans-serifs, no display scripts. Arcade is the brand."
      - "Don't use soft drop shadows; the only shadow allowed is the 1px inset cream highlight on buttons and the flat #333333 under the floating cap."
      - "Don't round cards above 12px or buttons below 6px — the 6/12/9999px triad is the only permitted radius vocabulary."
      - "Don't place Buy Green (#128e44) on a non-purchase element, and don't pair it with the Marquee Sheen gradient in the same component."
      - "Don't dilute the checkerboard — it must read as pure #000000 against #f3e5df (or #333333 for shadow tones), never as a tinted gray or blurred pattern."
      - "Don't use dark-mode backgrounds; the canvas is always Arcade Cream, even inside cards and modals."
      - "Don't exceed 18px on any text or drop below 10px — the Arcade font's bitmap grid breaks outside that range."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Arcade Cream | `#f3e5df` | Page canvas — warm off-white that makes the pixel font breathe |"
    info: "| 2 | Pixel Gray | `#e5e7eb` | Grid gutter tone and product card background variation |"
    info: "| 3 | Charcoal | `#333333` | Checkerboard shadow squares and tertiary surface |"
    info: "| 4 | Carbon | `#151515` | Deepest checkerboard tone, near-black illustration fills |"

  elevation:

    - "**Add To Cart / Ghost buttons:** `inset 0 1px 0 0 #f3e5df — 1px cream pixel-highlight at the top edge`"
    - "**Floating product cap in hero:** `flat #333333 drop, no blur, sits directly under the product`"

  imagery:

    info: "Photography of caps on a pure cream backdrop, centered and tightly cropped, with a soft charcoal contact shadow beneath. No lifestyle, no models, no context — the cap is the hero. The checkerboard behind the hero doubles as a graphic surface. No illustrations, no 3D renders beyond the AR toggle, no decorative icons beyond the pixel cross in the wordmark."

  layout:

    info: "Full-bleed single-screen product page on desktop, max-width 1200px centered. Top-to-bottom rhythm: orange marquee bar → cream header with black rule → two-column split (55% hero checkerboard / 45% 2-column product card grid) → cream footer strip. On mobile, the hero collapses to a full-width checkerboard and the grid becomes a single column. Cards are evenly distributed in a 2-column grid with Pixel Gray (#e5e7eb) hairline dividers between them. Section gaps are tight (43–61px) and the interface never uses full-bleed dark bands — the cream canvas runs uninterrupted."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000 on #f3e5df"
    - "background: #f3e5df (Arcade Cream)"
    - "border: #e5e7eb hairline, #000000 for structural rules"
    - "accent: #faa21f (Marquee Orange — top bar only)"
    - "primary action: #128e44 (filled action)"
    - "disabled/muted: #737373 text on ghost button"

    info: "Example Component Prompts:"
    - "Product Card — Cream (#f3e5df) background, 12px radius, 1px solid #e5e7eb border, 12px padding. Title 'FRANKY'S GREEN 665' in Arcade 14px/700 #000000 bottom-left, price '€65' in Arcade 14px/400 #000000 bottom-right. Stacked controls: a ghost 'TRY IN AR' button (6px radius, transparent fill, 1px #000000 border, Arcade 14px/400, 4px 12px padding) with the 'AR' suffix in a 9999px pill, above a filled Add-To-Cart button (#128e44, Arcade 14px/700 white, 6px radius, 8px 12px padding, 1px inset #f3e5df highlight)."
    - "Marquee Announcement Bar — Full-width strip, 36px tall, filled with linear-gradient(to right, #faa21f, #fef3c7, #faa21f). Text 'KIN. STORE. COUPONS' in Arcade 14px/400 #000000, centered."
    - "Header Bar — Cream (#f3e5df) background, 1px solid #000000 bottom border, 44px tall. Wordmark 'franky's' with pixel-cross icon in Arcade 18px/700 #000000 left-aligned, three 2px black horizontal lines (16px apart) right-aligned as a hamburger."
    - "3D/AR Hero Panel — 55% viewport width, filled with a 48px repeating #f3e5df / #000000 checkerboard. A charcoal (#333333) cap centered with a flat #333333 contact shadow. Two pill toggles '3D' and 'AR' centered at the bottom: 6px radius, transparent fill, 1px #000000 border, Arcade 14px/400, 1px inset #f3e5df highlight, 2px 8px padding."
    - "Footer Strip — 1px solid #e5e7eb top border on #f3e5df, 32px tall. Left: '© FRANKY'S AMSTERDAM 2023' in Arcade 14px/400 #000000. Right: 'SUBSCRIBE' and 'SHIPPING' in Arcade 14px/700 #000000 with 24px gap between them."

  similar_brands:

    - "**Polar Skate Co.** — Same flat cream canvas, bold black-bordered product cards, and a single warm accent (Polar's red, Franky's orange) on a marquee bar"
    - "**Palace Skateboards** — Pixel/bitmap-influenced type system, checkerboard product framing, and the 6px-radius beveled button look"
    - "**Stüssy** — Compact cream-and-black product grid with tight padding and a single chromatic CTA color"
    - "**Aimé Leon Dore** — Warm off-white surfaces, monospaced/pixel-adjacent labels, and minimal-but-precise card radii"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-arcade-cream: #f3e5df;
          --color-ink-black: #000000;
          --color-pixel-gray: #e5e7eb;
          --color-charcoal: #333333;
          --color-carbon: #151515;
          --color-muted-gray: #737373;
          --color-marquee-orange: #faa21f;
          --color-buy-green: #128e44;
        
          /* Typography — Font Families */
          --font-arcade: 'Arcade', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-24: 24px;
          --spacing-44: 44px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 43-61px;
          --card-padding: 12px;
          --element-gap: 4-8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 12px;
          --radius-buttons: 6px;
        
          /* Shadows */
          --shadow-subtle: rgb(243, 229, 223) 0px 1px 0px 0px inset;
        
          /* Surfaces */
          --surface-arcade-cream: #f3e5df;
          --surface-pixel-gray: #e5e7eb;
          --surface-charcoal: #333333;
          --surface-carbon: #151515;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-arcade-cream: #f3e5df;
          --color-ink-black: #000000;
          --color-pixel-gray: #e5e7eb;
          --color-charcoal: #333333;
          --color-carbon: #151515;
          --color-muted-gray: #737373;
          --color-marquee-orange: #faa21f;
          --color-buy-green: #128e44;
        
          /* Typography */
          --font-arcade: 'Arcade', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-24: 24px;
          --spacing-44: 44px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgb(243, 229, 223) 0px 1px 0px 0px inset;
        }