dennis_snellenberg___style_reference:
  info: "> Dark editorial canvas with giant quiet headlines"

  theme: "dark"

  info: "A dark editorial portfolio language built on a near-black canvas where the only color that matters is a single vivid violet. The entire interface collapses to two tones — #1c1d20 for the world, #ffffff for everything written — with a custom sans-serif at a fixed medium weight doing all the talking. Typography is the protagonist: a 216px display name bleeds off the page edge, while 12–15px body copy floats beside full-bleed photography. Violet appears as rare punctuation on cards and link fills, never as decoration. Components are flat, borderless, and large — rounded pills replace buttons, and a single 1px inset white ring is the only shadow language in the system."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian Canvas | `#1c1d20` | `--color-obsidian-canvas` | Page background, card surfaces, text on light surfaces, hairline borders — the near-black that owns 95% of the interface |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Primary text, inverted card surfaces, link text on violet, subtle inset borders — the only light tone in the system |"
    info: "| Fog | `#999d9e` | `--color-fog` | Muted secondary text, captions, metadata — sits between the canvas and white in the neutral scale |"
    info: "| Graphite | `#494a4d` | `--color-graphite` | Elevated surface layer above the canvas, soft card backgrounds, link hover glow — adds a half-step of depth without breaking the monochrome read |"
    info: "| Electric Iris | `#455ce9` | `--color-electric-iris` | Accent card fills, link/button backgrounds, active state highlights — the one chromatic voice; its vividness is amplified by 99% achromatic surroundings |"
    info: "| Deep Iris | `#334bd3` | `--color-deep-iris` | Secondary accent surface, deeper violet card variant — used when the primary iris needs a stepped companion for layered cards or gradient-feeling stacks |"

  tokens___typography:

    dennis_sans___single_family_system__weight_450_is_non_standard___not_light__not_bold__sits_in_the_medium_range_to_feel_editorial_rather_than_corporate__uniform_0_0500em_letter_spacing_across_all_sizes_creates_a_distinctive_mechanical_rhythm__display_sizes_60_216px_use_tight_line_height_1_00_1_07_so_headlines_touch_or_nearly_touch__body_sizes_14_17px_open_up_to_1_40_1_66_for_readability__the_216px_hero_name_is_the_signature_element___it_dwarfs_everything_else_and_bleeds_off_canvas_as_intent_____font_dennis_sans:
      - "**Substitute:** Inter (weight 500) or Untitled Sans"
      - "**Weights:** 450"
      - "**Sizes:** 10, 12, 14, 15, 17, 33, 60, 76, 88, 216px"
      - "**Line height:** 1.00–1.66 (display 1.00–1.07, body 1.40–1.66)"
      - "**Letter spacing:** 0.0500em across all sizes"
      - "**Role:** Single-family system. Weight 450 is non-standard — not light, not bold, sits in the medium range to feel editorial rather than corporate. Uniform 0.0500em letter-spacing across all sizes creates a distinctive mechanical rhythm. Display sizes (60–216px) use tight line-height (1.00–1.07) so headlines touch or nearly touch; body sizes (14–17px) open up to 1.40–1.66 for readability. The 216px hero name is the signature element — it dwarfs everything else and bleeds off-canvas as intent."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.45 | 0.5px | `--text-caption` |"
      info: "| body-lg | 15px | 1.66 | 0.75px | `--text-body-lg` |"
      info: "| heading-sm | 33px | 1.2 | 1.65px | `--text-heading-sm` |"
      info: "| heading | 60px | 1.07 | 3px | `--text-heading` |"
      info: "| heading-lg | 88px | 1.06 | 4.4px | `--text-heading-lg` |"
      info: "| display | 216px | 1 | 10.8px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 43 | 43px | `--spacing-43` |"
      info: "| 54 | 54px | `--spacing-54` |"
      info: "| 58 | 58px | `--spacing-58` |"
      info: "| 63 | 63px | `--spacing-63` |"
      info: "| 115 | 115px | `--spacing-115` |"
      info: "| 189 | 189px | `--spacing-189` |"
      info: "| 230 | 230px | `--spacing-230` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 10px |"
      info: "| links | 36.72px |"
      info: "| badges | 36.72px |"
      info: "| buttons | 36.72px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset` | `--shadow-subtle` |"

    layout:

      - "**Section gap:** 120-160px"
      - "**Card padding:** 18-22px"
      - "**Element gap:** 12px"

  components:

    full_bleed_hero:
      role: "Opening viewport with photography and massive name"

      info: "Edge-to-edge image (no radius, no border) on Obsidian Canvas background. Name set in Dennis Sans 216px / 1.00 line-height / letter-spacing 10.8px, color #ffffff, positioned bottom-left and intentionally bleeding off the canvas edge. No buttons in the hero — navigation is top-bar only."

    top_navigation_bar:
      role: "Minimal site navigation"

      info: "Absolute-positioned over hero. Logo '© Code by Dennis' in 12px #ffffff at top-left (12px from edges). Nav items (Work, About, Contact) in 12px #ffffff at top-right, 32px gap between items. No backgrounds, no borders, no underlines — text floats directly on the photograph."

    location_pill_badge:
      role: "Geographic metadata indicator"

      info: "36.72px radius pill, 18px vertical / 22px horizontal padding, background #1c1d20 (or transparent over image). White globe icon on the right, 'Located in the Netherlands' text in 12px #ffffff stacked in three lines at 1.20 line-height on the left. Feels like a floating tag, not a button."

    pill_link___button:
      role: "Primary interactive element across the system"

      info: "36.72px border-radius (fully pill-shaped). Padding 12px 22px. Background #1c1d20 or #455ce9 depending on variant. Text 14px Dennis Sans 450 #ffffff or #1c1d20. Optional inset border: rgba(255,255,255,0.2) 0 0 0 1px inset for subtle definition. No drop shadow, no hover lift — state changes happen via background swap only."

    violet_accent_card:
      role: "Featured or category card"

      info: "10px border-radius, background #455ce9, padding 22px. White text at 17–33px. Used to break the monochrome grid with a single chromatic block — never more than 1–2 per page."

    graphite_card:
      role: "Standard elevated card on dark canvas"

      info: "10px border-radius, background #494a4d, padding 18–22px. White text at 14–17px. Sits half a step above the canvas to create quiet layering without shadows."

    arrow_indicator:
      role: "Directional or scroll cue"

      info: "Thin 1px white SVG arrow (↘) with no container. Often paired with adjacent body text like 'Freelance Designer & Developer' in 15px #ffffff. The arrow carries the interactive meaning; the text is purely descriptive."

    section_headline_block:
      role: "Large typographic section opener"

      info: "Dennis Sans 60–88px / line-height 1.06–1.07 / letter-spacing 3–4.4px, color #ffffff. Aligned left, sits directly on Obsidian Canvas with no eyebrow label, no underline, no container — type alone defines the section."

    inset_border_link:
      role: "Text link with subtle focus ring"

      info: "Pill-shaped (36.72px) text container with 1px inset white border at 20% opacity. Text in 14px #ffffff. The inset border is the entire depth system — no drop shadows exist in this design language."

    metadata_caption:
      role: "Helper text, labels, small annotations"

      info: "10–12px Dennis Sans 450 in #999d9e. Letter-spacing 0.5–0.6px. Used for project dates, categories, footnote-style info. Never colored — always sits in the neutral gray range."

  do_s_and_don_ts:

    do:
      - "Use Dennis Sans at weight 450 exclusively — never bold, never light; the single weight is the system"
      - "Set letter-spacing to 0.0500em on every text element including body copy; the uniform tracking is signature"
      - "Use #1c1d20 as the canvas for every page; other surfaces (#494a4d, #455ce9) are exceptions, not the rule"
      - "Set all interactive elements (links, buttons, badges) to 36.72px border-radius for full pill shape"
      - "Use the 1px inset white border at 20% opacity as the only elevation technique — no drop shadows"
      - "Let display headlines (88–216px) bleed off the canvas edge for editorial tension"
      - "Reserve #455ce9 for one accent element per viewport — the violet is punctuation, not decoration"

    don_t:
      - "Don't introduce additional weights (400, 600, 700) — the single-weight system is intentional and fragile"
      - "Don't add drop shadows or multi-layer elevation; the inset border is the entire depth vocabulary"
      - "Don't use #455ce9 on more than one element per section — overuse dilutes the accent's impact"
      - "Don't use sharp corners (0–4px radius) on interactive elements; the pill shape is the signature"
      - "Don't introduce new chromatic colors — the palette is monochrome plus one violet, period"
      - "Don't center-align body copy or long-form text; left-align everything to preserve the editorial gravity"
      - "Don't use line-height above 1.07 on display sizes (60px+); tight leading is what makes the type feel monolithic"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Obsidian Canvas | `#1c1d20` | Page background — the default ground for every screen |"
    info: "| 2 | Graphite | `#494a4d` | Elevated surface for cards, badges, and secondary panels |"
    info: "| 3 | Deep Iris | `#334bd3` | Accent surface for featured or category cards |"
    info: "| 4 | Electric Iris | `#455ce9` | Top accent surface for CTA cards and interactive link fills |"

  elevation:

    - "**Inset-Border Link:** `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset`"

  imagery:

    info: "Full-bleed editorial photography dominates the visual language. Images are high-resolution portraits or environmental shots with natural lighting and minimal color grading — they sit directly on the Obsidian canvas without frames, masks, or rounded corners. Photography is the only color source beyond the violet accent; everything else is monochrome. No illustrations, no 3D, no abstract graphics. The subject of the photograph is the hero — not a product, not a UI mockup, a person or place rendered at human scale."

  layout:

    info: "Full-bleed pages with no max-width container — the canvas extends edge to edge. Hero is a single viewport: full-bleed photograph with navigation floating at top corners, a location badge anchored mid-left, and a 216px name bleeding off the bottom-left edge. Content sections below follow a left-aligned single-column rhythm with generous vertical gaps (120–160px between sections). Cards and content blocks use 10px radius and sit on the dark canvas with no visible boundaries — they are defined by surface color step alone. The grid is implicit, not drawn: elements anchor to the left edge with 12px gutters, creating a strong left-gravity editorial flow."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "canvas: #1c1d20"
    - "text: #ffffff"
    - "muted text: #999d9e"
    - "elevated surface: #494a4d"
    - "accent card: #455ce9"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"

    - "Hero section: Obsidian Canvas (#1c1d20) background, full-bleed photograph overlaid. Top-left: '© Code by Dennis' in 12px Dennis Sans 450 #ffffff, 12px from edges. Top-right nav: 'Work  About  Contact' in 12px #ffffff, 32px gaps. Bottom-left: display name in 88–216px Dennis Sans 450, #ffffff, letter-spacing 10.8px, line-height 1.00, intentionally bleeding off the left canvas edge."

    - "Location pill badge: 36.72px radius, 18px 22px padding, background #1c1d20, white globe icon (1px stroke) on the right, 'Located in the Netherlands' text stacked in 3 lines at 12px #ffffff line-height 1.20 on the left. Floats over the hero image with no border."

    - "Violet accent card: 10px radius, background #455ce9, 22px padding on all sides, content text in 17px Dennis Sans 450 #ffffff, line-height 1.40. One per viewport maximum."

    - "Inset-border link: 36.72px radius pill, background #1c1d20, 12px 22px padding, 1px inset border rgba(255,255,255,0.2), text in 14px Dennis Sans 450 #ffffff with 0.7px letter-spacing. The inset border is the only depth indicator."

    - "Section headline: Dennis Sans 60px, weight 450, #ffffff, line-height 1.07, letter-spacing 3px, left-aligned directly on Obsidian Canvas with no eyebrow, no underline, no container. 120–160px vertical gap above."

  similar_brands:

    - "**Cody Lindquist** — Same full-bleed dark photography hero, massive single-weight display name bleeding off canvas, monochrome canvas with one chromatic accent"
    - "**Rauno Freiberg** — Identical editorial portfolio grammar — dark canvas, oversized name as hero element, minimal nav, single-weight custom sans-serif"
    - "**Tobias van Schneider** — Same restraint philosophy: near-black background, full-bleed imagery, large confident type, violet/blue accent used as rare punctuation"
    - "**Basement Studio** — Dark-mode portfolio with full-bleed photography, pill-shaped interactive elements, and a single accent color against monochrome surroundings"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian-canvas: #1c1d20;
          --color-bone-white: #ffffff;
          --color-fog: #999d9e;
          --color-graphite: #494a4d;
          --color-electric-iris: #455ce9;
          --color-deep-iris: #334bd3;
        
          /* Typography — Font Families */
          --font-dennis-sans: 'Dennis Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.45;
          --tracking-caption: 0.5px;
          --text-body-lg: 15px;
          --leading-body-lg: 1.66;
          --tracking-body-lg: 0.75px;
          --text-heading-sm: 33px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 1.65px;
          --text-heading: 60px;
          --leading-heading: 1.07;
          --tracking-heading: 3px;
          --text-heading-lg: 88px;
          --leading-heading-lg: 1.06;
          --tracking-heading-lg: 4.4px;
          --text-display: 216px;
          --leading-display: 1;
          --tracking-display: 10.8px;
        
          /* Typography — Weights */
          --font-weight-w450: 450;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-22: 22px;
          --spacing-43: 43px;
          --spacing-54: 54px;
          --spacing-58: 58px;
          --spacing-63: 63px;
          --spacing-115: 115px;
          --spacing-189: 189px;
          --spacing-230: 230px;
        
          /* Layout */
          --section-gap: 120-160px;
          --card-padding: 18-22px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-3xl: 36.72px;
        
          /* Named Radii */
          --radius-cards: 10px;
          --radius-links: 36.72px;
          --radius-badges: 36.72px;
          --radius-buttons: 36.72px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-obsidian-canvas: #1c1d20;
          --surface-graphite: #494a4d;
          --surface-deep-iris: #334bd3;
          --surface-electric-iris: #455ce9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian-canvas: #1c1d20;
          --color-bone-white: #ffffff;
          --color-fog: #999d9e;
          --color-graphite: #494a4d;
          --color-electric-iris: #455ce9;
          --color-deep-iris: #334bd3;
        
          /* Typography */
          --font-dennis-sans: 'Dennis Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.45;
          --tracking-caption: 0.5px;
          --text-body-lg: 15px;
          --leading-body-lg: 1.66;
          --tracking-body-lg: 0.75px;
          --text-heading-sm: 33px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 1.65px;
          --text-heading: 60px;
          --leading-heading: 1.07;
          --tracking-heading: 3px;
          --text-heading-lg: 88px;
          --leading-heading-lg: 1.06;
          --tracking-heading-lg: 4.4px;
          --text-display: 216px;
          --leading-display: 1;
          --tracking-display: 10.8px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-22: 22px;
          --spacing-43: 43px;
          --spacing-54: 54px;
          --spacing-58: 58px;
          --spacing-63: 63px;
          --spacing-115: 115px;
          --spacing-189: 189px;
          --spacing-230: 230px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-3xl: 36.72px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset;
        }