spacelab___style_reference:
  info: "> Swiss editorial grid on raw paper. A quiet gallery where Helvetica sits at the baseline and a single slate-violet button is the loudest thing in the room."

  theme: "light"

  info: "Spacelab is a Swiss-editorial architecture studio site built on near-total monochrome restraint: one typeface, one chromatic accent, and almost no surface decoration. The page behaves like a printed monograph — white canvas, oversized architectural photography, and a left-rail index navigation that recalls a museum catalogue sidebar. Type carries the entire voice: HelveticaNeue at weight 400 with line-heights compressed to 1.0–1.2 sits closer to the baseline than typical web type, making every paragraph feel set rather than typed. The single muted violet-slate (#495472) appears only on filled buttons and a rare card surface, functioning as a quiet navigational signal rather than a brand statement. Components are reduced to their skeleton: hairline borders, 4px corners, no shadows, no gradients — every element earns its weight by occupying negative space rather than filling it."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, body text inversion, button labels. The dominant background; everything else sits on top of it |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, hairline borders, the logo wordmark. Used for most dividers and structural lines (border frequency 1,156) |"
    info: "| Charcoal | `#2c2222` | `--color-charcoal` | Secondary text and the heaviest border color in the system (freq 3,104). A warm-toned near-black that softens harsh contrast on long reads |"
    info: "| Fossil | `#b2b4b1` | `--color-fossil` | Muted link color, inactive nav items, tertiary text. Desaturated green-gray that recedes against both paper white and ink black |"
    info: "| Slate Iris | `#495472` | `--color-slate-iris` | Filled button background and select card surfaces — the only chromatic voice in the system. A muted violet-slate that reads as architectural blue-grey rather than brand color, so it never shouts over the photography |"

  tokens___typography:

    helveticaneue___the_sole_typeface__used_for_everything_from_the_lowercase__spacelab__logo_to_62px_display_headlines__19_21px_section_headings__17px_body__and_15px_captions_____font_helveticaneue:
      - "**Substitute:** Helvetica, Inter, Neue Haas Grotesk, Arial"
      - "**Weights:** 400"
      - "**Sizes:** 15px, 17px, 19px, 21px, 30px, 62px"
      - "**Line height:** 1.00–1.20 (tight; display at 1.0, body at 1.20)"
      - "**Letter spacing:** 0.0110em (0.165px at 15px, 0.682px at 62px — consistent positive tracking across all sizes)"
      - "**Role:** The sole typeface. Used for everything from the lowercase 'spacelab_' logo to 62px display headlines, 19–21px section headings, 17px body, and 15px captions."

    helveticaneue_light___body_copy_and_supporting_paragraphs_where_a_quieter_voice_is_needed__the_light_cut_creates_typographic_variety_without_changing_families___a_single_typeface_system_that_breathes_through_weight__not_variety_____font_helveticaneue_light:
      - "**Substitute:** Helvetica Neue Light, Inter Light, Neue Haas Grotesk Light"
      - "**Weights:** 300 (rendered as 400 in data — light weight optical)"
      - "**Sizes:** 17px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** 0.0110em"
      - "**Role:** Body copy and supporting paragraphs where a quieter voice is needed. The light cut creates typographic variety without changing families — a single-typeface system that breathes through weight, not variety."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 15px | 1.2 | 0.165px | `--text-caption` |"
      info: "| body | 17px | 1.2 | 0.187px | `--text-body` |"
      info: "| subheading | 19px | 1.15 | 0.209px | `--text-subheading` |"
      info: "| heading-sm | 21px | 1.15 | 0.231px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.1 | 0.33px | `--text-heading` |"
      info: "| display | 62px | 1 | 0.682px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 42 | 42px | `--spacing-42` |"
      info: "| 84 | 84px | `--spacing-84` |"
      info: "| 147 | 147px | `--spacing-147` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 84px"
      - "**Card padding:** 21px"
      - "**Element gap:** 21px"

  components:

    sidebar_logo_wordmark:
      role: "Brand identifier pinned to the top-left of every page"

      info: "Lowercase 'spacelab_' in HelveticaNeue 21px, weight 400, color #000000, letter-spacing 0.231px. The trailing underscore is signature — it reads as a code-syntax artifact and is the logo's only visual gimmick."

    vertical_section_index:
      role: "Primary navigation — always visible in the left rail"

      info: "Stacked list at 17px HelveticaNeue weight 400. Active item ('All stories') rendered in #000000 weight 400; inactive items ('Work', 'News', 'Exploration', 'About', 'Contact') rendered in #b2b4b1 weight 400. 10px gap between items. No bullets, no icons, no separators — a pure typographic index."

    filled_accent_button:
      role: "Primary interactive element — the only filled button in the system"

      info: "Background #495472, text #ffffff, 15px HelveticaNeue weight 400, letter-spacing 0.165px, padding 21px horizontal / 21px vertical, border-radius 0. No hover state deviation specified — the button is already quiet, so state change is minimal."

    ghost_text_link:
      role: "Inline links and secondary navigation"

      info: "Color #b2b4b1 default, #000000 on hover. 17px HelveticaNeue weight 400, 5px margin-bottom for paragraph spacing. No underline by default — link affordance comes from color shift and the hairline border-bottom 1px #000000 applied to body context."

    accent_card_surface:
      role: "Featured content card — the only chromatic surface"

      info: "Background #495472, padding 21px, border-radius 0. Used to surface a single project or story; the card contains #ffffff text. Functions as a typographic 'pull-quote panel' more than a content container — it interrupts the white canvas rather than organizing content."

    full_bleed_image_block:
      role: "Primary visual unit for project and editorial pages"

      info: "Architectural photograph at native aspect ratio, no border, no radius, no caption. Aligned to the right column of the asymmetric grid. May span the full content area width."

    body_paragraph:
      role: "Long-form editorial copy"

      info: "17px HelveticaNeue-Light at line-height 1.20, color #000000, letter-spacing 0.187px. Paragraph spacing 21px. Left-aligned, ragged right. No max-width constraint — text follows the column."

    display_headline:
      role: "Page titles and editorial section openers"

      info: "62px HelveticaNeue weight 400, line-height 1.00, letter-spacing 0.682px, color #000000. The tight 1.0 line-height makes the headline sit on the baseline like a printed masthead — no airy leading, no decorative space."

    section_heading:
      role: "Mid-level headings for content sections"

      info: "21–30px HelveticaNeue weight 400, line-height 1.10–1.15, color #000000. 42px margin-bottom to separate from body content."

    hairline_divider:
      role: "Structural separator between content blocks"

      info: "1px solid #000000 or #2c2222, no other styling. The most common element in the system (over 1,100 instances in the data) — Spacelab uses lines, not spacing, to organize content."

  do_s_and_don_ts:

    do:
      - "Use only HelveticaNeue (or HelveticaNeue-Light) for every text element — no display fonts, no serifs, no monospaced accents."
      - "Hold line-heights at 1.00 for display sizes (30–62px) and never above 1.20 for body — the tight rhythm is the signature."
      - "Use #495472 exclusively for filled buttons and accent card surfaces; treat it as a switch, not a decoration."
      - "Separate content blocks with 1px hairline borders in #000000 or #2c2222 rather than padding or background fills."
      - "Keep border-radius at 0px on all cards, buttons, tags, and images; the 4px token is reserved for the rare utility element."
      - "Maintain 21px as the base unit for element gaps and card padding; step up to 42px and 84px for section-level separation."
      - "Render the logo as lowercase 'spacelab_' with a trailing underscore — the underscore is non-negotiable brand grammar."

    don_t:
      - "Do not introduce a second typeface, even for emphasis — vary weight (400 vs Light) within HelveticaNeue instead."
      - "Do not add drop shadows, inner glows, or blur effects — the system uses flat surfaces and hairline borders only."
      - "Do not use #495472 for body text, icons, borders, or decorative accents — it is reserved for filled interactive surfaces."
      - "Do not round corners on images, cards, or buttons; the 0px radius is a deliberate editorial choice."
      - "Do not exceed 62px for headlines or drop below 15px for text — the scale is intentionally narrow."
      - "Do not center-align body paragraphs; ragged-right text aligns with the Swiss editorial baseline."
      - "Do not apply gradients, duotone effects, or color overlays to photography — images are shown as captured."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper | `#ffffff` | Base canvas — the entire page background |"
    info: "| 2 | Slate Iris Surface | `#495472` | Accent card and filled button surface — used sparingly as functional punctuation |"

  elevation:

    info: "The design avoids shadows entirely. Surfaces are separated by hairline borders (1px, #000000 or #2c2222) or by white space alone. Elevation is communicated through z-order and the single accent surface color, not through blur or drop shadow. This keeps the visual language in register with printed editorial design — flat, honest, material."

  imagery:

    info: "Architecture and interior photography is the primary visual content. Shots are full-bleed, uncropped to editorial dimensions, and unstyled — no overlays, no duotone treatments, no rounded corners. The image IS the composition: large-format documentation of built environments (atria, workspaces, public buildings) shown with documentary clarity. People appear as scale figures, not portraits. Color photography is used as-shot — natural light, natural palette. There is no illustration, no iconography beyond simple line glyphs, and no decorative graphics."

  layout:

    asymmetric_two_column_structure: "a fixed left rail (~20% width) holds the logo and vertical navigation, while the right ~80% carries the current page's content. The nav is a flat list of section labels (All stories, Work, News, Exploration, About, Contact) stacked vertically with generous vertical rhythm. The hero is a full-bleed architectural photograph that occupies the right column with no caption or overlay. Page rhythm relies on the 84px section gap and 21px card padding to create breathing room between blocks. The grid is implicitly column-based rather than card-based — images and text blocks align to a vertical column structure rather than a uniform card system."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (primary), #2c2222 (secondary), #b2b4b1 (muted/inactive)"
    - "background: #ffffff"
    - "border: #000000 or #2c2222 (hairline 1px)"
    - "accent surface: #495472 (Slate Iris)"
    - "primary action: #495472 (filled action)"

    example_component_prompts:

    - "*Display Headline*: 62px HelveticaNeue weight 400, line-height 1.00, letter-spacing 0.682px, color #000000, left-aligned, no margin-top, 84px margin-bottom to next element."

    - "*Filled Accent Button*: 15px HelveticaNeue weight 400, letter-spacing 0.165px, color #ffffff on background #495472, padding 21px 21px, border-radius 0, no border, no shadow, inline-block."

    - "*Vertical Sidebar Nav*: Stacked list of links, 17px HelveticaNeue weight 400, 10px row-gap, color #b2b4b1 for inactive items, color #000000 for active item, no bullets, no underlines, left-aligned in a 200px-wide left rail."

    - "*Body Paragraph*: 17px HelveticaNeue-Light, line-height 1.20, letter-spacing 0.187px, color #000000, 21px margin-bottom between paragraphs, left-aligned, ragged right, no max-width."

    - "*Full-Bleed Architectural Image*: Native aspect ratio, no border, border-radius 0, no caption, no overlay, aligned to right column of asymmetric grid, no decorative treatment."

  similar_brands:

    - "**Vitsoe** — Same Swiss-editorial restraint, single accent used sparingly, typography that sits at the baseline with tight line-heights, architectural photography as the primary visual."
    - "**Aesop** — Editorial grid layout with generous whitespace, muted monochrome palette with a single quiet accent, serif-free typographic system that prioritizes content over chrome."
    - "**Frieze** — Gallery-catalogue information architecture with a left-rail section index, large-format unstyled photography, and Helvetica-driven type hierarchy at compressed line-heights."
    - "**Studio Ma** — Architecture studio site with documentary photography, minimal surface decoration, single-typeface system, and a near-monochrome palette with one muted chromatic accent."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-charcoal: #2c2222;
          --color-fossil: #b2b4b1;
          --color-slate-iris: #495472;
        
          /* Typography — Font Families */
          --font-helveticaneue: 'HelveticaNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticaneue-light: 'HelveticaNeue-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 15px;
          --leading-caption: 1.2;
          --tracking-caption: 0.165px;
          --text-body: 17px;
          --leading-body: 1.2;
          --tracking-body: 0.187px;
          --text-subheading: 19px;
          --leading-subheading: 1.15;
          --tracking-subheading: 0.209px;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: 0.231px;
          --text-heading: 30px;
          --leading-heading: 1.1;
          --tracking-heading: 0.33px;
          --text-display: 62px;
          --leading-display: 1;
          --tracking-display: 0.682px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-21: 21px;
          --spacing-42: 42px;
          --spacing-84: 84px;
          --spacing-147: 147px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 84px;
          --card-padding: 21px;
          --element-gap: 21px;
        
          /* Border Radius */
          --radius-md: 4px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-other: 4px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-slate-iris-surface: #495472;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-charcoal: #2c2222;
          --color-fossil: #b2b4b1;
          --color-slate-iris: #495472;
        
          /* Typography */
          --font-helveticaneue: 'HelveticaNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticaneue-light: 'HelveticaNeue-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 15px;
          --leading-caption: 1.2;
          --tracking-caption: 0.165px;
          --text-body: 17px;
          --leading-body: 1.2;
          --tracking-body: 0.187px;
          --text-subheading: 19px;
          --leading-subheading: 1.15;
          --tracking-subheading: 0.209px;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: 0.231px;
          --text-heading: 30px;
          --leading-heading: 1.1;
          --tracking-heading: 0.33px;
          --text-display: 62px;
          --leading-display: 1;
          --tracking-display: 0.682px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-21: 21px;
          --spacing-42: 42px;
          --spacing-84: 84px;
          --spacing-147: 147px;
        
          /* Border Radius */
          --radius-md: 4px;
        }