henry___style_reference:
  info: "> Gothic broadside poster on warm cream paper. One hundred percent monochrome, no chromatic accent, all visual intensity carried by display type and full-bleed paper-to-ink inversions."

  theme: "mixed"

  info: "Henry Codes reads like an editorial broadside printed in warm ink: near-black headlines carved into cream paper, alternating with full-bleed dark sections where cream serif type glows. The palette is one-hundred-percent warm monochrome — no chromatic accent, no product color, no blue link — every visual move comes from scale, weight, and inversion. Type is the brand: a display serif (Louize) sets poetry and editorial prose, a condensed display sans (Manuka) stamps section headers at 200–370px, and a neo-grotesque (Neue Montreal) carries all UI at 12–24px. The spacing system is austere: 4–32px increments, one radius (12px), no shadows. Sections flip between paper and ink like a broadsheet newspaper, and most screens should be dominated by two or three enormous words rather than illustrated product art."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper | `#fafafa` | `--color-paper` | Page background, card surfaces, inverted-section type — the cream-white ground that all dark type sits on |"
    info: "| Hairline | `#eeeeee` | `--color-hairline` | Card and tile borders — only visible against Paper |"
    info: "| Midstone | `#9f9f9f` | `--color-midstone` | Nav borders, muted borders, light decorative borders on dark sections |"
    info: "| Ash | `#666666` | `--color-ash` | Secondary borders, muted UI text, low-emphasis dividers |"
    info: "| Pebble | `#b3b3b3` | `--color-pebble` | Inactive nav text and borders |"
    info: "| Sepia | `#3e3b36` | `--color-sepia` | Strong borders, secondary heading text — the warm-brown near-black that flanks Headline Ink |"
    info: "| Headline Ink | `#2a2722` | `--color-headline-ink` | Primary text, body ink, dominant borders, nav rules — warm near-black that carries every word on the page |"

  tokens___typography:

    neue_montreal___all_ui__body__nav__and_small_labels_at_12_32px__weight_400_for_body__700_for_nav_items_and_labels___0_01em_tracking_is_hairline_tight_even_at_body_sizes___the_type_is_condensed__not_airy____font_neue_montreal:
      - "**Substitute:** Inter, Söhne, General Sans"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12px, 16px, 20px, 24px, 32px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** -0.01em across all sizes"
      - "**Role:** All UI, body, nav, and small labels at 12–32px. Weight 400 for body, 700 for nav items and labels. -0.01em tracking is hairline-tight even at body sizes — the type is condensed, not airy"

    louize_display___editorial_display_serif_for_headlines__section_titles__and_the_centered_prose_blocks_in_dark_sections__the_high_contrast__narrow_serif_italics_mixed_with_the_roman_create_the_broadside_feel__77px_is_the_standard_section_hero__116_132px_is_the_marquee_headline____font_louize_display:
      - "**Substitute:** Fraunces, GT Sectra, Lyon Display"
      - "**Weights:** 400"
      - "**Sizes:** 32px, 35px, 77px, 116px, 126px, 132px"
      - "**Line height:** 0.80–1.20"
      - "**Role:** Editorial display serif for headlines, section titles, and the centered prose blocks in dark sections. The high-contrast, narrow-serif italics mixed with the roman create the broadside feel. 77px is the standard section hero, 116–132px is the marquee headline"

    louize___secondary_serif_for_short_editorial_copy_and_link_text_alongside_louize_display____font_louize:
      - "**Substitute:** Fraunces, GT Sectra"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 20px, 24px"
      - "**Line height:** 1.20–1.30"
      - "**Letter spacing:** -0.0100em"
      - "**Role:** Secondary serif for short editorial copy and link text alongside Louize Display"

    manuka___ultra_condensed_display_sans_stamped_at_near_architectural_scale_226_371px_for_section_mastheads_like_selected_works__0_75_line_height_locks_the_glyphs_into_a_tight_horizontal_slab_that_spans_edge_to_edge__only_ever_used_white_on_ink_or_ink_on_paper__always_in_one_weight__always_uppercase____font_manuka:
      - "**Substitute:** Druk, Condor, Antonio"
      - "**Weights:** 400"
      - "**Sizes:** 226px, 371px"
      - "**Line height:** 0.75–0.80"
      - "**Role:** Ultra-condensed display sans stamped at near-architectural scale (226–371px) for section mastheads like SELECTED WORKS. 0.75 line-height locks the glyphs into a tight horizontal slab that spans edge-to-edge. Only ever used white-on-ink or ink-on-paper, always in one weight, always uppercase"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.12px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.1 | -0.32px | `--text-heading` |"
      info: "| heading-lg | 77px | 0.9 | — | `--text-heading-lg` |"
      info: "| display | 132px | 0.8 | — | `--text-display` |"
      info: "| display-xl | 371px | 0.75 | — | `--text-display-xl` |"

  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: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 224 | 224px | `--spacing-224` |"

    border_radius:

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

    layout:

      - "**Section gap:** 64-96px"
      - "**Card padding:** 16px"
      - "**Element gap:** 16px"

  components:

    masthead_display_headline:
      role: "Hero and section-defining typography"

      info: "Louize Display at 116–132px, weight 400, line-height 0.8, color #2a2722 on Paper or #fafafa on Ink. Sometimes intersected with an italic Louize Display phrase at half size set inside the same baseline (e.g. 'of the' italic at 35px set within 'TRUE TERRORS / NEW DARK WEB' at 132px). No tracking, no all-caps, relies on the serif contrast for presence."

    stamped_display_section_header:
      role: "Full-bleed section titles on dark inverted bands"

      info: "Manuka at 226–371px, weight 400, line-height 0.75, uppercase, color #fafafa on #2a2722. Stretches edge-to-edge with a trailing em-dash or rule. Single-weight, single-color — the slab of condensed type is the entire section identity."

    top_ticker_banner:
      role: "Full-bleed announcement strip above the masthead"

      info: "Neue Montreal 12px, weight 400, letter-spacing -0.12px, color #2a2722, set in uppercase on Paper. Optional horizontal hairline dividers in #2a2722 at 1px above and below. Padding 4–6px vertical, full-bleed."

    inverted_editorial_letter:
      role: "Centered prose block on a full-bleed dark section"

      info: "Background #2a2722, padding 48–64px vertical, full-bleed. Body text in Louize Display at 32px, weight 400, line-height 1.2, color #fafafa, text-align center. Optional small-caps eyebrow at top and bottom ('A BRIEF LETTER FROM THE EDITOR', 'A LETTER FROM THE WORK DESK') in Neue Montreal 12px, weight 400, letter-spacing -0.12px, color #fafafa, opacity 0.6."

    nav_link_uppercase:
      role: "Top-of-page navigation items"

      info: "Neue Montreal 12–16px, weight 700, uppercase, color #2a2722, letter-spacing -0.12px. No underline, no background. Active state shares the same color but is set in a larger size (16–20px) — emphasis comes from scale, not color or weight shift."

    section_divider_rule:
      role: "Horizontal separation between editorial sections"

      info: "1px solid #2a2722, full-bleed width, no margin. Used as a typographic break, never decorative."

    brand_ticker_strip:
      role: "Recurring brand names in a horizontally repeated marquee band"

      info: "Full-bleed dark band (#2a2722). Brand names in Louize Display at 24–32px, weight 400, color #fafafa, repeated horizontally with tight gap. Interleaved with a small 'COMING SOON' tag (Neue Montreal 12px, weight 400, uppercase, #fafafa, 12px radius, 4px 8px padding, 1px border #fafafa)."

    coming_soon_tag:
      role: "Status pill overlaid on a brand ticker entry"

      info: "Neue Montreal 12px, weight 400, uppercase, color #fafafa, 1px solid #fafafa border, 12px radius, padding 4px 8px. No background fill — outlined ghost variant only."

    coordinate_footer:
      role: "Small monospaced-feel footer line"

      info: "Neue Montreal 12px, weight 400, letter-spacing -0.12px, color #2a2722, single-line format '° 43°31'56\" N 104° 58' 0.94\" (DENVER, COLORADO) — 11:27 PM — ● 48°9 @ N 39°43'31'56\" W 104°58' 0.94\" (DENVER, COLOR...'. Uppercase with em-dash separators."

    hero_halftone_plate:
      role: "Right-side illustration block in the hero"

      info: "Full-height image area (~60% of hero width), no border-radius (square corners), monochrome halftone illustration in Headline Ink on Paper. Functions as typographic counterweight to the display headline — no caption, no label."

    footnotes___meta_line:
      role: "Small all-caps caption beneath a major work"

      info: "Neue Montreal 12px, weight 400, uppercase, letter-spacing -0.12px, color #2a2722. Used for 'READ THE CASE STUDY ON GODCOMMON.COM'-style attribution lines."

  do_s_and_don_ts:

    do:
      - "Use Louize Display at 77px+ for any section-defining headline; below that, the editorial feel collapses into generic web type"
      - "Set body and UI type in Neue Montreal at 12/16/20/24/32px with -0.01em letter-spacing — never let body text breathe wider than 1.5 line-height"
      - "Alternate Paper (#fafafa) and Ink (#2a2722) sections as full-bleed bands; never gradient-blend between them, never place a card that crosses the boundary"
      - "Use 12px as the only border-radius across cards, buttons, and tags — no square corners, no pill shapes (no 9999px)"
      - "Carry all display typography in #2a2722 on Paper or #fafafa on Ink — no third surface color, no shadowed cards, no tinted panels"
      - "Use Manuka only for the largest section mastheads (226–371px) and always in one weight, one case, one color — the type does the work alone"
      - "Let 90% of any page be empty Paper or Ink; dense regions are limited to the brand ticker and the bottom-byline"

    don_t:
      - "Never introduce a chromatic accent color — the system is one-hundred-percent warm monochrome, and any blue/red/green breaks the broadside identity"
      - "Never use a filled colored CTA button — the role evidence shows zero action backgrounds; emphasis comes from scale and inversion, not fill"
      - "Never apply box-shadow, drop-shadow, or glow — there are no detected shadows and adding them turns the editorial print feel into generic SaaS card UI"
      - "Never set body copy in Louize Display at 116–132px; the display serif is for headlines only and becomes illegible below 32px on long passages"
      - "Never use a border-radius other than 12px; no sharp 0px, no pills, no asymmetric rounding"
      - "Never break the Paper/Ink binary with a gray panel, a muted surface, or a tinted hero gradient — those don't exist in the token set"
      - "Never center-align body copy in Neue Montreal; only Louize Display/Louize editorial blocks use center alignment, and only inside Ink sections"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper | `#fafafa` | Page canvas — cream-white ground |"
    info: "| 2 | Ink | `#2a2722` | Full-bleed dark sections where cream serif type is set inverted |"

  elevation:

    info: "The system is shadowless by design. There are zero detected box-shadows, drop-shadows, or elevation tokens. Hierarchy is communicated entirely through type scale, color inversion, and 1px hairline borders — never through depth. This is an editorial print metaphor, not a Material/iOS elevation model: the page lies flat on the paper surface, and dark sections are achieved by flipping the canvas to ink, not by floating panels above it."

  imagery:

    info: "Imagery is treated as monochrome halftone illustration only — no photography, no product screenshots, no gradients, no color images. The hero uses a square right-side plate showing a black butterfly/moth creature in halftone dots against the cream paper. All imagery is high-contrast black-on-white or white-on-black, sharp square corners, no rounded masks, no overlap with type. Illustrations function as typographic counterweights inside a paper/ink composition rather than as standalone visuals. Iconography is absent from the interface — no system icons, no nav icons, no UI pictograms. Social proof and client logos are rendered as Louize Display wordmarks inside a dark ticker band rather than as image files."

  layout:

    info: "Layout is full-bleed editorial — no max-width container, no sidebar, no card grid in the traditional sense. The page stacks as a sequence of horizontally-bleed sections that alternate Paper and Ink bands. The hero is a split composition: oversized Louize Display headline occupies the left two-thirds with no padding constraint, and a square halftone illustration block anchors the right third. Subsequent sections are centered single-column editorial blocks (the inverted letter) or horizontally-tickered marquee bands. Navigation is a minimal top-left list of uppercase items with no background bar. The page model is zine/broadsheet, not SaaS dashboard: vertical rhythm is loose (64–96px between sections) but each section is internally dense with type. No grids of feature cards, no pricing tables, no comparison blocks — content is delivered as long-form editorial prose and a single works ticker."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #2a2722 (Headline Ink) on #fafafa (Paper)"
    - "background: #fafafa (Paper) for default, #2a2722 (Ink) for inverted sections"
    - "border: #2a2722 for strong rules, #9f9f9f for muted, #eeeeee for hairline on cards"
    - "accent: none (system is fully monochrome)"
    - "primary action: no distinct CTA color"

    info: "3-5 Example Component Prompts:"
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."
    - "Create an inverted editorial section: full-bleed #2a2722 background, padding 64px vertical. Eyebrow 'A BRIEF LETTER FROM THE EDITOR' in Neue Montreal 12px weight 400 uppercase letter-spacing -0.12px color #fafafa centered at top. Body in Louize Display 32px weight 400 line-height 1.2 color #fafafa text-align center, 3–5 short lines. Mirror eyebrow at bottom."
    - "Create a stamped section header: full-bleed #2a2722 background, padding 48px vertical. Single line 'SELECTED WORKS' in Manuka 226px weight 400 line-height 0.75 color #fafafa uppercase, with a trailing horizontal white rule extending to the right edge."
    - "Create a brand ticker band: full-bleed #2a2722 background, no padding. Louize Display 24px weight 400 color #fafafa brand names ('Stripe', 'YouTube', 'The New York Times', 'Matter', 'Uber Eats x Taco Bell') repeated horizontally at 32px gap, one row. Overlay a 'COMING SOON' ghost tag (Neue Montreal 12px weight 400 uppercase, 1px solid #fafafa border, 12px radius, 4px 8px padding) on selected entries."
    - "Create a top nav: Paper (#fafafa) background, no bar. Left-aligned vertical list of Neue Montreal 12px weight 700 uppercase items in #2a2722, 12px row gap. Active item rendered larger (16px) but same color/weight. No underline, no background highlight."

  similar_brands:

    - "**Pentagram** — Same editorial-broadsheet approach: display serif headlines, paper-white canvas, zero chromatic accent, type as the only visual asset"
    - "**Manual (manualcreative.com)** — Same condensed display sans (Druk/Manuka-family) stamped at near-architectural scale for section mastheads, same warm-paper monochrome palette"
    - "**Locomotive (locomotive.ca)** — Same oversized display-serif hero with italic inline subhead treatment, same full-bleed alternating light/dark editorial bands"
    - "**Cereal magazine** — Same print-magazine metaphor: cream paper, warm near-black ink, serif display for headlines, no shadows, one radius (12px), zero color accent"
    - "**Rauno Freiberg** — Same brutalist personal-portfolio instinct: type-only hero, monochrome palette, no CTAs, no product art, the design IS the work"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper: #fafafa;
          --color-hairline: #eeeeee;
          --color-midstone: #9f9f9f;
          --color-ash: #666666;
          --color-pebble: #b3b3b3;
          --color-sepia: #3e3b36;
          --color-headline-ink: #2a2722;
        
          /* Typography — Font Families */
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-louize-display: 'Louize Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-louize: 'Louize', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-manuka: 'Manuka', 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.12px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.32px;
          --text-heading-lg: 77px;
          --leading-heading-lg: 0.9;
          --text-display: 132px;
          --leading-display: 0.8;
          --text-display-xl: 371px;
          --leading-display-xl: 0.75;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --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-64: 64px;
          --spacing-80: 80px;
          --spacing-224: 224px;
        
          /* Layout */
          --section-gap: 64-96px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-xl: 12px;
        
          /* Named Radii */
          --radius-tags: 12px;
          --radius-cards: 12px;
          --radius-buttons: 12px;
        
          /* Surfaces */
          --surface-paper: #fafafa;
          --surface-ink: #2a2722;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper: #fafafa;
          --color-hairline: #eeeeee;
          --color-midstone: #9f9f9f;
          --color-ash: #666666;
          --color-pebble: #b3b3b3;
          --color-sepia: #3e3b36;
          --color-headline-ink: #2a2722;
        
          /* Typography */
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-louize-display: 'Louize Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-louize: 'Louize', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-manuka: 'Manuka', 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.12px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.32px;
          --text-heading-lg: 77px;
          --leading-heading-lg: 0.9;
          --text-display: 132px;
          --leading-display: 0.8;
          --text-display-xl: 371px;
          --leading-display-xl: 0.75;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-224: 224px;
        
          /* Border Radius */
          --radius-xl: 12px;
        }