playdate___style_reference:
  info: "> A yellow Game Boy under museum lights. Playdate's whole identity is that single bright product held against neutral gray, with one violet spark doing all the interactive work."

  theme: "mixed"

  info: "Playdate reads like a sunlit toy-store catalog: saturated yellow bands alternate with cool gray and white sections, each one a stage for the bright handheld itself. A single violet accent does all the talking — buttons, links, the nav buy-pill — while the rest of the UI stays quiet on warm charcoal text and bone-white cards. Roobert carries the tone: an oversized lowercase wordmark in sunflower yellow is the brand's signature, body copy sits at a confident 22px in a humanist geometric, and line-height is generous enough to feel handmade. Components are intentionally weightless: 2.85px corners on game cards, no decorative borders, and CTAs that float as purple pills with soft drop-shadows. The rhythm is full-bleed sections stacked vertically, each one swapping palette so the page reads like a printed product brochure rather than a typical SaaS landing."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Sunbeam Yellow | `#ffc500` | `--color-sunbeam-yellow` | Section backgrounds, the product itself, display wordmarks — the page's primary brand canvas and the loudest single color in the system |"
    info: "| Electric Violet | `linear-gradient(180deg, rgb(148, 0, 255), rgb(92, 0, 255))` | `--color-electric-violet` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Carbon | `#312f27` | `--color-carbon` | Body text, heading text, icon strokes, form labels — a warm near-black chosen over pure #000 to sit comfortably against yellow and white without vibrating |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, text on violet buttons, text on dark bands — the default light surface |"
    info: "| Slate Gray | `#788086` | `--color-slate-gray` | Hero section background — a desaturated mid-gray that lets the yellow product pop without competing with it |"
    info: "| Fog | `#efefef` | `--color-fog` | Light alternate surface, input fill on white sections, subtle dividers |"
    info: "| Sand | `#e9e4d9` | `--color-sand` | Input backgrounds, callout bubbles, warm light surface — bridges between the cool neutrals and the yellow brand |"
    info: "| Ash | `#b1afa7` | `--color-ash` | Muted helper text, secondary borders, subdued metadata — the quietest visible neutral |"

  tokens___typography:

    roobert___sole_typeface_across_the_system___a_humanist_geometric_that_handles_the_68px__playdate__wordmark_and_22px_body_copy_in_the_same_family__weight_400_carries_ui_and_running_text__weight_700_800_anchors_display_words__prices__and_ctas__the_custom__0_007em_tracking_is_applied_globally_so_even_body_text_sits_a_touch_tighter_than_system_defaults_____font_roobert:
      - "**Substitute:** Manrope, Inter, or DM Sans at matching weights"
      - "**Weights:** 400, 700, 800"
      - "**Sizes:** 19, 21, 22, 24, 29, 33, 34, 40, 51, 57, 68"
      - "**Line height:** 1.0–2.0 (display 1.0, body 1.3, generous blocks 2.0)"
      - "**Letter spacing:** -0.0070em"
      - "**Role:** Sole typeface across the system — a humanist geometric that handles the 68px 'playdate' wordmark and 22px body copy in the same family. Weight 400 carries UI and running text; weight 700/800 anchors display words, prices, and CTAs. The custom -0.007em tracking is applied globally so even body text sits a touch tighter than system defaults."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 19px | 25 | -0.13px | `--text-caption` |"
      info: "| body-sm | 21px | 27 | -0.15px | `--text-body-sm` |"
      info: "| subheading | 24px | 29 | -0.17px | `--text-subheading` |"
      info: "| heading-sm | 29px | 35 | -0.2px | `--text-heading-sm` |"
      info: "| heading | 34px | 41 | -0.24px | `--text-heading` |"
      info: "| heading-lg | 40px | 44 | -0.28px | `--text-heading-lg` |"
      info: "| display | 51px | 56 | -0.36px | `--text-display` |"
      info: "| display-lg | 57px | 63 | -0.4px | `--text-display-lg` |"
      info: "| hero | 68px | 68 | -0.48px | `--text-hero` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 232 | 232px | `--spacing-232` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 28.5px |"
      info: "| cards | 2.85px |"
      info: "| inputs | 6px |"
      info: "| buttons | 28.5px |"
      info: "| navButtons | 22px |"
      info: "| heroButtons | 34.2px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 60px"
      - "**Card padding:** 24px"
      - "**Element gap:** 11-19px"

  components:

    primary_cta_pill_order_now:
      role: "Main purchase action on hero and landing sections"

      info: "Violet #7700ff background, white text, 28-34px border-radius (fully pill-shaped), 14px 28px padding, 21-22px Roobert weight 700, subtle 0 2px 8px rgba(0,0,0,0.15) drop shadow. The shadow lifts the pill off whatever section color it sits on — yellow, white, or gray — without darkening the page."

    nav_buy_pill_buy_now:
      role: "Persistent purchase action in the top navigation"

      compact_version_of_the_primary_cta: "violet #7700ff fill, white text, 22px radius, 8px 16px padding, 19-21px Roobert weight 700. Sits in the rightmost nav slot on a light background."

    game_card:
      role: "Individual game tile in the seasonal showcase grid"

      info: "White #ffffff surface, 2.85px border-radius (almost square — the 1-bit game art fills edge-to-edge), no border, no shadow. Aspect ratio follows the source art; 3 columns on desktop, stacking to 1 column on mobile."

    yellow_section_band:
      role: "Full-bleed content section with the brand yellow as canvas"

