dries_bos___style_reference:
  info: "> editorial ink on warm vellum"

  theme: "light"

  info: "A monochromatic portfolio language built on warm vellum paper and near-black ink — the visual equivalent of an architect's drafting table. Every element is a line, a label, or empty space; no fills, no shadows, no chromatic accents interrupt the editorial calm. The work list is a spreadsheet made beautiful: columns, dates, project names, and discipline tags sit on the same horizontal grid, separated by hairline rules rather than card containers. The hero is a large wireframe drawing — thin strokes on warm ground — that signals the developer's craft without ever showing a screenshot. Color is structural (paper, ink, gray) not expressive; the site trusts whitespace and type to carry mood."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Vellum | `#e8e7e3` | `--color-vellum` | Page background, table row base, card surfaces — warm off-white reads as paper, not screen |"
    info: "| Parchment | `#dddbd5` | `--color-parchment` | Alternating table rows, subtle surface lift one step above the canvas |"
    info: "| India Ink | `#050200` | `--color-india-ink` | Body text, hairline borders, wireframe strokes, icon strokes — the only high-contrast tone in the system |"
    info: "| Graphite | `#747472` | `--color-graphite` | Muted secondary text, disabled icon strokes, de-emphasized metadata |"

  tokens___typography:

    sohne_buch___all_interface_and_editorial_text___headlines__body__table_cells__labels__used_at_one_weight_400_across_all_roles__the_single_weight_plus_generous_letter_spacing_carries_the_quiet_authority_instead_of_bold_regular_contrast____font_sohne_buch:
      - "**Substitute:** Inter, Söhne, Untitled Sans, Neue Haas Grotesk"
      - "**Weights:** 400"
      - "**Sizes:** 20px"
      - "**Line height:** 1.45"
      - "**Role:** All interface and editorial text — headlines, body, table cells, labels. Used at one weight (400) across all roles; the single weight plus generous letter-spacing carries the quiet authority instead of bold/regular contrast"

    myfont___icon_glyph_set___arrows__external_link_markers__theme_toggle__search__moon_sun__the_1_0_line_height_confirms_this_is_a_pictogram_face__not_running_text____font_myfont:
      - "**Substitute:** Phosphor, Lucide, or a custom icon set with 1.0 line-height metrics"
      - "**Weights:** 400"
      - "**Sizes:** 20px"
      - "**Line height:** 1.00"
      - "**Role:** Icon glyph set — arrows, external-link markers, theme toggle, search, moon/sun. The 1.0 line-height confirms this is a pictogram face, not running text"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 14px | 1.45 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.45 | — | `--text-body` |"
      info: "| subheading | 20px | 1.45 | — | `--text-subheading` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 79 | 79px | `--spacing-79` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| icons | 0px |"
      info: "| buttons | 0px |"
      info: "| table_rows | 0px |"
      info: "| pill_elements | 1000px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 79px"
      - "**Card padding:** 25px"
      - "**Element gap:** 10px"

  components:

    work_table_row:
      role: "Primary navigation through portfolio — one project per row"

      info: "Full-width row on vellum (#e8e7e3) or parchment (#dddbd5) background, no border between rows. Four-column flex layout: year (left-aligned, ~80px), project name (flexible width, India Ink #050200), discipline tag (muted Graphite #747472), action icons (right-aligned). Vertical padding ~25px. Type: Sohne Buch 400 at the base scale. No hover state beyond the existing tone — the row is always legible."

    column_header:
      role: "Labels above the work table"

      info: "Same baseline as table cells but in Graphite #747472 instead of India Ink. Right-aligned for the last column (action icons). Padding 25px top/sides, matches row padding so columns optically align."

    header_bar:
      role: "Persistent identity strip at the top of every viewport"

      info: "Single horizontal band, vellum background, no border. Left: wordmark 'Name — Discipline' in India Ink at 14-16px. Right: three icon controls (theme toggle, expand/collapse, close) in 20px myFont glyphs, stroke India Ink. No logo lockup, no nav links — the header IS the navigation."

    theme_toggle_icon:
      role: "Switch between light and dark rendering"

      info: "20×20px myFont glyph (half-filled circle), India Ink stroke. Sits inline with other header icons. No background, no border, no label — the icon is self-explanatory."

    arrow_link:
      role: "Inline directional cue for the bio/intro line"

      info: "20px myFont right-arrow glyph, India Ink, sits at the right edge of the description text block. The arrow IS the link affordance — no underline, no color change, no button container. Vertical-aligned to the last line of the paragraph."

    external_link_icon:
      role: "Indicator that a work item opens in a new tab"

      info: "20px myFont diagonal-arrow glyph, India Ink, positioned in the action column of table rows that have an external URL. Paired with the standard arrow icon in the same row."

    bio_description_block:
      role: "Hero-adjacent text introducing the developer"

      info: "Two short sentences in Sohne Buch 400, India Ink, left-aligned, max-width matches the table width. Arrow link at the end of the second line. No headline, no label, no decoration — just type on vellum."

    wireframe_hero_illustration:
      role: "Signature visual element — a line drawing occupying the top third of the page"

      info: "Thin-stroke architectural sketch (perspective box / room / frame) rendered in India Ink lines at ~0.5-1px. No fills, no shading, no color. Sits on vellum background. The drawing bleeds off the edges of the viewport — it is not contained in a card. This is the only piece of visual content on the entire site."

    search_icon:
      role: "Optional filter trigger for the work table"

      info: "20px myFont magnifying-glass glyph, Graphite #747472 (de-emphasized vs the action icons), right-aligned in the column header row."

  do_s_and_don_ts:

    do:
      - "Keep the palette to exactly four tones: Vellum, Parchment, India Ink, Graphite. Never introduce a chromatic color."
      - "Set table row and card padding to 25px on all sides — this is the dominant rhythm of the layout."
      - "Use Sohne Buch 400 at a single weight for all text. Do not bold, do not italic. Hierarchy comes from size and color (Graphite vs India Ink), not weight."
      - "Draw borders and dividers as 1px India Ink hairlines. Do not use 2px+ rules; do not use shadows."
      - "Use the myFont icon set at 20px with 1.0 line-height. Align icons optically to the x-height of adjacent text, not to the bounding box."
      - "Let whitespace carry visual weight. Maintain ~79px vertical gap between major sections."
      - "Keep all interactive elements borderless. The arrow, link, and icon ARE the affordance — no button containers, no filled states."

    don_t:
      - "Do not add a brand color, accent color, or CTA fill. The system is monochromatic by design."
      - "Do not apply border-radius to rows, table cells, or cards. Corners are sharp (0px). Only pill elements (1000px) curve."
      - "Do not introduce drop shadows, glows, or elevation effects. Surfaces are flat; separation is tonal (Vellum → Parchment) or hairline."
      - "Do not use multiple font weights. Sohne Buch 400 is the only registered weight — adding 500/600/700 breaks the editorial restraint."
      - "Do not wrap interactive elements in button containers. Links are text + arrow icon, nothing more."
      - "Do not use photography, gradients, or colored illustrations. The wireframe line drawing is the only visual content; honor that."
      - "Do not right-align body text. All editorial copy is left-aligned, including the bio description."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#e8e7e3` | Page background — the warm paper ground |"
    info: "| 1 | Row Surface | `#dddbd5` | Alternating table row background, creates the only surface differentiation in the system |"

  elevation:

    info: "The system deliberately uses zero shadow. Separation between elements is achieved through tonal shifts (Vellum → Parchment), hairline 1px borders, and whitespace — never through drop shadows or blur effects. This flatness is a signature choice: it makes the interface read as printed matter, not software."

  imagery:

    the_site_has_exactly_one_visual_element: "a large wireframe / line-drawing illustration in the hero zone, rendered as thin India Ink strokes on the Vellum background. No photography, no raster images, no colored illustrations, no gradients, no product screenshots. The wireframe (perspective architectural geometry) bleeds beyond the viewport edges and signals the developer's spatial/structural thinking. The rest of the site is pure type and table."

  layout:

    info: "Single full-width column, max-width ~1200px centered. Hero zone contains the wireframe illustration bleeding to viewport edges, with the header bar overlaying its bottom edge. Below the hero, a bio description block sits in the same left-aligned column. The majority of the page is a four-column data table (year, project name, discipline, action icons) with generous 25px row padding. No multi-column grids, no card grids, no sidebar. The entire scroll is vertical through a single list. Navigation is a minimal header bar with three icon controls — no nav links, no menu."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #050200 (India Ink)"
    - "background: #e8e7e3 (Vellum)"
    - "secondary surface: #dddbd5 (Parchment)"
    - "muted text: #747472 (Graphite)"
    - "border: #050200 (1px hairline)"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    - "**Work Table Row**: Render a full-width row on #e8e7e3 background. Four columns: year (80px, #747472, 14px), project name (flex, #050200, 14px), discipline tag (flex, #747472, 14px), action icons (right-aligned, 20px myFont glyphs, #050200). Padding 25px top/right/bottom, 25px left. No border, no radius, no shadow. Alternate every other row to #dddbd5."

    - "**Header Bar**: Full-width band on #e8e7e3. Left: 'Dries Bos — Creative Developer' in Sohne Buch 400, #050200, 14px. Right: three 20px myFont icons (half-circle, expand, close) in #050200, evenly spaced. No bottom border, no background change."

    - "**Bio Description Block**: Two short sentences in Sohne Buch 400, #050200, 16px, line-height 1.45, left-aligned. Max-width matching the table column. A 20px myFont right-arrow in #050200 sits at the right edge of the second line, vertically centered to the text baseline."

    - "**Wireframe Hero**: Thin 1px #050200 stroke line drawing of a perspective box/room on #e8e7e3 background. No fills, no shading. Drawing extends beyond the 1200px container to viewport edges. Occupies ~40% of viewport height."

    - "**Column Header Row**: Same layout as a work table row but all text in #747472 (Graphite), 14px Sohne Buch 400. The action column shows a single search icon in #747472. Padding 25px to align optically with table rows below."

  similar_brands:

    - "**Rauno Freiberg** — Same editorial minimalism — warm monochrome palette, generous whitespace, type and wireframe as the primary visual language"
    - "**Stas Ponomarenko** — Same table-as-portfolio pattern with hairline structure, no card containers, sharp 0px corners"
    - "**Cobe (architects)** — Same wireframe/blueprint line-drawing hero treatment on warm off-white background, type-only body"
    - "**Phil Stumph** — Same single-weight sans-serif typography, monochromatic restraint, and index-list-as-navigation approach"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-vellum: #e8e7e3;
          --color-parchment: #dddbd5;
          --color-india-ink: #050200;
          --color-graphite: #747472;
        
          /* Typography — Font Families */
          --font-sohne-buch: 'Sohne Buch', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-myfont: 'myFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.45;
          --text-body: 16px;
          --leading-body: 1.45;
          --text-subheading: 20px;
          --leading-subheading: 1.45;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-6: 6px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-40: 40px;
          --spacing-79: 79px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 79px;
          --card-padding: 25px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-full: 1000px;
        
          /* Named Radii */
          --radius-icons: 0px;
          --radius-buttons: 0px;
          --radius-tablerows: 0px;
          --radius-pillelements: 1000px;
        
          /* Surfaces */
          --surface-canvas: #e8e7e3;
          --surface-row-surface: #dddbd5;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-vellum: #e8e7e3;
          --color-parchment: #dddbd5;
          --color-india-ink: #050200;
          --color-graphite: #747472;
        
          /* Typography */
          --font-sohne-buch: 'Sohne Buch', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-myfont: 'myFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.45;
          --text-body: 16px;
          --leading-body: 1.45;
          --text-subheading: 20px;
          --leading-subheading: 1.45;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-40: 40px;
          --spacing-79: 79px;
        
          /* Border Radius */
          --radius-full: 1000px;
        }