fiasco___style_reference:
  info: "> \"editorial gallery on cream paper\" — warm off-white canvas with confident black type and single-color project cards."

  theme: "light"

  info: "Fiasco operates in an editorial, gallery-like register: a warm off-white canvas (#f8f9f3) with near-black text (#1d1e19) creates a hushed paper feel, while every project card introduces a single vivid color field that acts as wayfinding rather than decoration. The type system pairs a geometric sans (area-normal) for body and interface with a more characterful display family (Gooper) for headlines, giving the page an italic, magazine-like confidence. Components are deliberately unembellished — pill-shaped buttons (800px radius), 8px-cornered cards, 3px input fields, and a 40px radius reserved for hero and feature surfaces. Color appears as sparse, deliberate punctuation: yellow, pink, blue, orange, green blocks behind work, while the rest of the system stays in warm neutrals so the colored surfaces read as the loudest thing in the room."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Canvas Cream | `#f8f9f3` | `--color-canvas-cream` | Page background, button borders, soft surface |"
    info: "| Ink Black | `#1d1e19` | `--color-ink-black` | Primary text, nav borders, link borders, all structural outlines |"
    info: "| Stone Mist | `#e9eae2` | `--color-stone-mist` | Nav borders, icon strokes, subtle dividers, secondary borders |"
    info: "| Shadow Stone | `#d0d1cc` | `--color-shadow-stone` | Card and hero box-shadow base, low-contrast elevation |"
    info: "| Carbon | `#151612` | `--color-carbon` | Footer background, deep surface for dark sections |"
    info: "| Pewter | `#686e77` | `--color-pewter` | Input border, muted form fields |"
    info: "| Sulfur Yellow | `#fff714` | `--color-sulfur-yellow` | Featured project card fill, callout blocks — the loudest accent, reserved for hero-grade emphasis |"
    info: "| Carnation Pink | `#fbc2d1` | `--color-carnation-pink` | Project card background, soft accent block |"
    info: "| Sky Blue | `#84bdff` | `--color-sky-blue` | Project card background, cool accent block |"
    info: "| Ember Orange | `#fd6b01` | `--color-ember-orange` | Project card background, warm accent block |"
    info: "| Cobalt Violet | `#204ce5` | `--color-cobalt-violet` | Filled button background — the only chromatic action in the system, used sparingly |"
    info: "| Midnight | `#112337` | `--color-midnight` | Input text, deep navy utility for form labels |"
    info: "| Lichen Green | `#03ac47` | `--color-lichen-green` | Project card background, rare accent block |"

  tokens___typography:

    area_normal___primary_workhorse___body__ui_labels__buttons__inputs__project_titles__wide_weight_range_lets_it_carry_both_fine_14px_body_copy_and_80px_display_headlines_without_leaving_the_family_____font_area_normal:
      - "**Substitute:** Inter, GT America, Söhne"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12, 13, 14, 18, 20, 30, 60, 80"
      - "**Line height:** 1.0–1.6"
      - "**Letter spacing:** -0.005em to -0.029em (tighter as size grows)"
      - "**Role:** Primary workhorse — body, UI labels, buttons, inputs, project titles. Wide weight range lets it carry both fine 14px body copy and 80px display headlines without leaving the family."

    hal_timezone___nav_labels__small_caps_treatments__secondary_headings__the_100_weight_gives_nav_items_a_thin__almost_editorial_feel_that_contrasts_with_the_bolder_body_sans_____font_hal_timezone:
      - "**Substitute:** Söhne Breit, ABC Diatype Mono, GT America Mono"
      - "**Weights:** 100, 400, 500"
      - "**Sizes:** 12, 20, 22, 34"
      - "**Line height:** 1.2–1.5"
      - "**Letter spacing:** -0.012em to -0.033em"
      - "**Role:** Nav labels, small caps treatments, secondary headings. The 100-weight gives nav items a thin, almost editorial feel that contrasts with the bolder body sans."

    gooper___display_and_editorial_headlines_with_personality___used_for_large_pull_quotes__italic_feeling_treatments__and_section_titles__the_tight_0_8_line_height_at_40px_gives_headlines_a_compressed__magazine_like_density_____font_gooper:
      - "**Substitute:** Migra, Editorial New, GT Sectra Display"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 16, 17, 19, 40"
      - "**Line height:** 0.8–1.3"
      - "**Letter spacing:** -0.01em to -0.025em"
      - "**Role:** Display and editorial headlines with personality — used for large pull-quotes, italic-feeling treatments, and section titles. The tight 0.8 line-height at 40px gives headlines a compressed, magazine-like density."

    oc_highway___micro_labels_and_tracked_out_uppercase_tags_e_g___01_27_uk__timestamp__the__0_10em_tracking_makes_10px_text_readable_as_a_label_____font_oc_highway:
      - "**Substitute:** JetBrains Mono, ABC Diatype Mono"
      - "**Weights:** 400"
      - "**Sizes:** 10"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.10em"
      - "**Role:** Micro-labels and tracked-out uppercase tags (e.g. '01:27 UK' timestamp). The +0.10em tracking makes 10px text readable as a label."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 14.4 | -0.15px | `--text-caption` |"
      info: "| body-sm | 14px | 20 | -0.07px | `--text-body-sm` |"
      info: "| body | 18px | 25.2 | -0.23px | `--text-body` |"
      info: "| subheading | 20px | 28 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 30px | 36 | -0.9px | `--text-heading-sm` |"
      info: "| heading | 40px | 32 | -1px | `--text-heading` |"
      info: "| heading-lg | 60px | 66 | -1.74px | `--text-heading-lg` |"
      info: "| display | 80px | 88 | -2.32px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| hero | 40px |"
      info: "| cards | 8px |"
      info: "| links | 44px |"
      info: "| inputs | 3px |"
      info: "| buttons | 800px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(18, 25, 97, 0.08) 0px 1px 4px 0px` | `--shadow-sm` |"
      info: "| xl | `rgba(0, 0, 0, 0.16) 0px 28px 80px 0px` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 22px"
      - "**Element gap:** 12px"

  components:

    pill_button_primary:
      role: "Primary CTA"

      info: "Fully rounded (800px radius), 12px 20px padding, area-normal 500 at 14px, text in Canvas Cream (#f8f9f3) on Cobalt Violet (#204ce5) fill. Carries the faint blue-tinted shadow rgba(18,25,97,0.08) 0 1px 4px. Used extremely rarely — the system prefers ghost/underline actions over filled buttons."

    ghost_pill_button:
      role: "Secondary action"

      info: "800px radius, 12px 20px padding, area-normal 500 at 14px, Ink Black (#1d1e19) text with a 1px Ink Black border. No fill, no shadow. The default button form for most interactive elements."

    project_card:
      role: "Work/case study tile"

      info: "8px radius, 22px padding on all sides, vivid solid-color background (Sulfur Yellow, Carnation Pink, Sky Blue, Ember Orange, Lichen Green, or Canvas Cream). 0.16-alpha black shadow 0 28px 80px lifts it off the canvas. Contains a project image, italic title, description, and tag pills."

    hero_block:
      role: "Above-the-fold showcase"

      info: "40px radius, full-bleed within the 1200px max-width, receives the heavy 0 28px 80px shadow. Used for the opening video/visual block beneath the hero headline."

    text_input:
      role: "Form field"

      info: "3px radius, 1px Pewter (#686e77) border, 12px horizontal padding, area-normal 400 at 18px in Midnight (#112337). Carries the 0 1px 4px blue-tinted shadow. No visible focus ring change in the data — the border itself is the affordance."

    tag_pill:
      role: "Category/discipline label"

      info: "800px radius, 6px 12px padding, area-normal 400 at 13px in Ink Black. Outlined with a 1px Ink Black border. No fill. Used for project disciplines like 'Technology' and 'Brand & Digital'."

    nav_link:
      role: "Top navigation item"

      info: "HAL Timezone 400 at ~20px, Ink Black, no underline. Right-aligned cluster includes a 10px OC Highway timestamp ('01:27 UK') with +0.10em tracking as a small editorial detail."

    section_heading_display:
      role: "Hero/page title"

      info: "area-normal 500 at 60–80px, Ink Black, letter-spacing -0.029em, line-height ~1.1. Centered alignment, narrow measure (~720px) for the hero statement. This is the largest type in the system."

    project_title_italic:
      role: "Card heading"

      info: "Gooper 500 at 17–19px in italic, Ink Black, line-height 1.2. Sits directly under the project image and gives the card an editorial pull-quote feel."

    section_label:
      role: "Pre-title / kicker"

      info: "Gooper 400 at 16px italic, centered, Ink Black. Sits above section content as a quiet 'Selected works' style marker."

    footer_block:
      role: "Site footer"

      info: "Carbon (#151612) background, full-width, Canvas Cream text. Inverts the page's dominant warm-light feel for a closing dark band."

  do_s_and_don_ts:

    do:
      - "Use pill-shaped buttons (800px radius) for every interactive element — never square or slightly-rounded buttons"
      - "Let project cards own color: pick one vivid hex from the accent set per card, keep the rest of the page in warm neutrals"
      - "Set body copy at 18px in area-normal 400 — the system reads at editorial size, not product-UI size"
      - "Anchor all headlines in Ink Black (#1d1e19) and let the canvas (#f8f9f3) carry the warmth — never introduce white"
      - "Reserve 40px radius exclusively for hero and feature surfaces; cards stay at 8px to maintain the gallery hierarchy"
      - "Apply the heavy 0 28px 80px shadow only to hero blocks and project cards — the depth comes from a small number of well-placed shadows, not constant elevation"
      - "Use OC Highway at 10px with +0.10em tracking for micro-labels and timestamps — the tracked uppercase is a signature detail"

    don_t:
      - "Don't use the chromatic accent palette for buttons, nav, or text — they belong only to project card backgrounds"
      - "Don't mix multiple vivid colors on the same card or section — one color field per surface"
      - "Don't introduce pure black (#000000) as a fill — Ink Black (#1d1e19) is the system black, the tiny warm shift is the difference"
      - "Don't use more than one shadow tier per page level — the heavy shadow is for cards/hero, the faint one for inputs, nothing else"
      - "Don't set body text below 18px — the system is editorial, not data-dense"
      - "Don't use Cobalt Violet (#204ce5) for anything other than a single filled primary action — it's the system's only chromatic action and overuse flattens its meaning"
      - "Don't round inputs at 8px — the 3px input radius creates a deliberate contrast with the pill buttons and is part of the system language"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f8f9f3` | Default page background, warm off-white paper |"
    info: "| 1 | Colored Card | `#fff714 / #fbc2d1 / #84bdff / #fd6b01 / #03ac47` | Project card backgrounds, each a different vivid hue |"
    info: "| 2 | Quiet Card | `#e9eae2` | Subtle secondary surfaces, nav-adjacent blocks |"
    info: "| 3 | Deep Surface | `#151612` | Footer and dark contrast sections |"

  elevation:

    - "**Hero block:** `rgba(0, 0, 0, 0.16) 0px 28px 80px 0px`"
    - "**Project card:** `rgba(0, 0, 0, 0.16) 0px 28px 80px 0px`"
    - "**Input field:** `rgba(18, 25, 97, 0.08) 0px 1px 4px 0px`"
    - "**Button:** `rgba(18, 25, 97, 0.08) 0px 1px 4px 0px`"

  imagery:

    imagery_is_project_led: "each case study carries a full-bleed photograph or render inside the card, and the colored card background acts as a matte frame. Photography is real-world, cinematic, and editorial — city streets, product launches, festival signage, aerial shots — never stock-staged. No illustrations, no abstract graphics, no icon system beyond simple geometric tags. Hero sections use a single dominant visual (video or still) inside a 40px-radius container rather than collage or grid. Icons are minimal: small line weights used only for nav arrows and timestamp markers. The overall feel is photo-journalistic, not product-shot."

  layout:

    info: "Page model is max-width 1200px, centered, with generous outer margins on desktop. The hero opens with a centered display headline over the warm cream canvas, immediately followed by a full-bleed 40px-radius hero visual. Sections alternate between cream canvas and slightly tinted cards without ever using a full dark band until the footer. The work grid is a 2-column layout with generous gutters — each card is large enough to feel like a magazine spread, not a thumbnail. Section rhythm is unhurried: ~80px vertical gaps between major sections, with small labels (italic Gooper) providing quiet dividers. Navigation is a single top bar with a left-aligned wordmark ('Fiasco') and a right-aligned cluster of HAL Timezone links plus an editorial timestamp. No sidebar, no sticky behavior visible in the data. The footer inverts to dark Carbon for a clean closing band."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #1d1e19 (Ink Black)"
    - "background: #f8f9f3 (Canvas Cream)"
    - "border: #1d1e19 (Ink Black for structural) / #e9eae2 (Stone Mist for subtle)"
    - "accent: #fff714 (Sulfur Yellow — the loudest project card color)"
    - "primary action: #204ce5 (filled action)"
    - "form input border: #686e77 (Pewter)"

    info: "Example Component Prompts:"

    - "Create a project card: 8px border-radius, 22px padding on all sides, background #fff714 (Sulfur Yellow). Project image at top filling card width. Below: italic Gooper 500 19px in #1d1e19 reading the project title. Description in area-normal 400 18px in #1d1e19. Two tag pills at the bottom: 800px radius, 6px 12px padding, 1px #1d1e19 border, area-normal 400 13px #1d1e19. Apply shadow rgba(0,0,0,0.16) 0 28px 80px."

    - "Create a hero section: cream canvas (#f8f9f3). Centered headline in area-normal 500 72px, color #1d1e19, letter-spacing -0.029em, line-height 1.1, max-width 720px. Below: a full-bleed visual block, 40px border-radius, 600px tall, with the heavy shadow rgba(0,0,0,0.16) 0 28px 80px."

    - "Create a ghost button: 800px border-radius, 12px 20px padding, 1px solid #1d1e19 border, no fill. Text in area-normal 500 14px, color #1d1e19. No shadow. Pair with a second identical button to the right for a dual-action pattern."

    - "Create a text input: 3px border-radius, 1px solid #686e77 border, 12px horizontal padding, area-normal 400 18px in #112337, with the faint shadow rgba(18,25,97,0.08) 0 1px 4px. Placeholder in #686e77 at the same size."

    - "Create a nav bar: cream canvas background, left-aligned 'Fiasco' wordmark in area-normal 600 24px #1d1e19. Right-aligned cluster of links in HAL Timezone 400 20px #1d1e19, separated by ~24px gaps. Append a 10px OC Highway timestamp with +0.10em tracking at the far right in #1d1e19."

  typography_pairing_logic:

    info: "The system uses three font roles that must not blur: area-normal is the voice (body, UI, even large headlines when the message is functional), Gooper is the personality (editorial pull-quotes, italic project titles, section kickers), and HAL Timezone is the utility (nav, small labels, secondary headings). OC Highway only appears as tracked micro-labels. When choosing a type role, ask: is this content speaking to the reader (Gooper), serving the reader (area-normal), or labeling for the reader (HAL Timezone / OC Highway)? Mixing these roles on the same element breaks the editorial register."

  similar_brands:

    - "**Pentagram** — Same editorial agency approach with a single wordmark, generous whitespace, and large confident display type on a neutral canvas"
    - "**Wolff Olins** — Similar project-led gallery layout with each case study given its own color field, and minimal chrome between sections"
    - "**Instrument** — Warm off-white canvas with near-black text, pill-shaped buttons, and vivid accent blocks behind featured work"
    - "**Resn** — Playful agency aesthetic with custom type, cream backgrounds, and unembellished components that let the work dominate"
    - "**Locomotive** — Bold display headlines, warm neutral palette, and the same restraint of using color only on project surfaces"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-cream: #f8f9f3;
          --color-ink-black: #1d1e19;
          --color-stone-mist: #e9eae2;
          --color-shadow-stone: #d0d1cc;
          --color-carbon: #151612;
          --color-pewter: #686e77;
          --color-sulfur-yellow: #fff714;
          --color-carnation-pink: #fbc2d1;
          --color-sky-blue: #84bdff;
          --color-ember-orange: #fd6b01;
          --color-cobalt-violet: #204ce5;
          --color-midnight: #112337;
          --color-lichen-green: #03ac47;
        
          /* Typography — Font Families */
          --font-area-normal: 'area-normal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-hal-timezone: 'HAL Timezone', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gooper: 'Gooper', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-oc-highway: 'OC Highway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 14.4;
          --tracking-caption: -0.15px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.07px;
          --text-body: 18px;
          --leading-body: 25.2;
          --tracking-body: -0.23px;
          --text-subheading: 20px;
          --leading-subheading: 28;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 36;
          --tracking-heading-sm: -0.9px;
          --text-heading: 40px;
          --leading-heading: 32;
          --tracking-heading: -1px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 66;
          --tracking-heading-lg: -1.74px;
          --text-display: 80px;
          --leading-display: 88;
          --tracking-display: -2.32px;
        
          /* Typography — Weights */
          --font-weight-thin: 100;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-68: 68px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 22px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-3xl: 40px;
          --radius-3xl-2: 44px;
          --radius-full: 800px;
        
          /* Named Radii */
          --radius-hero: 40px;
          --radius-cards: 8px;
          --radius-links: 44px;
          --radius-inputs: 3px;
          --radius-buttons: 800px;
        
          /* Shadows */
          --shadow-sm: rgba(18, 25, 97, 0.08) 0px 1px 4px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.16) 0px 28px 80px 0px;
        
          /* Surfaces */
          --surface-canvas: #f8f9f3;
          --surface-colored-card: #fff714 / #fbc2d1 / #84bdff / #fd6b01 / #03ac47;
          --surface-quiet-card: #e9eae2;
          --surface-deep-surface: #151612;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-cream: #f8f9f3;
          --color-ink-black: #1d1e19;
          --color-stone-mist: #e9eae2;
          --color-shadow-stone: #d0d1cc;
          --color-carbon: #151612;
          --color-pewter: #686e77;
          --color-sulfur-yellow: #fff714;
          --color-carnation-pink: #fbc2d1;
          --color-sky-blue: #84bdff;
          --color-ember-orange: #fd6b01;
          --color-cobalt-violet: #204ce5;
          --color-midnight: #112337;
          --color-lichen-green: #03ac47;
        
          /* Typography */
          --font-area-normal: 'area-normal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-hal-timezone: 'HAL Timezone', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gooper: 'Gooper', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-oc-highway: 'OC Highway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 14.4;
          --tracking-caption: -0.15px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.07px;
          --text-body: 18px;
          --leading-body: 25.2;
          --tracking-body: -0.23px;
          --text-subheading: 20px;
          --leading-subheading: 28;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 36;
          --tracking-heading-sm: -0.9px;
          --text-heading: 40px;
          --leading-heading: 32;
          --tracking-heading: -1px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 66;
          --tracking-heading-lg: -1.74px;
          --text-display: 80px;
          --leading-display: 88;
          --tracking-display: -2.32px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-68: 68px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-3xl: 40px;
          --radius-3xl-2: 44px;
          --radius-full: 800px;
        
          /* Shadows */
          --shadow-sm: rgba(18, 25, 97, 0.08) 0px 1px 4px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.16) 0px 28px 80px 0px;
        }