flying_papers___style_reference:
  info: "> Saturday morning cartoon confessional"

  theme: "light"

  info: "Flying Papers operates like a Saturday-morning cartoon printed on thick riso cardstock: a flat muted-violet stage, a small cast of saturated confetti colors, and type so oversized it eats the viewport. The brand voice is loud, cheeky, and unrepentant — it doesn't ask for attention, it takes it. Every screen should feel like a single bold poster: one dominant display headline, one supporting character illustration, one inline action, and generous breathing room. Borders do the heavy lifting instead of shadows; color is used as paint, not data. Surfaces stay flat, edges stay sharp at 6px, and the only soft thing in the system is the 100px pill on the gate button."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Dusk Violet | `#8584bd` | `--color-dusk-violet` | Primary canvas and hero background — the stage that every other color performs on |"
    info: "| Hi-Vis Yellow | `#f4ed36` | `--color-hi-vis-yellow` | Yellow accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color |"
    info: "| Buttery Yellow | `#f9cc73` | `--color-buttery-yellow` | Secondary display text and softer borders — a mellower sibling of Hi-Vis for when Hi-Vis would be too much |"
    info: "| Lilac Shadow | `#61609a` | `--color-lilac-shadow` | Card and block backgrounds — a deeper violet for nested surfaces on the violet stage |"
    info: "| Bubblegum Pink | `#f8c1ba` | `--color-bubblegum-pink` | Decorative borders and confetti accent — a warm pink used sparingly for pop |"
    info: "| Matcha Cream | `#b5c995` | `--color-matcha-cream` | Decorative borders and confetti accent — a dusty sage for the secondary cast of cards |"
    info: "| Magenta Punch | `#ac4f98` | `--color-magenta-punch` | Accent card surface — reserved for standout blocks that need to scream louder than the stage |"
    info: "| Firecracker Red | `#c94245` | `--color-firecracker-red` | Red wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"
    info: "| Bone White | `#f9f5f2` | `--color-bone-white` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |"
    info: "| Ink Black | `#1a1a1a` | `--color-ink-black` | Body text, primary borders, and outlined button strokes — the near-black that does typographic work on cream surfaces |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Hard borders, icons, and text on yellow surfaces — pure black where maximum edge contrast is needed |"

  tokens___typography:

    obviouslyvariable___display_and_large_heading_family___the_only_font_loud_enough_for_the_system__sizes_scale_from_18px_body_uses_up_to_341px_poster_scale_display__tight_0_80_1_00_leading_makes_multi_line_headlines_stack_into_solid_color_blocks__calt_is_disabled_so_the_wide_geometric_forms_stay_unornamented__substitute__founders_grotesk_condensed__knockout__or_druk_wide_____font_obviouslyvariable:
      - "**Substitute:** Founders Grotesk Condensed"
      - "**Weights:** 800, 900"
      - "**Sizes:** 18, 20, 30, 100, 113, 130, 133, 149, 184, 241, 244, 341"
      - "**Line height:** 0.80–1.00"
      - "**Letter spacing:** 0.02em"
      - "**OpenType features:** `\"calt\" 0`"
      - "**Role:** Display and large heading family — the only font loud enough for the system. Sizes scale from 18px body uses up to 341px poster-scale display. Tight 0.80–1.00 leading makes multi-line headlines stack into solid color blocks; calt is disabled so the wide geometric forms stay unornamented. Substitute: Founders Grotesk Condensed, Knockout, or Druk Wide."

    degularvariable___ultra_small_ui_text___nav__footer_micro_copy__and_inline_labels_at_10px__the_neutral_workhorse_that_disappears_next_to_the_display_voice__substitute__inter__ibm_plex_sans_____font_degularvariable:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 10"
      - "**Line height:** 1.00"
      - "**Letter spacing:** normal"
      - "**Role:** Ultra-small UI text — nav, footer micro-copy, and inline labels at 10px. The neutral workhorse that disappears next to the display voice. Substitute: Inter, IBM Plex Sans."

    bergen_monoregular___monospaced_micro_type_for_nav__tags__and_small_data_labels___provides_a_typewriter_rhythm_against_the_rounded_display__the_0_80_leading_on_monospace_is_signature__mono_stacked_tight_feels_like_a_receipt__substitute__jetbrains_mono__ibm_plex_mono_____font_bergenmonoregular:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400, 600"
      - "**Sizes:** 12, 14"
      - "**Line height:** 0.80, 1.00"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"calt\" 0`"
      - "**Role:** Monospaced micro-type for nav, tags, and small data labels — provides a typewriter rhythm against the rounded display. The 0.80 leading on monospace is signature: mono stacked tight feels like a receipt. Substitute: JetBrains Mono, IBM Plex Mono."

    degulardisplay_bold___small_bold_body_text_for_ctas__button_labels__and_emphasized_micro_copy__the_0_05em_tracking_opens_the_letterforms_enough_to_read_at_16px_without_crowding__substitute__degular_bold__s_hne_bold_____font_degulardisplay_bold:
      - "**Substitute:** Söhne Bold"
      - "**Weights:** 700"
      - "**Sizes:** 16"
      - "**Line height:** 1.00"
      - "**Letter spacing:** 0.05em"
      - "**Role:** Small bold body text for CTAs, button labels, and emphasized micro-copy. The 0.05em tracking opens the letterforms enough to read at 16px without crowding. Substitute: Degular Bold, Söhne Bold."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1 | — | `--text-caption` |"
      info: "| body | 16px | 1 | 0.8px | `--text-body` |"
      info: "| body-lg | 18px | 0.9 | 0.36px | `--text-body-lg` |"
      info: "| subheading | 30px | 0.9 | 0.6px | `--text-subheading` |"
      info: "| heading-sm | 100px | 0.9 | 2px | `--text-heading-sm` |"
      info: "| heading | 149px | 0.85 | 2.98px | `--text-heading` |"
      info: "| heading-lg | 184px | 0.85 | 3.68px | `--text-heading-lg` |"
      info: "| display | 341px | 0.8 | 6.82px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

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

    layout:

      - "**Section gap:** 40px"
      - "**Card padding:** 17px"
      - "**Element gap:** 17px"

  components:

    gate_pill_button:
      role: "Primary age-gate / entry action"

      info: "The system's only primary action. Cream (#f9f5f2) fill, 100px border-radius, 17px horizontal padding, DegularDisplay-Bold 16px / 0.05em tracking in Pure Black (#000000). No drop shadow; the rounded pill shape and high contrast against the violet stage do all the work."

    outlined_display_button:
      role: "Secondary action placed on hero surfaces"

      info: "Transparent fill with a 2–3px Hi-Vis Yellow (#f4ed36) border. Hi-Vis Yellow text, DegularDisplay-Bold 16px, 17px horizontal padding, 100px radius. The border does the job of a fill — this is a chromatic outlined action, not a filled CTA."

    underline_text_link:
      role: "Tertiary action (e.g. age-decline link)"

      info: "Bone White (#f9f5f2) on the violet stage, no background, 1px underline. Bergen Mono 12px / 0.80 leading. Letter-spaced wide enough to feel like a disclaimer, not a button."

    hero_display_headline:
      role: "Main page statement"

      info: "ObviouslyVariable 800–900 at 184–341px, line-height 0.80–0.85, tracking 0.02em. Color alternates between Hi-Vis Yellow (#f4ed36) and Buttery Yellow (#f9cc73). Sized to fill 60–80% of viewport height. No max-width — type bleeds to the canvas edges."

    brand_wordmark:
      role: "Site identification in nav"

      info: "ObviouslyVariable 800 in Hi-Vis Yellow, 30px, centered above the hero. Acts as a single-line logo — the brand name IS the mark, no separate logotype."

    mascot_illustration:
      role: "Character that accompanies the headline"

      info: "Cartoon character with thick black outlines, cream fill, and flat color accents (Bone White, Hi-Vis Yellow). Renders behind or peeks through the display headline at viewport scale. No gradients, no shading — flat 2–3 color fills only."

    confetti_card:
      role: "Decorative content blocks scattered across the page"

      info: "Square or rectangular cards in one of the accent surface colors (Matcha Cream #b5c995, Bubblegum Pink #f8c1ba, Magenta Punch #ac4f98, Firecracker Red #c94245). 6px radius, 17px padding, no shadow, no border. Each card is a flat paint swatch — the color IS the content."

    dark_text_card:
      role: "Text-heavy or information blocks"

      info: "Bone White (#f9f5f2) fill, 6px radius, 17px padding, Ink Black (#1a1a1a) text. 1px Ink Black border optional. Uses DegularVariable or bergen_mono for body."

    color_swatch_card:
      role: "Brand palette showcase"

      info: "Solid fill in one of the brand or accent colors, 6px radius, 17px padding, with the color name and hex set in DegularDisplay-Bold 16px. Acts as both decoration and legend."

    top_nav_bar:
      role: "Minimal site navigation"

      info: "Transparent on the violet stage. Brand wordmark centered, no menu items visible at the hero. 17px padding top/bottom, 1px bottom border in Dusk Violet (#8584bd) or transparent."

    mono_label_tag:
      role: "Category, date, or metadata tag"

      info: "Bergen Mono 12px / 0.80 leading, no fill, optional 1px border in current text color. Letter-spaced 0.05em. Reads as a stamped label rather than a pill button."

    footer_block:
      role: "End-of-page content"

      info: "Solid block — often a brand or accent color (e.g. #375027 dark green observed). Bergen Mono 12px, Bone White text, 17–25px padding. No decorative borders."

  do_s_and_don_ts:

    do:
      - "Set hero display type between 184px and 341px in ObviouslyVariable 800–900, line-height 0.80–0.85, tracking 0.02em"
      - "Use Hi-Vis Yellow (#f4ed36) as the only outlined action border; pair it with the Outlined Display Button pattern, never a filled button"
      - "Stack one huge headline, one mascot illustration, and one inline action per screen — let the rest breathe"
      - "Keep radii at exactly 6px for cards and 100px for buttons/tags — the contrast between sharp blocks and soft pills is the signature"
      - "Place cards on the violet stage with 17px padding and no shadows; let the flat color fills do the visual work"
      - "Use the accent palette (Bubblegum Pink, Matcha Cream, Magenta Punch, Firecracker Red) one card at a time, never side by side in the same row"
      - "Set micro-copy in Bergen Mono at 12px with 0.80 leading — the tight mono stack is the receipts-on-cardstock texture"

    don_t:
      - "Don't introduce a filled CTA button — the system uses outlined Hi-Vis Yellow actions and pill cream buttons only"
      - "Don't use ObviouslyVariable below 18px or above 341px — outside that range it loses its poster impact"
      - "Don't add drop shadows, glow effects, or inner shadows — every surface is flat paint"
      - "Don't combine more than two accent colors in a single composition — confetti is scattered, not confetti-confetti"
      - "Don't soften the violet canvas with a white or cream page background — Dusk Violet (#8584bd) is the stage, not a section accent"
      - "Don't round card corners past 6px — anything softer makes the system feel SaaS, not riso"
      - "Don't use ObviouslyVariable's contextual alternates — calt is disabled everywhere to keep the wide geometric forms unornamented"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Dusk Violet Stage | `#8584bd` | Full-bleed page canvas and hero background |"
    info: "| 1 | Bone White Card | `#f9f5f2` | Light card and button surface on the violet stage |"
    info: "| 2 | Lilac Shadow Block | `#61609a` | Nested surface for content blocks sitting on the violet stage |"
    info: "| 3 | Hi-Vis Yellow Surface | `#f4ed36` | Accent surface for the most important element on a given screen |"
    info: "| 4 | Accent Paint Card | `#f8c1ba` | Decorative confetti card surface (alternates: #b5c995, #ac4f98, #c94245) |"

  elevation:

    info: "Elevation is intentionally absent. The system is flat risograph: depth comes from color contrast and stacking order, never from shadows. A 6px card on the violet stage reads as a printed swatch, not a floating panel."

  imagery:

    info: "Illustration-only — no photography, no 3D renders, no abstract gradients. The visual language is hand-drawn cartoon with thick black outlines (2–3px), flat 2–3 color fills, and no shading. Characters are mascots that interact with the type (peeking, leaning, standing on a letter). Icons are line-drawn in Pure Black or Bone White, 1.5–2px stroke. Imagery is decorative atmosphere first, never explanatory — the type carries the message, the character carries the mood."

  layout:

    info: "Full-bleed poster layouts with no max-width constraint. Each screen is a single viewport-sized composition: one massive ObviouslyVariable headline centered or left-aligned, one mascot illustration overlapping the type, and a small inline action below. Sections do not alternate light and dark — the entire page sits on the Dusk Violet canvas with flat color cards dropped on top. Navigation is a single centered wordmark, no menu bar. Card grids are loose 2–3 column arrangements with generous 40px gaps; cards are sized by content, not uniform. Density is extreme: one idea per screen, surrounded by violet breathing room."

  agent_prompt_guide:

    quick_color_reference:
    - "text on light: #1a1a1a"
    - "text on yellow: #000000"
    - "reverse text on violet: #f9f5f2"
    - "background: #8584bd (Dusk Violet)"
    - "card surface: #f9f5f2 (Bone White)"
    - "accent: #f4ed36 (Hi-Vis Yellow) for the single most important element"
    - "primary action: #f4ed36 (outlined action border)"

    3_example_component_prompts:

    - "**Hero screen with mascot**: Full-bleed Dusk Violet (#8584bd) background. Centered brand wordmark 'Flying Papers' in ObviouslyVariable 800 at 30px, #f4ed36, top of viewport. Main headline at 244px ObviouslyVariable 900, line-height 0.82, letter-spacing 0.02em, fill #f4ed36 (alternating with #f9cc73 per word). A cartoon mascot illustration with 2px black outlines and flat fills, positioned to peek through the type near the vertical center. Below the headline, an Outlined Display Button: transparent fill, 2px #f4ed36 border, 100px radius, 17px horizontal padding, 'I'M OVER 18, LET ME IN' in DegularDisplay-Bold 16px, #f4ed36. Underneath, an Underline Text Link in #f9f5f2, Bergen Mono 12px, 0.80 leading, 1px underline."

    - "**Confetti card grid section**: Dusk Violet (#8584bd) background continuing from hero. A loose 3-column grid of Confetti Cards with 40px gaps. Each card: solid fill in one of #f8c1ba, #b5c995, #ac4f98, or #c94245; 6px radius; 17px padding; no border, no shadow. Inside each card, a Mono Label Tag in Bergen Mono 12px / 0.80 leading, 0.05em tracking, in #1a1a1a or #f9f5f2 depending on card brightness, and a short body line in DegularVariable 16px."

    - "**Color swatch legend block**: Bone White (#f9f5f2) card, 6px radius, 17px padding, sitting on the violet stage. Heading 'PALETTE' in DegularDisplay-Bold 16px, 0.05em tracking, #1a1a1a. Below it, a 2-row grid of Color Swatch Cards — each a 6px-radius square filled with one brand or accent color, with the hex value set in Bergen Mono 12px / 0.80 leading directly on the swatch in contrasting text."

  similar_brands:

    - "**Bumble** — Same fearless use of a single saturated yellow against a flat colored stage, with oversized rounded display type and pill-shaped actions"
    - "**Skittles / candy brand microsites** — Confetti-bright accent palette scattered across a dominant canvas color, cartoon character mascots, and poster-scale headline type"
    - "**Kakao Entertainment** — Heavy condensed display type at viewport scale, flat colored surfaces, and characters that break through the type"
    - "**Dazed Magazine** — Riso-print aesthetic with loud display headlines, tight leading, and a limited but confident chromatic palette on a single stage color"
    - "**Telfar** — Anti-corporate flat colored backgrounds, oversized custom display type, and pill buttons with bold black-on-cream contrast"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-dusk-violet: #8584bd;
          --color-hi-vis-yellow: #f4ed36;
          --color-buttery-yellow: #f9cc73;
          --color-lilac-shadow: #61609a;
          --color-bubblegum-pink: #f8c1ba;
          --color-matcha-cream: #b5c995;
          --color-magenta-punch: #ac4f98;
          --color-firecracker-red: #c94245;
          --color-bone-white: #f9f5f2;
          --color-ink-black: #1a1a1a;
          --color-pure-black: #000000;
        
          /* Typography — Font Families */
          --font-obviouslyvariable: 'ObviouslyVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-degularvariable: 'DegularVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bergenmonoregular: 'bergen_monoregular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-degulardisplay-bold: 'DegularDisplay-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --text-body: 16px;
          --leading-body: 1;
          --tracking-body: 0.8px;
          --text-body-lg: 18px;
          --leading-body-lg: 0.9;
          --tracking-body-lg: 0.36px;
          --text-subheading: 30px;
          --leading-subheading: 0.9;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 100px;
          --leading-heading-sm: 0.9;
          --tracking-heading-sm: 2px;
          --text-heading: 149px;
          --leading-heading: 0.85;
          --tracking-heading: 2.98px;
          --text-heading-lg: 184px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: 3.68px;
          --text-display: 341px;
          --leading-display: 0.8;
          --tracking-display: 6.82px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-160: 160px;
        
          /* Layout */
          --section-gap: 40px;
          --card-padding: 17px;
          --element-gap: 17px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-tags: 100px;
          --radius-cards: 6px;
          --radius-buttons: 100px;
        
          /* Surfaces */
          --surface-dusk-violet-stage: #8584bd;
          --surface-bone-white-card: #f9f5f2;
          --surface-lilac-shadow-block: #61609a;
          --surface-hi-vis-yellow-surface: #f4ed36;
          --surface-accent-paint-card: #f8c1ba;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-dusk-violet: #8584bd;
          --color-hi-vis-yellow: #f4ed36;
          --color-buttery-yellow: #f9cc73;
          --color-lilac-shadow: #61609a;
          --color-bubblegum-pink: #f8c1ba;
          --color-matcha-cream: #b5c995;
          --color-magenta-punch: #ac4f98;
          --color-firecracker-red: #c94245;
          --color-bone-white: #f9f5f2;
          --color-ink-black: #1a1a1a;
          --color-pure-black: #000000;
        
          /* Typography */
          --font-obviouslyvariable: 'ObviouslyVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-degularvariable: 'DegularVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bergenmonoregular: 'bergen_monoregular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-degulardisplay-bold: 'DegularDisplay-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --text-body: 16px;
          --leading-body: 1;
          --tracking-body: 0.8px;
          --text-body-lg: 18px;
          --leading-body-lg: 0.9;
          --tracking-body-lg: 0.36px;
          --text-subheading: 30px;
          --leading-subheading: 0.9;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 100px;
          --leading-heading-sm: 0.9;
          --tracking-heading-sm: 2px;
          --text-heading: 149px;
          --leading-heading: 0.85;
          --tracking-heading: 2.98px;
          --text-heading-lg: 184px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: 3.68px;
          --text-display: 341px;
          --leading-display: 0.8;
          --tracking-display: 6.82px;
        
          /* Spacing */
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 100px;
        }