volume___style_reference:
  info: "> gallery wall with whispers — editorial restraint on paper-white canvas, the chrome is invisible, the imagery is the only color"

  theme: "light"

  info: "Volume reads as an editorial gallery for design publications: full-bleed photographic campaigns with whisper-light Messina Sans headlines floating over image backgrounds. The chrome itself is nearly invisible — paper-white canvas, charcoal type, hairline borders, and a small set of pill-shaped status tags that carry the only chromatic punctuation. The extreme light weights (300/350) and tight negative tracking create a refined, magazine-page atmosphere where negative space and imagery do the heavy lifting. Every surface favors restraint and breathing room, letting the projects — not the interface — command attention."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#272727` | `--color-ink` | Primary text, nav, footer text, dark pill tags (funded, successful) — the workhorse near-black that grounds every layout |"
    info: "| Graphite | `#717171` | `--color-graphite` | Secondary text, hairline borders on cards, images, and inputs — the quiet structural neutral |"
    info: "| Ash | `#949494` | `--color-ash` | Tertiary text, subtle borders, disabled or muted states |"
    info: "| Fog | `#cdcccc` | `--color-fog` | Light placeholder text, decorative dividers on dark surfaces |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, text on dark/image overlays — the dominant background across all sections |"
    info: "| Void | `#000000` | `--color-void` | Occasional deep surface for emphasis blocks, SVG fills |"
    info: "| Ember | `#e75a00` | `--color-ember` | Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"
    info: "| Signal Red | `#c52910` | `--color-signal-red` | Accent — alert and availability tags, sits between Ember and Brick in the warm surface stack |"
    info: "| Brick | `#962921` | `--color-brick` | Red wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"

  tokens___typography:

    messina_sans___single_family_system_covering_nav__body__display__and_ui__the_signature_choice_is_using_weight_300_350_everywhere___headlines_whisper_rather_than_shout__creating_editorial_restraint__50px_and_80px_display_sizes_with_tight_tracking__0_02em_float_over_full_bleed_campaign_imagery__14_20px_handles_body_and_ui__0_07em_wide_tracking_is_used_for_eyebrow_labels_and_tag_text_____font_messina_sans:
      - "**Substitute:** Inter (weight 300) or Söhne Buch"
      - "**Weights:** 300, 350"
      - "**Sizes:** 14px, 18px, 20px, 32px, 50px, 80px"
      - "**Line height:** 1.00, 1.18, 1.40, 2.00"
      - "**Letter spacing:** -0.02em for display/headlines, 0.07em for small UI labels and tags"
      - "**Role:** Single-family system covering nav, body, display, and UI. The signature choice is using weight 300/350 everywhere — headlines whisper rather than shout, creating editorial restraint. 50px and 80px display sizes with tight tracking (-0.02em) float over full-bleed campaign imagery; 14–20px handles body and UI; 0.07em wide tracking is used for eyebrow labels and tag text."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.4 | 0.98px | `--text-caption` |"
      info: "| body | 18px | 1.4 | -0.36px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.18 | -0.64px | `--text-heading-sm` |"
      info: "| heading | 50px | 1.18 | -1px | `--text-heading` |"
      info: "| display | 80px | 1 | -1.6px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 45 | 45px | `--spacing-45` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 50px |"
      info: "| cards | 50px |"
      info: "| buttons | 50px |"

    layout:

      - "**Section gap:** 80-120px"
      - "**Card padding:** 30px"
      - "**Element gap:** 10-15px"

  components:

    top_navigation_bar:
      role: "Minimal site chrome with centered primary links and account/cart on the right"

      info: "White background, no border, ~30px vertical padding. Logo top-left at ~30px. Centered nav links (EXPLORE, ABOUT) in 14px Messina Sans weight 300, Ink (#272727), letter-spacing 0.07em uppercase. Right-aligned ACCOUNT and CART links in same style. No sticky behavior implied; transparent over hero images."

    full_bleed_campaign_hero:
      role: "Project showcase card with photographic background and overlaid text"

      info: "Full-viewport-width image background, 500–600px tall. White text overlay bottom-left at 30px from edge. Project title at 50px Messina Sans weight 300, white, letter-spacing -1px. Subtitle (author name) at 20px weight 300, white. Below subtitle: pill-shaped status tags with 10px gap. No gradient overlay; relies on image contrast for legibility."

    dark_status_pill_funded_successful:
      role: "Indicates funding milestone reached"

      info: "50px border-radius (full pill). Ink (#272727) background, white text, 14px Messina Sans weight 300, letter-spacing 0.07em uppercase. Horizontal padding 15px, vertical padding 8–10px. No border."

    warm_status_pill_limited_available:
      role: "Indicates scarcity or availability state"

      info: "50px border-radius. Signal Red (#c52910) or Ember (#e75a00) background, white text, 14px Messina Sans weight 300, letter-spacing 0.07em uppercase. Same dimensions as dark pill; distinguished only by warm fill."

    editorial_headline_block:
      role: "Large typographic statement below hero sequences"

      info: "White background, generous top/bottom padding (80–120px). Headline at 80px Messina Sans weight 300, Ink color, letter-spacing -1.6px, line-height 1.0. Max-width ~800px left-aligned with 30px page-edge padding. No supporting imagery — pure typography breathing."

    hairline_bordered_card:
      role: "Content cards for supplementary project info"

      info: "White background, 1px Graphite (#717171) border, 50px border-radius, 30px internal padding. Content stacks vertically with 10–15px gaps. No shadow; the border alone defines the card edge."

    tag_input:
      role: "Search or filter field"

      info: "Transparent or white background, 1px Graphite (#717171) border, 17px horizontal padding × 13px vertical padding. 14px Messina Sans weight 300, Ink text, Fog (#cdcccc) placeholder. No focus ring color specified; relies on border."

    footer:
      role: "Minimal site footer"

      info: "White background, 30px padding. Ink text at 14px weight 300, letter-spacing 0.07em uppercase for links. Centered or left-aligned with no visual divider from content above."

    cookie_consent_bar:
      role: "Fixed-bottom compliance notice"

      info: "White or very light background, full-width, ~60px tall. Left-aligned body text at 14px with a link to Privacy policy. Right-aligned two buttons: 'Preferences' (outlined, Ink border) and 'Accept' (filled Ink background, white text). Both buttons at 50px radius, 15px horizontal × 8px vertical padding."

  do_s_and_don_ts:

    do:
      - "Use Messina Sans at weight 300 or 350 for all text — heavier weights break the editorial restraint"
      - "Set pill tags, buttons, and status indicators to 50px border-radius for the full pill shape"
      - "Apply -0.02em letter-spacing on display sizes (50px+) and 0.07em on small UI labels and uppercase tags"
      - "Use full-bleed photographic backgrounds for hero sections — never flat color blocks for campaign showcases"
      - "Keep the page canvas Paper (#ffffff) and let imagery be the only source of color in a section"
      - "Stack pill tags with 10px gaps beneath the hero subtitle, never float them separately"
      - "Reserve warm accent colors (Ember, Signal Red, Brick) exclusively for status and availability tags"

    don_t:
      - "Do not use type weights above 350 — bold or semibold text violates the whisper-light voice"
      - "Do not use sharp corners on cards, tags, or buttons — 50px radius is system-wide"
      - "Do not add drop shadows to cards or elevated surfaces — borders alone define edges"
      - "Do not apply the warm accent palette to buttons, headings, or icons — those are strictly for status tags"
      - "Do not constrain heroes to a max-width — campaign imagery must span the full viewport"
      - "Do not use system fonts or sans-serif alternatives at different weights as a substitute for Messina Sans's specific light cut"
      - "Do not introduce gradients — the system is flat color + photography only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Page canvas, body backgrounds, editorial text sections |"
    info: "| 1 | Card | `#ffffff` | Bordered content cards on Paper, defined by hairline Graphite border rather than fill |"
    info: "| 2 | Overlay | `#000000` | Text on photographic backgrounds relies on image contrast, not a scrim |"

  elevation:

    info: "The system is deliberately shadowless. Elevation is communicated through hairline borders (1px Graphite #717171) and the 50px pill radius rather than box-shadow. This preserves the flat editorial print feel — cards look like printed inserts, not floating panels."

  imagery:

    info: "Photography dominates as full-bleed campaign backgrounds — no illustration, no product renders, no abstract graphics within the UI itself. The geometric teal illustration in the first hero is part of the project's own artwork, not system chrome. Images are large-format editorial: architectural, typographic, atmospheric (night scenes, workshop interiors). No duotone or color treatment is applied at the system level; photographs appear in their native tonal range. Iconography is minimal to absent in the visible chrome."

  layout:

    info: "Full-bleed, viewport-spanning campaign heroes stack vertically with no gaps between them. Each hero is ~500–600px tall with bottom-left text overlay. Below the hero sequence, a spacious white editorial section holds a single large headline at 80px, left-aligned with generous left padding (~30px). Navigation is a thin top bar — logo top-left, centered links, account/cart top-right — with no sticky behavior. The overall rhythm alternates between immersive photographic full-bleed blocks and quiet typographic white space, creating a gallery-walk cadence rather than a scrollable feed."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #272727 (Ink)"
    - "background: #ffffff (Paper)"
    - "border: #717171 (Graphite, 1px)"
    - "accent: #c52910 (Signal Red, tags only)"
    - "dark surface: #272727 (Ink)"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "*Full-bleed campaign hero*: Background is a full-viewport-width photograph. Bottom-left overlay: project title at 50px Messina Sans weight 300, #ffffff, letter-spacing -1px. Subtitle at 20px weight 300, white. Below at 10px gap: two pill tags with 50px radius, #272727 background, white text, 14px weight 300, letter-spacing 0.07em uppercase, 15px horizontal × 10px vertical padding."

    - "*Editorial headline section*: White background, 100px top padding. Headline at 80px Messina Sans weight 300, #272727, letter-spacing -1.6px, line-height 1.0, max-width 800px, left-aligned with 30px page-edge inset."

    - "*Dark status pill*: 50px border-radius, #272727 background, 14px Messina Sans weight 300 uppercase white text, letter-spacing 0.07em, 15px × 10px padding."

    - "*Warm availability pill*: Same dimensions as dark pill but #c52910 background, white text — used for 'Limited copies' or 'Available now' indicators."

    - "*Bordered content card*: White background, 1px #717171 border, 50px border-radius, 30px internal padding. No shadow. Content stacks with 12px gaps at 18px Messina Sans weight 300, #272727."

  similar_brands:

    - "**Kickstarter** — Same full-bleed campaign hero with overlaid title/subtitle and pill-shaped status badges beneath"
    - "**It's Nice That** — Editorial gallery rhythm alternating between large photography and quiet white typographic space"
    - "**Unseen** — Design-publishing sensibility with restrained chrome, letting project imagery carry the visual weight"
    - "**Drip** — Single-light-weight sans-serif system with pill UI elements and minimal interface decoration"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #272727;
          --color-graphite: #717171;
          --color-ash: #949494;
          --color-fog: #cdcccc;
          --color-paper: #ffffff;
          --color-void: #000000;
          --color-ember: #e75a00;
          --color-signal-red: #c52910;
          --color-brick: #962921;
        
          /* Typography — Font Families */
          --font-messina-sans: 'Messina Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.4;
          --tracking-caption: 0.98px;
          --text-body: 18px;
          --leading-body: 1.4;
          --tracking-body: -0.36px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.18;
          --tracking-heading-sm: -0.64px;
          --text-heading: 50px;
          --leading-heading: 1.18;
          --tracking-heading: -1px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -1.6px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-w350: 350;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-45: 45px;
          --spacing-60: 60px;
        
          /* Layout */
          --section-gap: 80-120px;
          --card-padding: 30px;
          --element-gap: 10-15px;
        
          /* Border Radius */
          --radius-full: 50px;
        
          /* Named Radii */
          --radius-tags: 50px;
          --radius-cards: 50px;
          --radius-buttons: 50px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-card: #ffffff;
          --surface-overlay: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #272727;
          --color-graphite: #717171;
          --color-ash: #949494;
          --color-fog: #cdcccc;
          --color-paper: #ffffff;
          --color-void: #000000;
          --color-ember: #e75a00;
          --color-signal-red: #c52910;
          --color-brick: #962921;
        
          /* Typography */
          --font-messina-sans: 'Messina Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.4;
          --tracking-caption: 0.98px;
          --text-body: 18px;
          --leading-body: 1.4;
          --tracking-body: -0.36px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.18;
          --tracking-heading-sm: -0.64px;
          --text-heading: 50px;
          --leading-heading: 1.18;
          --tracking-heading: -1px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -1.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-45: 45px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-full: 50px;
        }