gigantic___style_reference:
  info: "> punk-rock candy wrapper shouting on cream paper"

  theme: "light"

  info: "Gigantic operates on a punk-rock confectionery visual language: an oversized headline voice shouting over warm cream paper, a single screaming orange-red accent, and packaging-forward product photography that treats each bar like a streetwear drop. The dominant near-black is the brand's primary action and text color — buttons are not colorful, they are assertive and monochromatic, with the orange-red reserved for product flavor coding, the footer wash, and the brand mark. Typography carries the energy: Neue Haas Grotesk Display set at near-display sizes, tracked wide and set heavy, so the type itself becomes the graphic. Whitespace is generous, the canvas is always warm (#f0ede7) rather than clinical white, and components stay flat — no shadows, no gradients, no glassmorphism — just bold ink on cream paper with a single loud accent."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#231f20` | `--color-ink-black` | Primary text, filled action buttons, nav, headings, hairline borders, product bar backgrounds |"
    info: "| Cream Paper | `#f0ede7` | `--color-cream-paper` | Primary page canvas, section backgrounds, image backgrounds |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Inverted text on dark surfaces, button text, card/image backgrounds |"
    info: "| Blast Red | `#ff634b` | `--color-blast-red` | Flavor-coded product accent (Salted Peanut bar), footer band, brand mark, single decorative punctuation across the cream canvas |"
    info: "| True Black | `#000000` | `--color-true-black` | Minor icon strokes and print-style detail |"

  tokens___typography:

    neue_haas_grotesk_display___exclusive_brand_typeface__weight_700_drives_the_hero_display_voice_and_section_openers___set_huge__tracked_wide__the_type_is_the_graphic__weights_450_500_handle_subheadings__nav__and_product_labels__weight_400_at_14_16px_with_wide_tracking_0_0310_0_0500em_runs_body_and_button_text__the_all_caps___wide_tracking___heavy_weight_combination_is_the_signature_____font_neue_haas_grotesk_display:
      - "**Substitute:** Neue Haas Grotesk Display Pro, or free alternatives: Inter (700 for display, 500/450 medium weights are not available so use 500/600), or Neue Haas Unica Pro trial. For closest free feel: Space Grotesk at matching weights."
      - "**Weights:** 400, 450, 500, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px, 24px, 25px, 32px (plus oversized display usage beyond detected body sizes for hero text)"
      - "**Line height:** 1.00–1.80 depending on size; tighter at display sizes, breathing room at body"
      - "**Letter spacing:** 0.0160em (12px) → 0.0250em (14px) → 0.0280em (16px) → 0.0310em (18px) → 0.0360em (24px) → 0.0440em (25px) → 0.0500em (32px) → 0.0570–0.0580em at display sizes. Tracking widens with size — a deliberate choice that opens up heavy display letters and lets cream paper breathe between strokes."
      - "**OpenType features:** `If using an alternative with stylistic alternates available, the brand reads identically in standard set; no detected custom OpenType features beyond standard tracking.`"
      - "**Role:** Exclusive brand typeface. Weight 700 drives the hero display voice and section openers — set huge, tracked wide, the type IS the graphic. Weights 450/500 handle subheadings, nav, and product labels. Weight 400 at 14–16px with wide tracking (0.0310–0.0500em) runs body and button text. The all-caps + wide-tracking + heavy-weight combination is the signature."

    arial___arial___detected_in_extracted_data_but_not_described_by_ai____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.2"
      - "**Role:** Arial — detected in extracted data but not described by AI"

    gtstandard_m___gtstandard_m___detected_in_extracted_data_but_not_described_by_ai____font_gtstandard_m:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.5"
      - "**Letter spacing:** 0.031"
      - "**Role:** GTStandard-M — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.19px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | 0.35px | `--text-body-sm` |"
      info: "| body | 16px | 1.8 | 0.45px | `--text-body` |"
      info: "| subheading | 18px | 1.44 | 0.56px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | 0.86px | `--text-heading-sm` |"
      info: "| heading-lg | 32px | 1.2 | 1.6px | `--text-heading-lg` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 35 | 35px | `--spacing-35` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 55 | 55px | `--spacing-55` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 30px"
      - "**Element gap:** 20px"

  components:

    hero_display_headline:
      role: "Oversized section opener that dominates the viewport"

      info: "Neue Haas Grotesk Display weight 700, set at near-viewport-bleed size (estimated 120–180px), Ink Black (#231f20) on Cream Paper (#f0ede7). Three lines stacked, line-height ~1.0, letter-spacing wide (~0.05em). Sentence case with only the final word italicized for a deliberate cadence break. The headline IS the hero — no supporting visual needed."

    filled_ink_button:
      role: "Primary action — shop, add to cart, CTAs"

      info: "Ink Black (#231f20) background, Pure White (#ffffff) text, 0px border-radius, padding 19px horizontal by 15px vertical, Neue Haas Grotesk Display weight 500 at 16px with 0.0310em tracking, all-caps. No hover state lifts or shadows — the color flip is the interaction. Width fits content (not full-width)."

    outline_ink_button:
      role: "Secondary action and product grid CTAs"

      info: "Transparent background, 1px Ink Black (#231f20) border, Ink Black text, 0px radius, 19px horizontal × 15px vertical padding, same type as filled variant. The bordered rectangular form is the brand's workhorse — appears under every product card."

    announcement_bar:
      role: "Top-of-page promo strip and product ticker"

      info: "Pure White background with 1px Ink Black bottom border; text 14px weight 500 all-caps tracking 0.0250em. Scrolling ticker variant runs Ink Black on Pure White with product names cycling."

    minimal_nav_bar:
      role: "Primary site navigation"

      info: "Cream Paper background, 0px radius, left-aligned text nav links (14–16px, weight 500, tracking 0.0310em, uppercase), centered Gigantic script logo, right-aligned account + cart icons. No background, no border — floats on the canvas."

    product_card:
      role: "Grid item for candy bar SKUs"

      info: "No card chrome. White product image, product name below in Ink Black weight 700 at 24px tracking 0.0360em all-caps, then an outline button beneath. Image fills roughly 70% of card height. Cards sit on Cream Paper with 20px gaps between — no card background, no border, no shadow."

    flavor_coded_product_image:
      role: "Product bar photography with brand-specific accent"

      info: "Each flavor box and bar wrapper carries a distinct accent color coordinated with its identity — Salted Peanut uses Blast Red (#ff634b), Almond Horchata uses warm brown, Crispy Coconut uses teal, Double Dark Mint uses green. The Gigantic script wordmark in cream/off-white sits over a halftone-dotted or grainy dark panel on each wrapper."

    dark_feature_section:
      role: "Product variety showcase and product bar reveal"

      info: "Ink Black (#231f20) full-bleed background section. Display text cut from a textured halftone/ripped-edge effect in cream and white, 100–140px weight 700. Product bar image overlaps and breaks the section boundaries — torn-edge effect where the cream above meets the ink below."

    section_header_block:
      role: "Centered intro text under hero"

      centered_stack: "small red icon mark (lollipop/dollar-sign variant), then 16–18px Ink Black weight 500 with 0.0310em tracking all-caps body copy at 1.5–1.7 line-height. Two to three short paragraphs max — the copy punches in short sentences with period-driven rhythm."

    brand_script_logo:
      role: "Wordmark in nav and on packaging"

      info: "Custom hand-drawn brush-script reading 'Gigantic' with a small swirl/candy decoration. Used in nav center, on product packaging, and as a stamp/seal motif. Cream color on dark packaging, Ink Black on cream canvas. No fixed type substitute — the script is a custom mark."

    footer_band:
      role: "Closing brand statement and secondary nav"

      info: "Blast Red (#ff634b) full-bleed background, Cream Paper (#f0ede7) or Pure White text. Sits as a single colored band at the page bottom — the only place where the accent color takes over a whole surface."

    account_icon_group:
      role: "Utility icons in nav"

      info: "Minimal stroke icons (account person, cart) in Ink Black, ~20px, no fill, no background. Aligned right, 19px gap between."

  do_s_and_don_ts:

    do:
      - "Use Neue Haas Grotesk Display exclusively; weight 700 for display, 500 for UI, 400 for body. No other typefaces."
      - "Set the canvas to Cream Paper (#f0ede7) by default. Reserve Pure White for product images and inverted text surfaces only."
      - "Use Ink Black (#231f20) as the primary action color for filled buttons. Make them rectangular with 0px radius, padding 19px × 15px, and 16px uppercase text with 0.0310em tracking."
      - "Track all text wide: 0.0250em minimum at body sizes, scaling up to 0.0570em at display sizes. Tight tracking breaks the brand voice."
      - "Reserve Blast Red (#ff634b) for three uses only: flavor-coded product packaging, the footer band, and the brand mark. Never as a button fill or body text accent."
      - "Make the hero headline oversized and sentence-case, with the final word optionally italicized for a cadence break. The type is the hero — no supporting visual."
      - "Separate sections with hard color transitions (cream → black → cream), not with whitespace or dividers. Full-bleed, not padded."

    don_t:
      - "Do not add shadows, gradients, or any form of elevation. Surfaces stay flat."
      - "Do not round corners on buttons, cards, images, or tags. 0px radius is the signature."
      - "Do not use Blast Red as a CTA or button background. Red is decoration; black is action."
      - "Do not set body text in sentence case at large sizes — body and UI text should be uppercase with wide tracking."
      - "Do not use multiple accent colors or introduce new hues. The palette is mononeutral + one red."
      - "Do not add illustrative graphics, lifestyle photography, or decorative backgrounds. The system is type + product photography only."
      - "Do not use light or thin font weights for display headlines. Weight 700 is the only display weight."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cream Paper | `#f0ede7` | Primary page canvas — every section sits on this warm off-white |"
    info: "| 1 | Pure White | `#ffffff` | Card/product image backgrounds, elevated content blocks |"
    info: "| 2 | Ink Black | `#231f20` | Dark feature sections, product bar background, button fills |"
    info: "| 3 | Blast Red | `#ff634b` | Flavor-coded product surfaces and footer wash |"

  elevation:

    info: "No shadows anywhere. Depth is achieved through color contrast, full-bleed dark sections, and product photography that physically overlaps section boundaries (torn-edge effect on the product bar reveal). Surfaces are flat — elevation is a non-concept in this system. The Ink Black filled button does not sit 'above' the page; it IS the page in another tone."

  imagery:

    info: "Product photography is the entire visual system beyond type. Each candy bar/bar wrapper is shot on a pure white or warm cream backdrop, perfectly square or upright portrait, filling the frame — the object IS the hero, no lifestyle context, no hands, no props. The variety section uses a single dramatic full-bleed product bar image with a torn-paper/ragged-edge effect that breaks across the cream-to-black transition, giving a punk-zine ripped-poster feel. Halftone dots and grain texture overlay the dark sections and product packaging for a printed/risograph aesthetic. Icons are stroke-only line icons, single-weight, no fills. No illustrations, no abstract graphics, no lifestyle photography — every visual is either type, the product, or the brand mark."

  layout:

    info: "Full-width sections with content centered to ~1200px max. Hero is a single centered oversized headline on cream — no image, no side-by-side. The page flows: announcement bar → minimal nav → centered hero text → small intro block → dark full-bleed product reveal section with torn edge → 4-column product grid on cream → red footer band. Sections are separated by hard color changes (cream → ink black → cream → red), not by dividers or generous whitespace. The product grid is the only multi-column layout — 4 equal columns with 20px gaps. Navigation is a single minimal top bar; no sidebar, no mega-menu. Vertical rhythm: hero commands ~70–80vh, dark feature section ~60vh, product grid section ~auto. No asymmetric or z-pattern compositions — everything is centered and stacked."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #231f20"
    - "background: #f0ede7"
    - "border/divider: #231f20"
    - "accent: #ff634b"
    - "button text: #ffffff"
    - "primary action: #231f20 (filled action)"

    3_5_example_component_prompts:

    - "**Hero Headline Block** — Cream Paper (#f0ede7) full-bleed background. Display text 'HAVE A LITTLE THRILL' centered, Neue Haas Grotesk Display weight 700 at ~140px, line-height 1.0, color #231f20, letter-spacing ~0.05em. Three lines stacked, sentence case, final word italicized. No image, no supporting visual — the type fills 70% of the viewport."

    - "**Product Grid Card** — White (#ffffff) product image filling the top 70% of the card, no border, no radius. Below the image: product name in Neue Haas Grotesk Display weight 700, 24px, color #231f20, all-caps, letter-spacing 0.0360em. Then an outline button: 1px #231f20 border, 0px radius, 19px horizontal × 15px vertical padding, 16px uppercase text in #231f20 with 0.0310em tracking."

    - "**Dark Feature Section** — Ink Black (#231f20) full-bleed background. Display text 'VARIETY' at ~120px weight 700 in #f0ede7, with a halftone-dot texture pattern inside the letterforms. Product bar image (candy bar on dark background with torn-paper edge) overlaps the section's top edge, breaking from the cream section above."

    - "**Filled Ink Button** — Background #231f20, text #ffffff, 0px border-radius, padding 19px horizontal × 15px vertical, Neue Haas Grotesk Display weight 500 at 16px, all-caps, letter-spacing 0.0310em. Width auto-fits content. No hover lift, no shadow — only color stays flat."

    - "**Footer Band** — Blast Red (#ff634b) full-bleed background, cream text (#f0ede7) for brand statement, centered, 16px Neue Haas Grotesk Display weight 500 all-caps with 0.0310em tracking. White secondary nav links above the red band, separated only by the color change — no divider line."

  tracking_philosophy:

    info: "Tracking scales with size. The brand's type voice depends on this curve: at 12px the letter-spacing is barely perceptible (0.0160em), by 16px it's 0.0280–0.0310em, and at display sizes it balloons to 0.0570–0.0580em. This widening is not a default CSS value — it is hand-tuned per role. Small text needs to read as cohesive; body text needs to feel confident and slightly editorial; display text needs the letters to breathe enough that the heavy weight doesn't become a black mass. Always set tracking explicitly, never 'normal'."

  similar_brands:

    - "**Tony's Chocolonely** — Same oversized display type shouting from a warm cream canvas, single-color product packaging photography, editorial brand voice with punk attitude"
    - "**Behave (supplement brand)** — Same punk-zine aesthetic with blown-out type on cream paper, mononeutral palette with one loud accent, rectangular buttons with no radius"
    - "**Moo (print brand)** — Same wide-tracked Neue Haas-adjacent grotesque, flat surfaces, no shadows, oversized display headlines as primary hero device"
    - "**Graza (olive oil)** — Same single-accent-color packaging-forward photography, cream canvas with near-black type, rectangular buttons, editorial flat layout"
    - "**Ghia (non-alcoholic beverages)** — Same warm cream background, oversized all-caps display type, single saturated accent for product variant coding, no shadows or gradients"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #231f20;
          --color-cream-paper: #f0ede7;
          --color-pure-white: #ffffff;
          --color-blast-red: #ff634b;
          --color-true-black: #000000;
        
          /* Typography — Font Families */
          --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', 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;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.19px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.35px;
          --text-body: 16px;
          --leading-body: 1.8;
          --tracking-body: 0.45px;
          --text-subheading: 18px;
          --leading-subheading: 1.44;
          --tracking-subheading: 0.56px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.86px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: 1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w450: 450;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-35: 35px;
          --spacing-50: 50px;
          --spacing-55: 55px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 30px;
          --element-gap: 20px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-cream-paper: #f0ede7;
          --surface-pure-white: #ffffff;
          --surface-ink-black: #231f20;
          --surface-blast-red: #ff634b;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #231f20;
          --color-cream-paper: #f0ede7;
          --color-pure-white: #ffffff;
          --color-blast-red: #ff634b;
          --color-true-black: #000000;
        
          /* Typography */
          --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', 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;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.19px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.35px;
          --text-body: 16px;
          --leading-body: 1.8;
          --tracking-body: 0.45px;
          --text-subheading: 18px;
          --leading-subheading: 1.44;
          --tracking-subheading: 0.56px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.86px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: 1.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-35: 35px;
          --spacing-50: 50px;
          --spacing-55: 55px;
        }