ffc500_fills_the_full_viewport_width_with_no_internal_border__body_text_inside_reverts_to_carbon_312f27__used_for_the__we_made_playdate_just_for_fun__wordmark_band_and_the_game_showcase_section:

    hero_display_wordmark:
      role: "Headline-scale brand statement on the landing hero"

      info: "Renders 'playdate' in lowercase Roobert at 68px, weight 800, line-height 1.0, color Sunbeam Yellow #ffc500 on the gray hero. Fills nearly the full content width; the lowercase + extra-bold combo is the brand's most recognizable typographic moment."

    hero_subhead:
      role: "White-text tagline under the hero product image"

      info: "34-40px Roobert weight 700, color #ffffff, sits on the Slate Gray #788086 hero band. One line, sentence-case, no punctuation — the band itself carries the weight."

    inline_body_copy:
      role: "Standard running paragraph text on yellow and white sections"

      info: "22px Roobert weight 400, line-height ~1.3, color Carbon #312f27. Paragraphs are short (2-3 sentences), centered or left-aligned to a ~640px measure."

    inline_link:
      role: "In-prose hyperlinks and emphasized phrases"

      info: "Electric Violet #7700ff at body weight 400, no underline at rest, underline appears on hover. Used sparingly — most emphasis is achieved through weight changes instead."

    speech_bubble_callout:
      role: "Conversational annotation boxes (e.g. 'Wait! No spoilers, please!')"

      info: "Light Sand #e9e4d9 fill, Carbon #312f27 text, 6-10px border-radius, small triangular tail. 19-21px Roobert weight 400, bold spans inside for emphasis. Acts as a playful UI voice — the only place where the warm neutral appears as a fill."

    input_field:
      role: "Form input on light and yellow sections"

      info: "Fog #efefef or Sand #e9e4d9 background, 6px border-radius, 1px subtle border, Carbon text. Padding ~12px 16px, 21px Roobert. No visible focus ring color — focus state uses a 2px violet outline."

    top_navigation_bar:
      role: "Persistent site navigation"

      sits_at_top_of_every_page__left: "white 'playdate' wordmark in Roobert weight 700. Center/right: icon-prefixed text links in Carbon, evenly spaced. Far right: the violet Buy Now pill. No background fill — the nav is transparent over whatever section color is behind it."

    footer:
      role: "Bottom-of-page utility links and brand mark"

      info: "Full-width band, typically Carbon or violet background depending on the previous section. White or violet text, small 19px Roobert, grouped links separated by thin dividers."

  do_s_and_don_ts:

    do:
      - "Use Electric Violet #7700ff exclusively for interactive elements — buttons, links, and the nav pill. Never apply it to body text or decorative shapes."
      - "Apply 28-34px pill radii to all primary CTAs; use 2.85px for game cards and content tiles. These two radius values define the system's contrast between bold action and quiet content."
      - "Render the brand wordmark 'playdate' in lowercase Roobert at display sizes (51-68px), weight 800, in Sunbeam Yellow on neutral backgrounds."
      - "Set body copy at 22px Roobert weight 400 in Carbon #312f27 with line-height ~1.3. Apply the global -0.007em tracking to all Roobert usage."
      - "Alternate section backgrounds vertically: Slate Gray hero → yellow band → white band → yellow band. Each section is full-bleed with no borders between them."
      - "Use Sunbeam Yellow #ffc500 as a full-bleed section background, never as a small accent fill on a card or button."
      - "Keep game cards flat and borderless — the 1-bit game art is the content; adding shadows or borders would compete with it."

    don_t:
      - "Don't use Electric Violet for body text, headings, or background fills larger than a button — its role is interactive punctuation, not chrome."
      - "Don't apply heavy drop shadows to cards, images, or text. The single 0 2px 8px rgba(0,0,0,0.15) belongs only on CTA pills."
      - "Don't mix in additional accent hues. The system is intentionally bichromatic (yellow + violet) on a warm-neutral base."
      - "Don't use pure #000000 for text — Carbon #312f27 is warmer and sits correctly on both yellow and white without edge vibration."
      - "Don't render the brand wordmark in uppercase, serif, or non-Roobert faces. The lowercase geometric is the signature."
      - "Don't add borders or backgrounds to game cards. The 2.85px radius alone is the only frame the art needs."
      - "Don't apply letter-spacing wider than the global -0.007em — the type is designed tight, and opening it up breaks the geometric rhythm."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Slate Gray Hero Canvas | `#788086` | Full-bleed hero section background, lets the yellow product and white text read with maximum contrast |"
    info: "| 2 | Sunbeam Yellow Band | `#ffc500` | Primary brand section background, alternates with white bands to create a catalog-style rhythm |"
    info: "| 3 | Paper White Card | `#ffffff` | Card surfaces on yellow and gray backgrounds — the lightest surface, used for game tiles and content blocks |"
    info: "| 4 | Sand Callout | `#e9e4d9` | Warm neutral fill for speech-bubble annotations and softer content surfaces |"
    info: "| 5 | Fog Alternate | `#efefef` | Coolest neutral, used for input fills and the most recessed surface treatment |"

  elevation:

    - "**Primary CTA Pill:** `0 2px 8px rgba(0, 0, 0, 0.15)`"
    - "**Nav Buy Pill:** `0 1px 4px rgba(0, 0, 0, 0.2)`"

  imagery:

    product_photography_dominates: "the yellow handheld is shot on a neutral gray background, framed large and centered, with no lifestyle context — the object itself is the hero. Game showcase cards use high-contrast 1-bit black-and-white pixel art at native resolution, giving a deliberately retro/Game Boy feel. The device appears as both a photograph and a 3D render (you can see the smooth shading and crisp edges on the hero shot), with the crank handle and button details rendered in vector-clean precision. No lifestyle photography, no human subjects, no environmental scenes — the visual language is 'product on a stage' across the board. Icon style is minimal mono-stroke line icons in nav (search, games, dev, education, help, sign-in) at 1.5-2px stroke weight."

  layout:

    info: "Full-bleed vertical sections, each one swapping background color (Slate Gray → Sunbeam Yellow → Paper White → Sunbeam Yellow). The hero is a centered stack: product image at the visual center, white subhead beneath, then the page scrolls into the giant yellow 'playdate' wordmark with a violet order pill directly below it. Content max-width sits around 1200px, centered. The game showcase uses a strict 3-column card grid (3×3 visible) with no gutters between cards — they tile edge-to-edge as a single image wall. Body paragraphs are centered or left-aligned to a ~640px measure within the wider container. Navigation is a thin transparent top bar, not a heavy header. No sticky elements, no sidebars, no mega-menus — the layout is brochure-flat from top to bottom."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #312f27 (Carbon)"
    - "background: #ffc500 (yellow bands) / #ffffff (cards) / #788086 (hero gray)"
    - "border: #b1afa7 (Ash, muted dividers only)"
    - "accent: #7700ff (Electric Violet)"
    - "primary action: no distinct CTA color"
    - "font: Roobert (substitute: Manrope or Inter), weights 400/700/800, global -0.007em tracking"

    example_component_prompts:
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."
    - "**Game showcase card** — White #ffffff surface, 2.85px border-radius, no border, no shadow. The 1-bit black-and-white game art fills edge-to-edge. Tile 3 across with no gutter."
    - "**Hero display wordmark** — 'playdate' in lowercase Roobert at 68px, weight 800, line-height 1.0, color #ffc500. Sits on a #788086 gray background."
    - "**Speech-bubble callout** — #e9e4d9 fill, #312f27 text, 6-10px border-radius, small triangular tail pointing to the subject. 19-21px Roobert weight 400 with bold spans for emphasized words."
    - "**Section background band** — Full-bleed #ffc500 yellow with no internal borders. 60px vertical padding. Body text inside is #312f27 at 22px, centered or left-aligned to ~640px."

  similar_brands:

    - "**Teenage Engineering** — Same playful colored product-as-hero approach, with bold lowercase wordmarks, generous whitespace, and bichromatic product photography on neutral backgrounds"
    - "**Analogue** — Retro gaming hardware presentation — the device floats on a neutral stage, with sparse UI and 1-bit-era visual references in supporting artwork"
    - "**Nothing (nothing.tech)** — Bichromatic brand identity built on a single vivid accent color against monochrome surfaces, with confident display type and minimal chrome"
    - "**Bored Ape / Yuga Labs** — Yellow-and-purple playful tech branding, oversized lowercase display type, and an overall toy-aisle energy applied to a digital product"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-sunbeam-yellow: #ffc500;
          --color-electric-violet: #7700ff;
          --gradient-electric-violet: linear-gradient(180deg, rgb(148, 0, 255), rgb(92, 0, 255));
          --color-carbon: #312f27;
          --color-paper-white: #ffffff;
          --color-slate-gray: #788086;
          --color-fog: #efefef;
          --color-sand: #e9e4d9;
          --color-ash: #b1afa7;
        
          /* Typography — Font Families */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 19px;
          --leading-caption: 25;
          --tracking-caption: -0.13px;
          --text-body-sm: 21px;
          --leading-body-sm: 27;
          --tracking-body-sm: -0.15px;
          --text-subheading: 24px;
          --leading-subheading: 29;
          --tracking-subheading: -0.17px;
          --text-heading-sm: 29px;
          --leading-heading-sm: 35;
          --tracking-heading-sm: -0.2px;
          --text-heading: 34px;
          --leading-heading: 41;
          --tracking-heading: -0.24px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 44;
          --tracking-heading-lg: -0.28px;
          --text-display: 51px;
          --leading-display: 56;
          --tracking-display: -0.36px;
          --text-display-lg: 57px;
          --leading-display-lg: 63;
          --tracking-display-lg: -0.4px;
          --text-hero: 68px;
          --leading-hero: 68;
          --tracking-hero: -0.48px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-232: 232px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 60px;
          --card-padding: 24px;
          --element-gap: 11-19px;
        
          /* Border Radius */
          --radius-sm: 2.85px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 21.945px;
          --radius-3xl: 28.5px;
          --radius-3xl-2: 34.2px;
          --radius-3xl-3: 37.3065px;
          --radius-3xl-4: 39.9px;
          --radius-full: 152.19px;
        
          /* Named Radii */
          --radius-tags: 28.5px;
          --radius-cards: 2.85px;
          --radius-inputs: 6px;
          --radius-buttons: 28.5px;
          --radius-navbuttons: 22px;
          --radius-herobuttons: 34.2px;
        
          /* Surfaces */
          --surface-slate-gray-hero-canvas: #788086;
          --surface-sunbeam-yellow-band: #ffc500;
          --surface-paper-white-card: #ffffff;
          --surface-sand-callout: #e9e4d9;
          --surface-fog-alternate: #efefef;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-sunbeam-yellow: #ffc500;
          --color-electric-violet: #7700ff;
          --color-carbon: #312f27;
          --color-paper-white: #ffffff;
          --color-slate-gray: #788086;
          --color-fog: #efefef;
          --color-sand: #e9e4d9;
          --color-ash: #b1afa7;
        
          /* Typography */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 19px;
          --leading-caption: 25;
          --tracking-caption: -0.13px;
          --text-body-sm: 21px;
          --leading-body-sm: 27;
          --tracking-body-sm: -0.15px;
          --text-subheading: 24px;
          --leading-subheading: 29;
          --tracking-subheading: -0.17px;
          --text-heading-sm: 29px;
          --leading-heading-sm: 35;
          --tracking-heading-sm: -0.2px;
          --text-heading: 34px;
          --leading-heading: 41;
          --tracking-heading: -0.24px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 44;
          --tracking-heading-lg: -0.28px;
          --text-display: 51px;
          --leading-display: 56;
          --tracking-display: -0.36px;
          --text-display-lg: 57px;
          --leading-display-lg: 63;
          --tracking-display-lg: -0.4px;
          --text-hero: 68px;
          --leading-hero: 68;
          --tracking-hero: -0.48px;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-232: 232px;
        
          /* Border Radius */
          --radius-sm: 2.85px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 21.945px;
          --radius-3xl: 28.5px;
          --radius-3xl-2: 34.2px;
          --radius-3xl-3: 37.3065px;
          --radius-3xl-4: 39.9px;
          --radius-full: 152.19px;
        }