simon_riisn_s_emmen___style_reference:
  info: "> Word-shaped confetti on white paper"

  theme: "light"

  info: "A studio portfolio that treats the page as a poster: a white canvas, two oversized word-shaped color blocks (coral and chartreuse), and a list of projects pinned beneath hairline rules. The visual logic is anti-UI — there are no buttons, no cards, no component grids. Type does the heavy lifting at 67px and 173px, set tight (-0.015em) in a single humanist sans-serif. Every structural line is a 1px black border; every accent surface is a 720px-radius pill that functions as a typographic container rather than a button. The mood is editorial, restrained, and slightly playful — the bold color appears only when a word needs to become an object."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Press Black | `#000000` | `--color-press-black` | All text, hairlines, list dividers, and the 1px structural borders that organize the page |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas and the surface beneath the accent pills |"
    info: "| Coral Slip | `#fd8878` | `--color-coral-slip` | Primary accent pill surface — wraps the first word-block. Warm pink against black ink keeps it readable at 9:1 contrast |"
    info: "| Chartreuse Strike | `#e8fe04` | `--color-chartreuse-strike` | Secondary accent pill surface — wraps the second word-block. The highest-contrast fill on the page at 18.6:1 with black text |"

  tokens___typography:

    tex_gyre_heros___the_single_workhorse_typeface___used_for_body_copy__the_67px_list_headings__the_173px_word_block_type__and_footer_micro_copy__tight_tracking_at__0_015em_across_all_sizes__0_90_line_height_on_the_173px_display_creates_word_shaped_letterforms_that_nearly_touch_the_pill_edges____font_tex_gyre_heros:
      - "**Substitute:** Inter, Söhne, or Neue Haas Grotesk — any humanist grotesque with a clean aperture"
      - "**Weights:** 300, 400"
      - "**Sizes:** 29px / 32px / 67px / 173px"
      - "**Line height:** 0.90 (display) / 1.20 (body)"
      - "**Letter spacing:** -0.015em at all sizes (≈-0.45px at 29px, ≈-2.6px at 173px)"
      - "**Role:** The single workhorse typeface — used for body copy, the 67px list headings, the 173px word-block type, and footer micro-copy. Tight tracking at -0.015em across all sizes; 0.90 line-height on the 173px display creates word-shaped letterforms that nearly touch the pill edges"

    editorial_new___reserved_for_the_top_navigation_row__simon_com___studio_for_computational_design___about___words__a_serif_editing_companion_that_signals_the_studio_s_editorial_identity_without_competing_with_the_display_sans____font_editorial_new:
      - "**Substitute:** GT Sectra, Tiempos Text, or Source Serif Pro"
      - "**Weights:** 400"
      - "**Sizes:** 29px"
      - "**Line height:** 1.10–1.44"
      - "**Role:** Reserved for the top navigation row ('Simon.com', 'Studio for computational design', 'About', 'Words'). A serif/editing companion that signals the studio's editorial identity without competing with the display sans"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 29px | 1.2 | -0.45px | `--text-body` |"
      info: "| body-sm | 32px | 1.2 | -0.48px | `--text-body-sm` |"
      info: "| heading | 67px | 1.2 | -1.01px | `--text-heading` |"
      info: "| display | 173px | 0.9 | -2.6px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 63 | 63px | `--spacing-63` |"
      info: "| 95 | 95px | `--spacing-95` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| buttons | 0px |"
      info: "| word-blocks | 720px |"

    layout:

      - "**Section gap:** 95px"
      - "**Card padding:** 32px"
      - "**Element gap:** 6px"

  components:

    word_block_pill_coral:
      role: "Primary display surface that contains a single word"

      info: "Full-width or near-full-width rounded block, 720px border-radius (effectively a capsule), filled with #fd8878 Coral Slip. Internal padding ~95px top/bottom, ~63px left. Text: Tex Gyre Heros weight 300, 173px, line-height 0.9, color #000000, letter-spacing -2.6px. Word sits centered both axes."

    word_block_pill_chartreuse:
      role: "Secondary display surface that contains a single word"

      info: "Identical geometry to the coral word-block but filled with #e8fe04 Chartreuse Strike. Same 173px type, same 0.9 line-height, same 720px radius. The two pills are designed to be stacked or alternated with no gap."

    top_navigation_bar:
      role: "Minimal header with brand, descriptor, and two links"

      three_part_layout: "'Simon.com' flush left, 'Studio for computational design' centered, 'About  Words' flush right. Editorial New 29px, weight 400, color #000000. Separated from the hero by a 1px black hairline (#000000) running the full page width. No background fill — sits on Paper White."

    project_index_row:
      role: "Compact three-column list item in the project table"

      three_equally_spaced_columns: "two-digit number (01–09), project name, year. Tex Gyre Heros weight 400, 32px, line-height 1.2, color #000000, letter-spacing -0.48px. Left and right columns are right-aligned to the page edges; center column (project name) is left-aligned. Rows are separated by hairline 1px black borders."

    hairline_divider:
      role: "The only structural line element on the page"

      info: "1px solid #000000, full page width. Used exactly twice: beneath the nav bar and above the project index. No other dividers exist — the page relies on whitespace and type scale for rhythm."

    footer_micro_copy:
      role: "Closing text at the page bottom"

      info: "Tex Gyre Heros weight 300, 29px, line-height 1.2, color #000000, letter-spacing -0.45px. Matches body text exactly but distinguished by lighter weight and conversational tone."

  do_s_and_don_ts:

    do:
      - "Use exactly two accent surface colors — #fd8878 Coral Slip and #e8fe04 Chartreuse Strike — and treat them as full-pill containers, never as small swatches or borders"
      - "Set all type in Tex Gyre Heros at the four extracted sizes (29 / 32 / 67 / 173px) with -0.015em tracking; do not interpolate intermediate sizes"
      - "Reserve the 720px border-radius exclusively for the word-block pills; all other elements must be sharp-cornered (0px radius)"
      - "Separate structural sections with 1px #000000 full-width hairlines only — never use background-color bands or shadows to create division"
      - "Let display text at 173px use a 0.90 line-height so word-shapes fill the pill vertically with minimal internal padding"
      - "Use Editorial New only for the top navigation row at 29px; do not use it for body, headings, or display"
      - "Let the page breathe with 95px+ vertical padding on hero sections and 253px below the project list — density lives in the type, not the spacing"

    don_t:
      - "Do not introduce shadows, gradients, or any elevation effect — the system is completely flat"
      - "Do not add a third accent color or introduce a neutral gray; the palette is binary (black, white) plus two accent pills"
      - "Do not round corners on anything other than the word-block pills — cards, buttons, tags, and inputs must be 0px radius"
      - "Do not set type in italic, underline, or any decorative style; weight 300 vs 400 is the only typographic contrast"
      - "Do not center-align the project index rows — numbers and years are flush to the page edges, names are left-aligned to the content margin"
      - "Do not add hover states, transitions, or interactive color shifts — the system has no motion philosophy"
      - "Do not break the hairline structure by adding background fills behind sections; Paper White must show through everywhere except the two accent pills"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Full-bleed page background |"
    info: "| 1 | Coral Field | `#fd8878` | Primary word-block accent surface |"
    info: "| 2 | Chartreuse Field | `#e8fe04` | Secondary word-block accent surface |"

  imagery:

    info: "No photography, no illustration, no product imagery, no icons. The page is pure typography and color — the word-block pills function as the visual content themselves, treating language as image. Accent colors are used as full-surface fills, not as decorative dots or icon tints."

  layout:

    info: "Full-bleed single-column composition with no max-width container. The page reads top-to-bottom as: 1) hairline-bordered nav strip, 2) two stacked full-width word-block pills (coral, then chartreuse) separated by white paper showing through, 3) a large vertical white gap, 4) a full-width project index with three columns (number / name / year) extending below the fold. The left edge of the project list aligns to ~63px (the same left padding as the word-block pills), creating a single vertical content margin that ties the page together. No sidebar, no grid system, no card layout — the only structural element is the pair of 1px black hairlines."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000"
    - "accent 1 (coral pill): #fd8878"
    - "accent 2 (chartreuse pill): #e8fe04"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    - "**Word-block pill (coral)**: Full-width block, #fd8878 background, 720px border-radius. Text: 'Words' set in Tex Gyre Heros weight 300, 173px, line-height 0.9, color #000000, letter-spacing -2.6px. Internal padding 95px top/bottom, 63px left. Word centered both axes."

    - "**Word-block pill (chartreuse)**: Full-width block, #e8fe04 background, 720px border-radius. Text: 'Designed' set in Tex Gyre Heros weight 300, 173px, line-height 0.9, color #000000, letter-spacing -2.6px. Internal padding 95px top/bottom, 63px left. Stacked directly below the coral pill with no gap."

    - "**Top navigation bar**: Three-part layout on #ffffff background. Left: 'Simon.com' in Editorial New 29px weight 400, color #000000. Center: 'Studio for computational design' same style. Right: 'About  Words' same style. 1px solid #000000 hairline border-bottom across the full width."

    - "**Project index row**: Three columns. Left: '01' in Tex Gyre Heros 32px weight 400, #000000, right-aligned to page edge. Center: 'Make with Nation' same style, left-aligned. Right: '2025' same style, right-aligned. 1px solid #000000 border-bottom. Row height follows 1.2 line-height."

    - "**Page section divider**: Full-width 1px solid #000000 line on #ffffff background. No padding above or below — adjacent content sits flush."

  similar_brands:

    - "**Pentagram partner sites (e.g. Harry Pearce, Michael Bierut)** — Same poster-as-page logic with oversized display type on a white field and a hairline-ruled project list beneath"
    - "**Werkplaats Typografie** — Editorial school identity — white canvas, bold type-only compositions, and a numbered project archive treated as primary navigation"
    - "**Stefan Sagmeister's site** — Word-as-image treatment where a single oversized word becomes the entire visual block, often on a flat color field"
    - "**Manual studio (manual.to)** — Ultra-minimal portfolio with flat color blocks, tight humanist sans-serif, and a ruled index of work"
    - "**It's Nice That** — Compact editorial list layout with number / title / year columns under a hairline header"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-press-black: #000000;
          --color-paper-white: #ffffff;
          --color-coral-slip: #fd8878;
          --color-chartreuse-strike: #e8fe04;
        
          /* Typography — Font Families */
          --font-tex-gyre-heros: 'Tex Gyre Heros', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-editorial-new: 'Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 29px;
          --leading-body: 1.2;
          --tracking-body: -0.45px;
          --text-body-sm: 32px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.48px;
          --text-heading: 67px;
          --leading-heading: 1.2;
          --tracking-heading: -1.01px;
          --text-display: 173px;
          --leading-display: 0.9;
          --tracking-display: -2.6px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-13: 13px;
          --spacing-32: 32px;
          --spacing-63: 63px;
          --spacing-95: 95px;
        
          /* Layout */
          --section-gap: 95px;
          --card-padding: 32px;
          --element-gap: 6px;
        
          /* Border Radius */
          --radius-full: 720px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-buttons: 0px;
          --radius-word-blocks: 720px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-coral-field: #fd8878;
          --surface-chartreuse-field: #e8fe04;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-press-black: #000000;
          --color-paper-white: #ffffff;
          --color-coral-slip: #fd8878;
          --color-chartreuse-strike: #e8fe04;
        
          /* Typography */
          --font-tex-gyre-heros: 'Tex Gyre Heros', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-editorial-new: 'Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 29px;
          --leading-body: 1.2;
          --tracking-body: -0.45px;
          --text-body-sm: 32px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.48px;
          --text-heading: 67px;
          --leading-heading: 1.2;
          --tracking-heading: -1.01px;
          --text-display: 173px;
          --leading-display: 0.9;
          --tracking-display: -2.6px;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-13: 13px;
          --spacing-32: 32px;
          --spacing-63: 63px;
          --spacing-95: 95px;
        
          /* Border Radius */
          --radius-full: 720px;
        }