dani_l_van_der_winden___style_reference:
  info: "> Printed monograph on vellum"

  theme: "light"

  info: "This is an editorial personal folio rendered like a printed monograph on warm paper. A single warm-gray canvas (#e5e7eb) holds everything, with content floating on it without visible card containers or heavy dividers. The type system is the design: a humanist sans (Degular) handles UI, body, and navigation while a bookish serif (Blanco) carries all editorial weight — headlines, introductions, and section titles. Color is almost entirely absent; the only chromatic event is the near-black fill of the sole action button against the light field. Layout is a fixed left rail of nav links and a generous reading-width column of text, with photographs overlapping the text column as collaged inserts. Everything else — borders, hairlines, separators — is hairline and quiet."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Vellum | `#e5e7eb` | `--color-vellum` | Page canvas, hairline dividers, link underlines, card-edge borders — the warm-gray field that holds all content |"
    info: "| Ink Black | `#111827` | `--color-ink-black` | Primary text, nav links, body copy — the default reading color |"
    info: "| Graphite | `#374151` | `--color-graphite` | Secondary body text, list items, supporting copy — one step lighter than primary ink |"
    info: "| Charcoal | `#2a2a28` | `--color-charcoal` | Headings and editorial emphasis — slightly warm dark for serif display |"
    info: "| Stone | `#717272` | `--color-stone` | Tertiary text, icon fills, meta labels |"
    info: "| Pebble | `#909191` | `--color-pebble` | Muted body text, image captions, fine print |"
    info: "| Ash | `#c4c6c8` | `--color-ash` | Rarely-used border, subtle structural separator |"
    info: "| Slate | `#7b7c7c` | `--color-slate` | Subdued heading variant, de-emphasized titles |"
    info: "| Pressed Ink | `#222222` | `--color-pressed-ink` | Primary action button fill — the only dark surface on the canvas, creating the only moment of visual weight |"
    info: "| Midnight | `#1a202c` | `--color-midnight` | Secondary dark surface, alternate button fill |"

  tokens___typography:

    degular___ui_and_body_sans___navigation__buttons__body_copy__metadata__links__tags__resumé_dates__carries_all_functional_text__weights_step_from_400_body_to_700_for_emphasis_in_headings_and_dates_____font_degular:
      - "**Substitute:** Inter, DM Sans, or General Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 14, 16, 18, 22, 24, 28, 32, 40"
      - "**Line height:** 1.25, 1.50"
      - "**Letter spacing:** 0.025em at body sizes; 0.10em for uppercase labels and tags"
      - "**Role:** UI and body sans — navigation, buttons, body copy, metadata, links, tags, resumé dates. Carries all functional text. Weights step from 400 body to 700 for emphasis in headings and dates."

    blanco___editorial_serif___hero_headline__resumé_role_titles__section_headings__and_any_text_that_should_read_as__published__rather_than__navigational__single_weight_400__letting_size_and_the_serif_s_own_authority_carry_hierarchy_____font_blanco:
      - "**Substitute:** Source Serif 4, Tiempos Text, or Lyon Display"
      - "**Weights:** 400"
      - "**Sizes:** 14, 20, 22, 28"
      - "**Line height:** 1.40, 1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Editorial serif — hero headline, resumé role titles, section headings, and any text that should read as 'published' rather than 'navigational'. Single weight 400, letting size and the serif's own authority carry hierarchy."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.5 | 0.1px | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.4 | — | `--text-heading-sm` |"
      info: "| heading | 28px | 1.4 | — | `--text-heading` |"
      info: "| heading-lg | 32px | 1.25 | 0.025px | `--text-heading-lg` |"
      info: "| display | 40px | 1.25 | 0.025px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 3px |"
      info: "| tags | 3px |"
      info: "| cards | 3px |"
      info: "| images | 3px |"
      info: "| buttons | 3px |"

    layout:

      - "**Page max-width:** 720px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    sidebar_nav:
      role: "Persistent left rail navigation"

      info: "Fixed left column containing the wordmark 'Daniël van der Winden' at top and a vertical stack of text links (Journal, Library, Links, Magazine, Newsletter, Work) at the bottom. Links are 16px Degular 500 in #111827 with no decoration. A small avatar/mark sits in the top-right corner. No background, no border — it floats on the vellum field."

    email_me_button:
      role: "Primary and only action on the page"

      info: "Dark filled button, #222222 background, white text. Degular 14px medium weight, 8px 16px padding, 3px border-radius. The only moment of visual weight on the entire page — it works because everything else stays quiet."

    social_link_row:
      role: "Secondary contact links beside the primary action"

      info: "Text links with small inline icons (LinkedIn, Bluesky). Degular 14px in #111827, 8px gap between icon and label, separated from the email button by a vertical divider line in #e5e7eb."

    photo_collage_block:
      role: "Hero visual element overlapping the text column"

      info: "Two to three black-and-white or desaturated photographs arranged in an overlapping collage, shifted left into the gutter area. No borders, no shadows — they sit directly on the vellum with 3px corner radius. Images are editorial in tone: workspace shots, portraits, and detail crops."

    resumé_entry:
      role: "Date-anchored experience block"

      two_column_layout: "narrow left column with date range in Degular 14px #717272 (e.g. '2023–2028'), generous right column with role title in Blanco 400 at 22px in #2a2a28, followed by 2-3 lines of body description in Degular 16px #374151. Entries are separated by hairline 1px #e5e7eb rules with generous vertical rhythm (24-32px between entries)."

    section_heading:
      role: "Editorial section title"

      info: "Blanco 400 at 28px in #2a2a28, left-aligned, sitting above its content block. No underline, no decoration. The serif choice signals 'this is a chapter title, not a label.'"

    external_link_with_arrow:
      role: "Outbound link indicator"

      info: "Degular 16px #111827 text with a small superscript arrow (↗) at 75% size, positioned at the end of the label. No underline. Used for Magazine and other external references."

    nav_link:
      role: "Text-only navigation item"

      info: "Degular 500 at 16px in #111827. No underline, no background, no hover state beyond subtle color shift. Vertically stacked in the sidebar with 12px between items."

    body_text_block:
      role: "Prose paragraph for bio and descriptions"

      info: "Degular 400 at 18px in #374151, line-height 1.5, max-width constrained to the reading column (~600-640px). Generous margin-bottom of 27px between paragraphs. The serif Blanco is never used for body — only for titles."

  do_s_and_don_ts:

    do:
      - "Use #e5e7eb as the only surface; never introduce a white card or alternate background."
      - "Pair Blanco 400 for all headings and titles; reserve Degular for UI, body, and metadata."
      - "Use the single dark fill (#222222) for exactly one action per viewport — scarcity makes it land."
      - "Set border-radius to 3px for images, buttons, and tags; 8px is reserved for larger interactive surfaces."
      - "Anchor resumé entries with date labels in the narrow left column, titles in the right — never inline."
      - "Let photographs overlap the text column; avoid placing images in rigid boxed containers."
      - "Set body text at 18px Degular 400 #374151 with 1.5 line-height; this is the reading rhythm of the entire site."

    don_t:
      - "Do not introduce chromatic color — the 3% colorfulness is deliberate, not a limitation to fix."
      - "Do not add shadows, gradients, or glow effects; elevation is achieved through fill contrast only."
      - "Do not use Blanco for body text or nav; it is a display face, not a reading face."
      - "Do not create card containers with backgrounds or borders for content blocks — content sits directly on the vellum."
      - "Do not use 9999px pill radius; this system's 3px radius is a quiet, bookish choice."
      - "Do not bold body text for emphasis; use size, color, or the Blanco/Degular font swap instead."
      - "Do not center-align body paragraphs; left-align at a fixed reading width to preserve the editorial column."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Vellum Field | `#e5e7eb` | The entire page sits on this warm gray; no separate card surface exists |"
    info: "| 1 | Pressed Ink Surface | `#222222` | The email button and any filled action — the only surface that breaks the monochrome field |"

  elevation:

    info: "Elevation is deliberately absent. The design relies on overlapping content and hairline rules rather than shadows or z-axis differentiation. Buttons gain weight through fill, not depth."

  imagery:

    info: "Photography is editorial and documentary: black-and-white or desaturated workspace interiors, portrait shots, and detail crops. Images are treated as collaged inserts that overlap the text column, sitting directly on the vellum with only a subtle 3px corner radius — no borders, no shadows, no captions. The visual language is print-magazine, not SaaS product showcase: tight crops, natural lighting, human subjects. The site uses no illustrations, no abstract graphics, no 3D renders. Icons appear only in social links and are minimal monoline SVGs. The overall image-to-text ratio is low — text dominates, with images used as anchoring accents rather than decorative atmosphere."

  layout:

    info: "Fixed-width editorial layout. A narrow left sidebar (~180px) holds the wordmark at top and a vertical stack of nav links at bottom, fixed to the viewport. The main content column is centered-right, constrained to ~600-720px reading width, with generous whitespace on either side. The hero is an overlapping photo collage on the left bleeding into the intro text on the right — two zones share the same horizontal band rather than stacking. Below, sections flow as single-column prose with resumé entries using a two-column date/title split. There are no multi-column card grids, no alternating bands, no dark sections — the entire page is one continuous vellum field from top to bottom. Navigation is sidebar-only; no top bar, no sticky header beyond the sidebar itself."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #111827"
    - "background: #e5e7eb"
    - "border: #e5e7eb"
    - "accent: none (monochrome system)"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "Create a sidebar nav: fixed left column 180px wide, wordmark 'Daniël van der Winden' in Degular 500 16px #111827 at top, nav links (Journal, Library, Links, Magazine, Newsletter, Work) in Degular 500 16px #111827 stacked vertically at bottom with 12px gap. No background, no border."

    - "Create a resumé entry: two-column row, left column 80px wide with date '2023–2028' in Degular 14px #717272, right column with role title 'Co-Founder of TRANSCRIPT Magazine' in Blanco 400 22px #2a2a28 followed by description in Degular 400 18px #374151 line-height 1.5. Separate from next entry with a 1px #e5e7eb hairline and 32px vertical gap."

    - "Create a hero block: two black-and-white photographs overlapping in the left third, shifted up and down by 40px to create a collage effect. Right two-thirds holds a Blanco 400 40px #2a2a28 headline followed by 3 paragraphs of Degular 400 18px #374151 body text with 27px margin-bottom. Images have 3px border-radius, no shadow."

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "Create a section heading: Blanco 400 28px in #2a2a28, left-aligned, no underline, sitting 40px above its content block. This is an editorial chapter title, not a UI label."

  similar_brands:

    - "**Are.na** — Same editorial left-sidebar + reading-column layout on a warm neutral field with serif/sans type pairing"
    - "**Craig Mod** — Personal folio rendered as quiet prose on a single warm-gray canvas with generous reading width and minimal chrome"
    - "**Robin Rendle** — Similar literary portfolio aesthetic — monochrome, typographic, no card containers, text-first hierarchy"
    - "**Pareto Design** — Same warm-gray canvas with Degular-class humanist sans for UI and a serif accent for editorial headings"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-vellum: #e5e7eb;
          --color-ink-black: #111827;
          --color-graphite: #374151;
          --color-charcoal: #2a2a28;
          --color-stone: #717272;
          --color-pebble: #909191;
          --color-ash: #c4c6c8;
          --color-slate: #7b7c7c;
          --color-pressed-ink: #222222;
          --color-midnight: #1a202c;
        
          /* Typography — Font Families */
          --font-degular: 'Degular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-blanco: 'Blanco', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --text-heading: 28px;
          --leading-heading: 1.4;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: 0.025px;
          --text-display: 40px;
          --leading-display: 1.25;
          --tracking-display: 0.025px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 720px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-nav: 3px;
          --radius-tags: 3px;
          --radius-cards: 3px;
          --radius-images: 3px;
          --radius-buttons: 3px;
        
          /* Surfaces */
          --surface-vellum-field: #e5e7eb;
          --surface-pressed-ink-surface: #222222;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-vellum: #e5e7eb;
          --color-ink-black: #111827;
          --color-graphite: #374151;
          --color-charcoal: #2a2a28;
          --color-stone: #717272;
          --color-pebble: #909191;
          --color-ash: #c4c6c8;
          --color-slate: #7b7c7c;
          --color-pressed-ink: #222222;
          --color-midnight: #1a202c;
        
          /* Typography */
          --font-degular: 'Degular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-blanco: 'Blanco', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --text-heading: 28px;
          --leading-heading: 1.4;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: 0.025px;
          --text-display: 40px;
          --leading-display: 1.25;
          --tracking-display: 0.025px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
        }