playful___style_reference:
  info: "> sunlit paper notebook with a hot-pink highlighter. A friendly, editorial product surface printed on warm cream stock, where one vivid magenta accent punctuates an otherwise monochrome warm-gray world."

  theme: "light"

  info: "Playful reads like a warm, hand-crafted workshop printed on cream paper. The entire surface sits on a sandy oat canvas (#f6f2ee) rather than clinical white, giving every screen a paper-like, approachable warmth. A single hot-pink (#ff2e95) does all the chromatic work — CTAs, links, logo mark — against a near-black ink (#111/#000), so screens stay visually quiet until a moment of action is needed. The display type is unapologetically heavy and italic at 70–79px, leaning into editorial poster energy rather than SaaS neutrality. Components are large and soft: 44px cards on pill-shaped buttons, deep diffused shadows, generous breathing room. The overall rhythm is one bold typographic statement per section, surrounded by quiet warm whitespace."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Hot Magenta | `#ff2e95` | `--color-hot-magenta` | Primary CTA fill, logo mark, link color, accent strokes — the only chromatic voice in the system, used sparingly to signal action |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary heading text, button text, heavy borders, navigation bar background |"
    info: "| Oat Canvas | `#f6f2ee` | `--color-oat-canvas` | Page background, large surface fills — the warm cream that replaces cold white throughout |"
    info: "| Soft Ink | `#111111` | `--color-soft-ink` | Body text and headings on light surfaces, card surface background for dark elements |"
    info: "| Slate | `#0f172a` | `--color-slate` | Secondary text, subtle body copy — a cool near-black used for non-headline text |"
    info: "| Charcoal | `#414040` | `--color-charcoal` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Stone | `#848383` | `--color-stone` | Icon strokes, muted helper text, subtle UI dividers |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, elevated panels, contrast surface against oat canvas |"
    info: "| Warm Mist | `#e8e5e0` | `--color-warm-mist` | Hairline borders, dividers, subtle container outlines — warm-toned to match canvas |"
    info: "| Sand | `#e2dcd6` | `--color-sand` | Secondary borders, decorative outlines on warm surfaces |"
    info: "| Driftwood | `#c3c1bf` | `--color-driftwood` | Card shadow base tone, muted surface fills |"
    info: "| Midnight | `#202126` | `--color-midnight` | Deep heading text variant, near-black with subtle cool cast for high-weight headlines |"

  tokens___typography:

    inter___primary_typeface_for_everything__display_headlines_use_700_900_italic_at_70_79px_for_editorial_poster_energy__subheads_at_26_30px_600_700__body_16_18px_400__captions_14px_500__the_heavy_italic_display_is_the_signature___most_product_sites_default_to_upright__playful_leans_into_the_slope_for_personality_____font_inter:
      - "**Substitute:** DM Sans, Manrope"
      - "**Weights:** 400, 500, 600, 700, 900"
      - "**Sizes:** 14px, 16px, 18px, 26px, 30px, 70px, 79px"
      - "**Line height:** 1.15 (display), 1.20 (headings), 1.33–1.40 (subheads), 1.50–1.70 (body)"
      - "**Letter spacing:** -0.002em across all sizes (barely perceptible tightening)"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Role:** Primary typeface for everything. Display headlines use 700/900 italic at 70–79px for editorial poster energy; subheads at 26–30px 600/700; body 16–18px 400; captions 14px 500. The heavy italic display is the signature — most product sites default to upright, Playful leans into the slope for personality."

    arial___system_fallback_used_in_some_button_and_input_contexts__inter_should_be_preferred__arial_only_appears_as_a_degradation_layer_____font_arial:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 13px, 15px, 16px, 20px"
      - "**Line height:** 1.20–1.40"
      - "**Letter spacing:** normal"
      - "**Role:** System fallback used in some button and input contexts. Inter should be preferred; Arial only appears as a degradation layer."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.4 | -0.026px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.032px | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | -0.036px | `--text-body-lg` |"
      info: "| subheading | 26px | 1.23 | -0.052px | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.2 | -0.06px | `--text-heading-sm` |"
      info: "| display | 79px | 1 | -0.158px | `--text-display` |"

  tokens___spacing___shapes:

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 999px |"
      info: "| cards | 44px |"
      info: "| images | 16px |"
      info: "| inputs | 99px |"
      info: "| buttons | 99px (pill) |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08...` | `--shadow-xl` |"

    layout:

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

  components:

    pill_cta_button_primary:
      role: "Filled action button for the single most important action on a screen"

      info: "Hot Magenta (#ff2e95) fill, white text, Inter 600 at 16px, 99px border-radius, 14px 24px padding. Heavy and confident — the only chromatic element competing with the display type."

    email_input_field:
      role: "Capture user email for waitlist signup"

      info: "Oat Canvas (#f6f2ee) fill, 1px Charcoal (#414040) border, 99px border-radius, white card container wraps input + button as a unified pill. Placeholder Inter 400 16px in muted gray. Paired visually with the Pill CTA to form a single inline composite."

    editorial_display_headline:
      role: "Hero section statement"

      info: "Inter 700 or 900 italic, 70–79px, line-height 1.00, letter-spacing -0.002em, color Ink Black (#000) or Soft Ink (#111). Set in one or two lines, centered. This is the signature element — heavy italic at scale creates a poster-like moment rather than a SaaS tagline."

    app_tile_card:
      role: "Showcase mini-app examples in a row"

      info: "44px border-radius, Paper White (#ffffff) surface, deep diffused shadow (0 32px 80px rgba(0,0,0,0.22)). Contains a full-bleed illustration or icon. Sized roughly 140–180px square, displayed in a slightly tilted overlapping row to suggest a hand of cards."

    faq_accordion_card:
      role: "Expandable question/answer in the FAQ section"

      info: "Paper White (#ffffff) surface, 44px border-radius, warm border or none, soft shadow stack (0 32px 80px / 0 2px 8px rgba(0,0,0,0.22/0.08)). Question text Inter 600 italic 16–18px, chevron icon in Stone (#848383). Stacked vertically with 12–16px gap between cards."

    category_navigation_bar:
      role: "Horizontal category scroller (Birthdays, Creativity, etc.)"

      info: "Ink Black (#000) background, white text Inter 500 14–16px, horizontal scroll, items separated by 24–32px spacing. No visible border or background change on the bar itself — it reads as a dark band cutting across the page."

    logo_wordmark:
      role: "Brand identity in header and footer"

      info: "Hot Magenta (#ff2e95) stylized 'playful' wordmark in Inter 700 italic, paired with a small geometric icon (rounded square mark). Functions as both brand and link, so the magenta is doing double duty as identity and navigation."

    app_icon:
      role: "Brand mark in footer / final CTA section"

      info: "Rounded square (16–20px radius) dark container with Hot Magenta (#ff2e95) pictogram inside. Appears as a standalone mark above the final headline, echoing the logo's icon component."

    gradient_highlight_section:
      role: "Mid-page atmospheric band"

      info: "Large soft radial or linear gradient from Hot Magenta (#ff2e95) through lavender-pink to Oat Canvas (#f6f2ee). No defined edges — bleeds into surrounding sections. Hosts a single italic headline at 30px with mixed weight ('Describe it. It's yours in minutes.')."

    hero_subtext:
      role: "Supporting paragraph beneath the display headline"

      info: "Inter 400 16–18px, Slate (#0f172a), centered, max-width ~560px. Quiet by design — lets the headline own the visual weight."

    two_column_faq_section_layout:
      role: "Question list arrangement"

      left_column: "small 'Got questions?' label in Inter 500 + bold heading 'Things people want to know'. Right column: stacked FAQ accordion cards. 1200px max-width container, 64–80px section gap above and below."

  do_s_and_don_ts:

    do:
      - "Use Hot Magenta (#ff2e95) only for the primary CTA, the logo, and link accents — never as a large surface fill, icon background, or decorative wash longer than a section"
      - "Set display headlines in Inter 700/900 italic at 70–79px, line-height 1.00, letter-spacing -0.002em — the italic at scale is the brand's typographic signature"
      - "Build cards and tiles with 44px border-radius and the dual-layer shadow stack (0 32px 80px rgba(0,0,0,0.22) + 0 2px 8px rgba(0,0,0,0.08))"
      - "Use Oat Canvas (#f6f2ee) as the base page background — do not switch to pure white for full-page surfaces"
      - "Pair every email input with the Pill CTA inside a single white pill container (99px radius) to read as one composite unit"
      - "Center hero compositions — headline, subtext, and CTA stack vertically with generous 113px section gaps between major bands"
      - "Keep icons stroke-based in Stone (#848383) at 1.5–2px weight, never filled with color"

    don_t:
      - "Do not use upright (non-italic) weight 700+ for display headlines — the italic slope is what makes Playful feel editorial rather than corporate"
      - "Do not introduce additional accent colors — blue, green, orange, purple are all out of system; Hot Magenta is the only chromatic voice"
      - "Do not use pure black (#000000) on pure white (#ffffff) for body text without checking — use #111 or #0f172a for less harshness on the warm canvas"
      - "Do not apply sharp 0–4px radii to cards or buttons — the 16/44/99px scale is part of the friendly softness"
      - "Do not stack more than two type weights on a single screen — typically 400 body + 700/900 italic display, with 500/600 for subheads"
      - "Do not place white cards directly on white — always sit Paper White on Oat Canvas so cards read as elevated"
      - "Do not use drop shadows on text, buttons, or icons — shadows are reserved for card-level elevation only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Oat Canvas | `#f6f2ee` | Base page background — the warm cream that sets the entire system apart from cold-white SaaS |"
    info: "| 1 | Paper White | `#ffffff` | Card and elevated panel surface sitting on the oat canvas |"
    info: "| 2 | Soft Ink | `#111111` | Dark card variant and navigation bar background |"
    info: "| 3 | Hot Magenta | `#ff2e95` | Accent surface — CTA fills, highlight wash zones |"

  elevation:

    - "**FAQ card / app tile:** `rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px`"

  imagery:

    info: "Visual language is illustration-led, not photographic. The site shows stylized 3D app icons and playful character mascots (broccoli with face, pink blob, blue ghost, white creature) rendered in soft 3D with rounded, candy-like surfaces and saturated color. Illustrations sit inside rounded square app tiles (44px radius) that are slightly tilted and overlapping in a fan arrangement, evoking a hand of cards rather than a rigid grid. No photography appears anywhere — the warmth comes from the cream canvas and the 3D illustration style, not from lifestyle imagery. Icons in the UI itself are minimal line icons in muted gray, not colorful."

  layout:

    info: "Centered, max-width 1200px container with generous 113px section gaps between major vertical bands. The page rhythm alternates between quiet warm-cream sections (hero, FAQ) and a single vivid pink gradient wash section in the middle. Hero is a centered stack: display headline → subtext → email+CTA pill composite → tilted row of app tiles. Below the gradient band, the FAQ section uses a two-column layout (label left, accordion stack right) before returning to a centered final CTA. A full-width black category navigation bar cuts across the page at the transition between hero and gradient sections, providing the only dark band. The overall density is spacious — single elements breathe rather than packing into grids."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #111111"
    - "background: #f6f2ee"
    - "border: #e8e5e0"
    - "accent: #ff2e95"
    - "primary action: #ff2e95 (filled action)"

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

    - "Create an FAQ card: #ffffff surface, 44px border-radius, shadow 0 32px 80px rgba(0,0,0,0.22) + 0 2px 8px rgba(0,0,0,0.08). Question text Inter 600 italic 18px #111111, chevron icon in #848383."

    - "Create an app tile: 160px square, 44px border-radius, #ffffff surface, same shadow stack as FAQ card. Contains a centered 3D-style illustration in saturated color."

    - "Create a gradient highlight section: full-width background blending from #ff2e95 through lavender to #f6f2ee (radial or large soft linear). Headline at 30px Inter italic 600, #111111, centered — mix regular and italic weight words for emphasis."

    - "Create a category nav bar: #000000 background, full width, Inter 500 14px white text, items spaced 28px apart horizontally, 12px 0 vertical padding."

  shadow_language:

    info: "The system uses exactly one shadow stack, applied to cards and tiles only. It is a two-layer diffused shadow: a large soft 80px-blur shadow at 22% opacity providing the deep 'lift' off the warm canvas, plus a tight 8px-blur shadow at 8% opacity providing the contact-edge definition. Buttons, text, icons, and inputs receive no shadows. This restraint — shadow as elevation marker, not decoration — keeps the interface feeling like printed paper lifted off a desk rather than a glassmorphic product."

  similar_brands:

    - "**Linear** — Same editorial confidence in display typography (large heavy weight, tight letter-spacing) and a single vivid accent against a monochrome system — though Linear's palette is dark, Playful's italic display shares the same poster-like typographic attitude"
    - "**Notion** — Warm off-white canvas (#f6f2ee echoes Notion's slight cream tint) with generous spacing and a minimalist component vocabulary — the friendliness of the surface treatment is the shared trait"
    - "**Pitch** — Same large italic display headlines, cream/warm canvas, and pill-shaped primary CTA, with a single chromatic accent for action — Pitch's editorial product design language is the closest aesthetic cousin"
    - "**Framer** — Bold typographic statements over warm neutral surfaces, with one bold accent color (Framer's blue, Playful's magenta) — both treat the hero as an editorial moment rather than a feature checklist"
    - "**Vercel** — Generous whitespace, soft elevated cards, and the discipline of one accent color doing all chromatic work — though Vercel is dark-mode, the spatial generosity and single-accent philosophy is structurally similar"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-hot-magenta: #ff2e95;
          --color-ink-black: #000000;
          --color-oat-canvas: #f6f2ee;
          --color-soft-ink: #111111;
          --color-slate: #0f172a;
          --color-charcoal: #414040;
          --color-stone: #848383;
          --color-paper-white: #ffffff;
          --color-warm-mist: #e8e5e0;
          --color-sand: #e2dcd6;
          --color-driftwood: #c3c1bf;
          --color-midnight: #202126;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', 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: 13px;
          --leading-caption: 1.4;
          --tracking-caption: -0.026px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.032px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.036px;
          --text-subheading: 26px;
          --leading-subheading: 1.23;
          --tracking-subheading: -0.052px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.06px;
          --text-display: 79px;
          --leading-display: 1;
          --tracking-display: -0.158px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-60: 60px;
          --spacing-180: 180px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 113px;
          --card-padding: 24px;
          --element-gap: 10-16px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 44px;
          --radius-full: 99px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-tags: 999px;
          --radius-cards: 44px;
          --radius-images: 16px;
          --radius-inputs: 99px;
          --radius-buttons: 99px (pill);
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px;
        
          /* Surfaces */
          --surface-oat-canvas: #f6f2ee;
          --surface-paper-white: #ffffff;
          --surface-soft-ink: #111111;
          --surface-hot-magenta: #ff2e95;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-hot-magenta: #ff2e95;
          --color-ink-black: #000000;
          --color-oat-canvas: #f6f2ee;
          --color-soft-ink: #111111;
          --color-slate: #0f172a;
          --color-charcoal: #414040;
          --color-stone: #848383;
          --color-paper-white: #ffffff;
          --color-warm-mist: #e8e5e0;
          --color-sand: #e2dcd6;
          --color-driftwood: #c3c1bf;
          --color-midnight: #202126;
        
          /* Typography */
          --font-inter: 'Inter', 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: 13px;
          --leading-caption: 1.4;
          --tracking-caption: -0.026px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.032px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.036px;
          --text-subheading: 26px;
          --leading-subheading: 1.23;
          --tracking-subheading: -0.052px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.06px;
          --text-display: 79px;
          --leading-display: 1;
          --tracking-display: -0.158px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-60: 60px;
          --spacing-180: 180px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 44px;
          --radius-full: 99px;
          --radius-full-2: 999px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px;
        }