art_in_dumbo___style_reference:
  info: "> gallery broadside on raw paper"

  theme: "light"

  info: "Art In DUMBO reads like a broadside poster pinned to a white-cube gallery wall: one weight of Helvetica at every size, black ink on raw paper, and a single sage-green accent that punctuates action and status like a curator's sticker. The system is unapologetically editorial — full-bleed documentary photography carries the atmosphere while the type system stays calm, dense, and confident at every breakpoint. Surfaces are almost entirely white or warm off-white; structure comes from hairline black rules, never from shadows or colored panels. Components are few and stocky: pill buttons with 50px radii sit next to sharp 2px-radius inputs, creating deliberate radius contrast. Color is rationed — sage green for the only real CTA, warm orange for urgency tags, and otherwise a pure black-to-warm-gray ramp."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Carbon | `#000000` | `--color-carbon` | Primary text, logo cells, hairline dividers between list rows, icon strokes — the only ink in the system |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, pill-button fills, inverse text on dark cells |"
    info: "| Plaster | `#f1f2f2` | `--color-plaster` | Input fields, secondary surfaces, subtle button hovers |"
    info: "| Linen | `#e5e3df` | `--color-linen` | Warm off-white section backgrounds, large quiet surfaces that break the white without going gray |"
    info: "| Ash | `#bdbdbd` | `--color-ash` | Medium-contrast borders, control outlines, and structural separators |"
    info: "| Graphite | `#828282` | `--color-graphite` | Button borders and label text for secondary controls |"
    info: "| Smoke | `#b3b3b3` | `--color-smoke` | Shadow base tone for the single ambient drop-shadow pattern |"
    info: "| Sage | `#71cc98` | `--color-sage` | Green action color for filled buttons, selected navigation states, and focused conversion moments |"
    info: "| Ember | `#ff7f41` | `--color-ember` | Orange outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color |"

  tokens___typography:

    helvetica_neue___sole_typeface_across_the_entire_system___display__body__nav__labels__weight_500_is_the_only_weight_used__this_medium_only_commitment_is_the_signature__not_bold__not_regular__never_thin__sizes_run_from_10px_captions_to_68px_display_with_tight_1_05_1_15_line_heights_at_the_top_of_the_scale_and_1_40_1_80_at_body_sizes_____font_helvetica_neue:
      - "**Substitute:** Inter, Neue Haas Grotesk, Helvetica, Arial"
      - "**Weights:** 500"
      - "**Sizes:** 10px, 11px, 16px, 19px, 22px, 27px, 28px, 30px, 34px, 37px, 44px, 63px, 68px"
      - "**Line height:** 1.00–1.80"
      - "**Role:** Sole typeface across the entire system — display, body, nav, labels. Weight 500 is the only weight used; this medium-only commitment is the signature: not bold, not regular, never thin. Sizes run from 10px captions to 68px display with tight 1.05–1.15 line-heights at the top of the scale and 1.40–1.80 at body sizes."

    roboto___secondary_system_fallback_for_micro_labels_and_small_ui_chrome_where_a_different_metric_helps____font_roboto:
      - "**Substitute:** Roboto, system-ui"
      - "**Weights:** 400, 500"
      - "**Sizes:** 10px, 11px"
      - "**Line height:** 1.20–1.40"
      - "**Role:** Secondary system fallback for micro-labels and small UI chrome where a different metric helps"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.4 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 22px | 1.27 | — | `--text-subheading` |"
      info: "| heading-sm | 27px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 34px | 1.15 | — | `--text-heading` |"
      info: "| heading-lg | 44px | 1.1 | — | `--text-heading-lg` |"
      info: "| display | 63px | 1.05 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 144 | 144px | `--spacing-144` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0-4px |"
      info: "| inputs | 2px |"
      info: "| logo-cells | 0px |"
      info: "| buttons-pill | 50px |"
      info: "| buttons-secondary | 2px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.3) 0px 1px 4px -1px` | `--shadow-sm` |"
      info: "| md | `rgba(0, 0, 0, 0.25) 0px 0px 10px 0px` | `--shadow-md` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 16-24px"
      - "**Element gap:** 12-20px"

  components:

    logo_wordmark_block:
      role: "Brand mark in the top-left of every screen"

      stacked_three_cell_grid: "'ART', 'IN', 'DUMBO' on three lines. Each letter sits in its own black-bordered cell on a white ground. Borders are 1px black, no fill, no radius. Cells are flush — no gap between them — so the mark reads as a single printed stamp."

    sticky_header_bar:
      role: "Persistent navigation across all pages"

      white_background__no_border__left: "logo wordmark. Right: three text links (Events, Exhibitions, First Thursdays) in 16–19px Helvetica 500, #000000, flush right. No icons, no background pills — nav is just type."

    full_bleed_hero_photograph:
      role: "Above-the-fold visual anchor on the landing page"

      info: "Documentary-style photograph of artists at work, edge-to-edge with no container or radius. The logo overlays top-left in a solid white-backed block. No text overlay other than the wordmark."

    display_heading:
      role: "Section openers and welcome statements"

      info: "63–68px Helvetica 500, #000000, line-height ~1.05, tracking normal. Sentence case, no max-width clamp — runs nearly full bleed for editorial weight. Sage-green horizontal rule (3–4px) sometimes underlines the heading or its first word."

    body_paragraph:
      role: "Welcome copy, event descriptions, editorial text"

      info: "22–27px Helvetica 500, #000000, line-height 1.20–1.27, no max-width cap. Generous, readable, never condensed."

    email_input_field:
      role: "Newsletter capture on the welcome block"

      info: "2px border-radius, #f1f2f2 fill, no visible border. Placeholder text in 16px Helvetica 500, #000000 at ~40% opacity. Inline adjacent to a ghost Subscribe button."

    ghost_text_button_subscribe:
      role: "Secondary action paired with form fields"

      info: "No background, no border, no radius. Label in 16px Helvetica 500, #000000, followed by a small right-pointing arrow glyph. Sits flush right of its input."

    sage_pill_button_map___directory:
      role: "Primary floating CTA, sticky bottom-right"

      info: "50px border-radius (full pill), #71cc98 fill, #000000 text, 16–19px Helvetica 500, horizontal padding ~20px. A small filled sage dot (8px) sits inside the left padding as a status indicator. Subtle shadow: rgba(0,0,0,0.25) 0 0 10px. This is the only chromatic fill button in the system."

    exhibition_list_row:
      role: "Primary content unit on the Exhibitions page"

      horizontal_row: "square thumbnail (~80px, 4px radius), then a four-column meta block (Date range / Title / Gallery name / Open hours). Rows separated by 1px solid #000000 hairlines — no zebra striping, no card backgrounds. Meta text in 16–22px Helvetica 500; gallery hours in #bdbdbd."

    urgency_tag_closing_soon:
      role: "Status indicator for time-sensitive items"

      info: "Inline text label, no background, no border. 16px Helvetica 500 in #ff7f41. Sits directly under the date range in an exhibition row."

    status_meta_open_hours:
      role: "Secondary metadata in list rows"

      info: "16–19px Helvetica 500, #bdbdbd. Always one line, never wrapped. Communicates operational state without competing with primary text."

    sticky_floating_action:
      role: "Persistent wayfinding CTA"

      info: "Same component language as the Sage Pill Button, but position:fixed bottom-right. Reappears on scroll with the same shadow and radius. Functions as a quiet, always-on directory shortcut."

  do_s_and_don_ts:

    do:
      - "Use #000000 for all structural lines, icons, and primary text — it is the only ink the system has"
      - "Reserve #71cc98 Sage exclusively for the Map & Directory pill, heading underline marks, and accent dots"
      - "Set border-radius to 50px on pill buttons and 2px on inputs — never blur the two"
      - "Set type to Helvetica Neue 500 at the scale sizes; do not introduce additional weights"
      - "Separate exhibition list rows with 1px solid #000000 hairlines, never with card backgrounds or zebra striping"
      - "Let hero photography run full-bleed with no overlay text other than the wordmark"
      - "Use #ff7f41 Ember only for urgency status text such as 'Closing Soon' — never as a fill"

    don_t:
      - "Do not add colored panels, gradient fills, or decorative cards behind text"
      - "Do not introduce new typefaces or weight values beyond Helvetica 500 and the Roboto micro-label fallback"
      - "Do not use shadows to separate sections — use 1px black hairlines or a shift to #e5e3df Linen"
      - "Do not round the hero photograph or exhibition thumbnails beyond 4px"
      - "Do not stack more than two type sizes in a single row of the exhibitions list"
      - "Do not place sage green text on the sage pill background — it must remain #000000"
      - "Do not center body paragraphs or exhibition row content; left-align everything"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Default page canvas, card surfaces, header background |"
    info: "| 1 | Linen | `#e5e3df` | Warm off-white section bands that break white without going gray |"
    info: "| 2 | Plaster | `#f1f2f2` | Input wells and hover surfaces for interactive elements |"

  elevation:

    - "**Sage Pill Button:** `rgba(0, 0, 0, 0.25) 0px 0px 10px 0px`"
    - "**Secondary buttons & small chrome:** `rgba(0, 0, 0, 0.3) 0px 1px 4px -1px`"

  imagery:

    info: "Full-bleed documentary photography is the primary visual content: candid shots of artists in their studios, natural light, no lifestyle staging, no color treatment. Images run edge-to-edge with no rounded corners and no overlay text. Thumbnail crops in the exhibitions list are square, tight, and unadorned. There are no illustrations, no icons beyond a small status dot, and no 3D or abstract graphics — the photography carries all atmosphere."

  layout:

    info: "Editorial broadsheet rhythm. Landing page opens with a full-bleed hero photograph, then a tight vertical stack of display heading → body paragraph → email capture, all left-aligned and nearly full-width. The Exhibitions page swaps photography for a text-and-thumbnail table: each row is a four-column horizontal band separated by 1px black hairlines, reading like a printed program. No card grids, no asymmetric compositions, no overlap. Navigation is a single sticky text-only bar. The sage Map & Directory pill is the only fixed-position element, anchored bottom-right."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000"
    - "background: #ffffff"
    - "surface-warm: #e5e3df"
    - "surface-input: #f1f2f2"
    - "border: #000000"
    - "accent: #71cc98 (Sage)"
    - "primary action: #71cc98 (filled action)"

    info: "3 Example Component Prompts:"
    - "Sage Pill Button: 50px border-radius, #71cc98 fill, 19px Helvetica 500 #000000 label, 20px horizontal padding, 10px vertical padding, a 8px filled sage dot inside the left padding, shadow rgba(0,0,0,0.25) 0 0 10px."
    - "Exhibition List Row: four columns — 80px square thumbnail (4px radius), date range in 16px Helvetica 500 #000000, title in 22px Helvetica 500 #000000, gallery name in 19px Helvetica 500 #000000 with 'Open: HH:MM–HH:MM' in 16px #bdbdbd below. Rows separated by 1px solid #000000 hairline, no row background."
    - "Display Heading Block: 63px Helvetica 500 #000000, line-height 1.05, with a 3px #71cc98 horizontal rule directly under the heading spanning the full text width. Followed by a 22px Helvetica 500 #000000 body paragraph at line-height 1.27, no max-width clamp."

  radius_philosophy:

    info: "The system uses only two radii and the contrast between them is intentional: 2px for inputs and inline controls (sharp, utilitarian, almost machine-stamped) and 50px for the only interactive pills (soft, inviting, thumb-shaped). Cards and list rows use 0–4px — they read as printed paper, not interface. Never blend the two radii on the same component."

  type_discipline:

    info: "Weight 500 across all sizes is a brand rule, not a default. Do not introduce 400 or 700 weights — the medium-only commitment is what makes the type feel like a single tool used at different pressures. The same Helvetica 500 at 10px in a status tag and at 63px in a display heading should feel like the same voice speaking at different volumes."

  similar_brands:

    - "**Printed Matter** — Same broadside-poster rhythm: one weight of sans-serif, full-bleed art photography, black hairline rules, and a single accent color rationed across the page"
    - "**Pioneer Works** — Same editorial-verticality and near-flat surface treatment, with documentary photography carrying atmosphere instead of decorative UI"
    - "**Swiss Institute** — Same Helvetica-medium-only type discipline, white-canvas gallery feel, and pill-shaped CTAs"
    - "**White Columns** — Same nearly all-achromatic palette, text-as-architecture layout, and program-list table format for exhibitions"
    - "**Are.na** — Same utilitarian restraint, hairline-separated content rows, and refusal to use color decoratively"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-carbon: #000000;
          --color-paper: #ffffff;
          --color-plaster: #f1f2f2;
          --color-linen: #e5e3df;
          --color-ash: #bdbdbd;
          --color-graphite: #828282;
          --color-smoke: #b3b3b3;
          --color-sage: #71cc98;
          --color-ember: #ff7f41;
        
          /* Typography — Font Families */
          --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 22px;
          --leading-subheading: 1.27;
          --text-heading-sm: 27px;
          --leading-heading-sm: 1.2;
          --text-heading: 34px;
          --leading-heading: 1.15;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.1;
          --text-display: 63px;
          --leading-display: 1.05;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-144: 144px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 16-24px;
          --element-gap: 12-20px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-full: 50px;
        
          /* Named Radii */
          --radius-cards: 0-4px;
          --radius-inputs: 2px;
          --radius-logo-cells: 0px;
          --radius-buttons-pill: 50px;
          --radius-buttons-secondary: 2px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
          --shadow-md: rgba(0, 0, 0, 0.25) 0px 0px 10px 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-linen: #e5e3df;
          --surface-plaster: #f1f2f2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-carbon: #000000;
          --color-paper: #ffffff;
          --color-plaster: #f1f2f2;
          --color-linen: #e5e3df;
          --color-ash: #bdbdbd;
          --color-graphite: #828282;
          --color-smoke: #b3b3b3;
          --color-sage: #71cc98;
          --color-ember: #ff7f41;
        
          /* Typography */
          --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 22px;
          --leading-subheading: 1.27;
          --text-heading-sm: 27px;
          --leading-heading-sm: 1.2;
          --text-heading: 34px;
          --leading-heading: 1.15;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.1;
          --text-display: 63px;
          --leading-display: 1.05;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-144: 144px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-full: 50px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
          --shadow-md: rgba(0, 0, 0, 0.25) 0px 0px 10px 0px;
        }