jonas_pelzer___style_reference:
  info: "> Literary broadsheet on white paper. A single weight-400 display headline sets the tone — roman and italic interleave in one breath, all type shares one weight, and a rationed violet ink punctuates an otherwise achromatic page."

  theme: "light"

  info: "A literary editorial portfolio rendered as a typographic broadsheet on white paper. The page reads like a magazine spread: a single weight-400 display headline mixes roman and italic to create rhythm without resorting to bold, every paragraph earns its place, and the entire chromatic system is reduced to a single violet ink. The brand violet (#3502ff) is rationed — appearing only as the active nav pill, an active border accent, and a single deep text link — while a softer lavender wash (#c2b3ff) provides surface variety on accent cards. Spacing is compact and the grid is opinionated, with hard-edged 12px radii everywhere and almost no shadow depth. The visual system rewards restraint: negative space, type weight, and a single accent color do the work that color, elevation, and decoration do elsewhere."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, nav backgrounds |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | All text, hairline borders, dividers, list separators |"
    info: "| Mist Gray | `#d4d6dd` | `--color-mist-gray` | Secondary borders, card outlines, inactive dividers |"
    info: "| Violet Ink | `#3502ff` | `--color-violet-ink` | Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |"
    info: "| Lavender Wash | `#c2b3ff` | `--color-lavender-wash` | Accent card surfaces, large decorative blocks, soft section backgrounds |"
    info: "| Lavender Whisper | `#d7ccff` | `--color-lavender-whisper` | Outlined nav pill border, ghost button border — violet at a quarter saturation so inactive actions whisper rather than shout |"
    info: "| Deep Iris | `#5d35ff` | `--color-deep-iris` | Violet text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |"

  tokens___typography:

    scope___display__headings__nav__buttons___carries_the_entire_structural_and_interactive_voice__only_weight_400_exists__the_font_does_not_push_louder__it_stays_calm_even_at_42px_because_letter_spacing_opens_up_around_it__nav_and_buttons_stay_at_13_14px__the_hero_display_reaches_42px_____font_scope:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 400"
      - "**Sizes:** 13px, 14px, 17px, 22px, 42px"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** 0.02em at 17–22px, 0.036em at 13–14px"
      - "**OpenType features:** `\"ss01\" on, \"cv01\" on, \"tnum\" on`"
      - "**Role:** Display, headings, nav, buttons — carries the entire structural and interactive voice. Only weight 400 exists; the font does not push louder, it stays calm even at 42px because letter-spacing opens up around it. Nav and buttons stay at 13–14px; the hero display reaches 42px."

    signifier___body_copy__links__list_items__footer__long_form_paragraphs___the_reading_voice__slightly_larger_minimum_15px_than_scope_at_13px__and_the_only_font_that_appears_in_the_hero_italic_the_headline_mixes_roman_scope_with_italic_signifier__rationed_at_400__weight_400_at_42px_is_an_editorial_choice__not_a_limitation_____font_signifier:
      - "**Substitute:** Source Serif Pro, Tiempos Text, Söhne Mono"
      - "**Weights:** 400"
      - "**Sizes:** 15px, 16px, 18px, 22px, 25px, 42px"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** 0.02em"
      - "**OpenType features:** `\"kern\" on, \"liga\" on, \"onum\" on`"
      - "**Role:** Body copy, links, list items, footer, long-form paragraphs — the reading voice. Slightly larger minimum (15px) than Scope at 13px, and the only font that appears in the hero italic (the headline mixes roman Scope with italic Signifier). Rationed at 400; weight 400 at 42px is an editorial choice, not a limitation."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.2 | 0.47px | `--text-caption` |"
      info: "| body-sm | 15px | 1.2 | 0.3px | `--text-body-sm` |"
      info: "| body | 17px | 1.2 | 0.34px | `--text-body` |"
      info: "| subheading | 22px | 1.1 | 0.44px | `--text-subheading` |"
      info: "| heading | 25px | 1.1 | 0.5px | `--text-heading` |"
      info: "| display | 42px | 1 | 0.84px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 12px |"
      info: "| cards | 12px |"
      info: "| small | 3.5px |"
      info: "| buttons | 12px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(53, 2, 255, 0.1) 0px 1px 4px 2px` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1400px"
      - "**Section gap:** 64px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    editorial_display_headline:
      role: "Hero section typographic statement"

      info: "42px Scope weight 400 in roman and italic alternation within a single sentence, letter-spacing 0.02em, color Ink Black on Paper White. The signature move: words like 'is a' and 'for' and 'and' drop to italic Signifier while content words stay roman Scope. Left-aligned, never centered. Padding 20px below to first paragraph."

    active_nav_pill:
      role: "Current page indicator in nav strip"

      info: "12px radius, fill #3502ff (Violet Ink), text 13px Scope weight 400, color #ffffff, padding 6px 14px, letter-spacing 0.036em. The single bold chromatic element on the page; it earns its color by marking where the user is."

    inactive_nav_pill:
      role: "Secondary nav item"

      info: "12px radius, transparent fill, 1px border #d7ccff (Lavender Whisper), text 13px Scope weight 400 in Ink Black, padding 6px 14px, letter-spacing 0.036em. Ghost outlined — quiet, recedes behind the active pill."

    project_card_white:
      role: "Default project entry card"

      info: "12px radius, #ffffff fill, 1px hairline border in Mist Gray (#d4d6dd), 16px padding. Project image fills top, title and meta in Signifier 15–16px Ink Black. No shadow; the border does the elevation."

    project_card_lavender_fill:
      role: "Accent surface card, featured grid slot"

      info: "12px radius, solid #c2b3ff (Lavender Wash) fill, no border, 16px padding. Functions as a color block in the grid — same dimensions as white cards but inverted into a decorative accent. Use sparingly: one per row maximum."

    body_paragraph:
      role: "Hero description, long-form copy"

      info: "Signifier 17–18px weight 400, line-height 1.2, letter-spacing 0.02em, Ink Black on Paper White. Centered or left-aligned in a ~640px column. No bold, no italic emphasis inline — emphasis comes from the surrounding type hierarchy, not weight."

    feature_card_magazine_layout:
      role: "Large project showcase with typography and image grid"

      info: "12px radius, white surface with hairline Mist Gray border, internal layout: oversized dotted/display title (Scope 25–42px), body subhead in Signifier, 2×2 image thumbnail grid below. Treats the project as a magazine spread rather than a tile."

    year_index_list:
      role: "Chronological project timeline in footer"

      info: "Horizontal row of 2-digit year labels (01, 02, 03 … 09), each 14px Scope weight 400, letter-spacing 0.036em, Ink Black, separated by 16px gaps. The current year highlights in Violet Ink. Functions as both navigation and archive."

    footer_link_group:
      role: "Social and contact links"

      info: "Inline group of 11–15px Signifier links, 15px padding-right between items, Ink Black, 1px hairline divider above. Links transition to Deep Iris (#5d35ff) on hover — the only place Deep Iris appears."

    inline_text_link:
      role: "Inline reference links within body copy"

      info: "Signifier at body size, Ink Black with 1px underline, 15px padding-right when grouped. Underline is the only link treatment — no color shift in resting state; color arrives on hover via Deep Iris."

  do_s_and_don_ts:

    do:
      - "Set every text element to weight 400 — no bold, no semi-bold. Hierarchy comes from size and letter-spacing, never weight."
      - "Use Violet Ink (#3502ff) only for the active nav pill and one primary brand mark per page. Never as a button background fill on other surfaces."
      - "Pair Scope (sans) for headings/nav with Signifier (serif/italic) for body — and mix roman and italic within a single display sentence to create typographic music."
      - "Apply 12px radius to every interactive element: nav pills, buttons, cards. The consistency is the design."
      - "Set all text on Paper White (#ffffff) and use Lavender Wash (#c2b3ff) only for full-bleed accent card fills, never as a text background or row striping."
      - "Use 1px hairline borders (Mist Gray #d4d6dd or Ink Black #000000) instead of shadows for separation. The one permitted shadow is the violet-tinted rgba(53,2,255,0.1) on active nav."
      - "Keep section gaps at 64px and let the page breathe with generous left/right margins — the compact padding applies inside components, not between them."

    don_t:
      - "Don't introduce any weight other than 400. No 500, 600, 700. The system has one voice."
      - "Don't use Violet Ink (#3502ff) as a filled button background for general CTAs — the active nav pill is the only place that fill appears."
      - "Don't add drop shadows beyond the single violet-tinted nav shadow. Cards and panels must rely on hairline borders for definition."
      - "Don't center the hero headline. It is always left-aligned, magazine-style. Centering kills the editorial voice."
      - "Don't use rounded radii above 12px. The page is crisp and architectural, not soft or playful."
      - "Don't introduce additional accent colors. The palette is black, white, gray, and three violets — that is the entire chromatic vocabulary."
      - "Don't use negative letter-spacing. All type uses positive tracking (0.02em–0.036em); tight tracking belongs to a different design system."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Default page background, primary content canvas |"
    info: "| 1 | Lavender Block | `#c2b3ff` | Accent card surface, decorative color blocks, featured item wash |"
    info: "| 2 | Ink Ground | `#000000` | Footer band, nav strip — dark reverse for terminal UI |"

  elevation:

    - "**Active Nav Pill:** `rgba(53, 2, 255, 0.1) 0px 1px 4px 2px`"

  imagery:

    imagery_is_project_driven_and_editorial: "architectural and product photography, mostly daytime and natural-light, presented as tight crops without lifestyle context. The featured project card arranges images in a 2×2 grid like a magazine layout. A yellow accent block appears in one section (likely a project hero), and lavender blocks serve as decorative color washes rather than image containers. The page is text-dominant overall — images support the work, they don't replace it."

  layout:

    info: "Page model is max-width contained (~1400px), left-aligned editorial rather than centered marketing. The hero is a typographic block on the left, not a full-bleed image or split layout. Below the hero, a 3-column grid mixes white project cards with lavender accent blocks — at least one lavender fill per row creates visual rhythm. Sections are separated by generous 64px gaps on Paper White. The nav strip is a horizontal pill row at the page bottom (not the top), with the active pill filled violet and the rest ghost-outlined. A year index (01–09) and social footer close the page. No sidebar, no sticky header, no mega-menu — the structure is closer to a print layout than a web app."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (Ink Black)"
    - "background: #ffffff (Paper White)"
    - "border: #d4d6dd (Mist Gray) for secondary, #000000 for structural"
    - "accent surface: #c2b3ff (Lavender Wash)"
    - "accent border (ghost): #d7ccff (Lavender Whisper)"
    - "primary action: #d7ccff (outlined action border)"
    - "hover/secondary accent: #5d35ff (Deep Iris)"

    example_component_prompts:

    - "Build a hero display headline at 42px on white. Mix Scope weight 400 roman with Signifier italic weight 400 in the same sentence (e.g. 'JONAS PELZER is a DESIGNER for WEBSITES and DIGITAL PRODUCTS'). Letter-spacing 0.02em, Ink Black (#000000), left-aligned, max-width 900px. Body paragraph below in Signifier 18px line-height 1.2, same color, max-width 640px."

    - "Build a nav strip with 5 pill buttons in a horizontal row. The first is the active state: 12px radius, fill #3502ff, white Scope 13px weight 400 text, 6px 14px padding, letter-spacing 0.036em, with the single permitted shadow rgba(53,2,255,0.1) 0px 1px 4px 2px. The remaining four are ghost: 12px radius, transparent fill, 1px border #d7ccff, Ink Black Scope 13px text, same padding."

    - "Build a 3-column project card grid. Column 1: lavender accent card, 12px radius, #c2b3ff fill, no text, 16px padding — pure color block. Column 2: white feature card with 1px Mist Gray border, 12px radius, 16px padding, Scope 25px display title + Signifier 15px meta + 2×2 image grid below. Column 3: another lavender accent card matching column 1. 16px gap between columns."

    - "Build a year index list as a single horizontal row: '01  02  03  04  05  06  07  08  09' in Scope 14px weight 400, letter-spacing 0.036em, Ink Black, 16px gap between items. Highlight the current year (08) in Violet Ink #3502ff. 1px Ink Black hairline above the row as divider."

    - "Build a footer link group: horizontal inline list of 4–6 social links (ABOUT, AWARDS, CAREER, CONTACT) in Signifier 15px weight 400, Ink Black, 15px padding-right between items, separated from content above by a 1px Mist Gray border. No background fill, no icons — text only."

  similar_brands:

    - "**Are.na** — Same editorial restraint, single-weight typography, and rationed color — both feel like quiet broadsheets rather than product pages"
    - "**Hicksdesign** — Personal portfolio with a single accent color, hairline borders instead of shadows, and display type that mixes weights and styles within a single sentence"
    - "**Rauno Freiberg** — Compact dense layout, violet-adjacent accent palette, and a nav system that lives at the bottom rather than the top"
    - "**Frank Chimero** — Magazine-spread layout, literary type pairing, and a near-achromatic palette with one chromatic brand mark"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-mist-gray: #d4d6dd;
          --color-violet-ink: #3502ff;
          --color-lavender-wash: #c2b3ff;
          --color-lavender-whisper: #d7ccff;
          --color-deep-iris: #5d35ff;
        
          /* Typography — Font Families */
          --font-scope: 'Scope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-signifier: 'Signifier', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.2;
          --tracking-caption: 0.47px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: 0.3px;
          --text-body: 17px;
          --leading-body: 1.2;
          --tracking-body: 0.34px;
          --text-subheading: 22px;
          --leading-subheading: 1.1;
          --tracking-subheading: 0.44px;
          --text-heading: 25px;
          --leading-heading: 1.1;
          --tracking-heading: 0.5px;
          --text-display: 42px;
          --leading-display: 1;
          --tracking-display: 0.84px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1400px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 3.5px;
          --radius-lg: 8.26px;
          --radius-xl: 12px;
        
          /* Named Radii */
          --radius-nav: 12px;
          --radius-cards: 12px;
          --radius-small: 3.5px;
          --radius-buttons: 12px;
        
          /* Shadows */
          --shadow-sm: rgba(53, 2, 255, 0.1) 0px 1px 4px 2px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-lavender-block: #c2b3ff;
          --surface-ink-ground: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-mist-gray: #d4d6dd;
          --color-violet-ink: #3502ff;
          --color-lavender-wash: #c2b3ff;
          --color-lavender-whisper: #d7ccff;
          --color-deep-iris: #5d35ff;
        
          /* Typography */
          --font-scope: 'Scope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-signifier: 'Signifier', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.2;
          --tracking-caption: 0.47px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: 0.3px;
          --text-body: 17px;
          --leading-body: 1.2;
          --tracking-body: 0.34px;
          --text-subheading: 22px;
          --leading-subheading: 1.1;
          --tracking-subheading: 0.44px;
          --text-heading: 25px;
          --leading-heading: 1.1;
          --tracking-heading: 0.5px;
          --text-display: 42px;
          --leading-display: 1;
          --tracking-display: 0.84px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-md: 3.5px;
          --radius-lg: 8.26px;
          --radius-xl: 12px;
        
          /* Shadows */
          --shadow-sm: rgba(53, 2, 255, 0.1) 0px 1px 4px 2px;
        }