david_kirschberg___style_reference:
  info: "> midnight gallery wall — a darkened room where spotlit work is the only color, and the frame around it is intentionally invisible."

  theme: "dark"

  info: "Kirschberg operates as a darkened exhibition space: a near-black canvas (#181818) with a single elevated surface (#262626) hosts colorful project work as the only chromatic event on screen. The interface is deliberately austere — Inter at weight 400 handles all text at 16-17px, while a custom display face (twkLausanne) appears at exactly 32px with aggressive -0.04em tracking for the sole headline. The signature structural shape is the 24px rounded card; there are no shadows, no gradients, and no interface accent color. The portfolio reads as a single horizontal-scroll row where the frame is engineered to disappear so the work is remembered."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#181818` | `--color-obsidian` | Page canvas, primary background — the dominant surface that recedes so work thumbnails advance |"
    info: "| Graphite | `#262626` | `--color-graphite` | Elevated surface, card thumbnail backgrounds, and content containers that need to sit one level above the page |"
    info: "| Bone | `#fafafa` | `--color-bone` | Primary text, hero headlines, card titles — near-white that reads as soft rather than clinical against the dark canvas |"
    info: "| Ash | `#a3a3a3` | `--color-ash` | Muted secondary text, subtitles, card descriptions — one step quieter than primary text for hierarchy without color |"

  tokens___typography:

    inter___all_body_text__subtitles__card_titles__ui_labels__navigation___single_weight_400_across_every_context__relying_on_size_and_color_contrast_rather_than_weight_shifts_for_hierarchy____font_inter:
      - "**Substitute:** DM Sans or General Sans"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 17px"
      - "**Line height:** 1.18 / 1.29 / 1.50"
      - "**Letter spacing:** -0.009em"
      - "**Role:** All body text, subtitles, card titles, UI labels, navigation — single weight (400) across every context, relying on size and color contrast rather than weight shifts for hierarchy"

    twklausanne___sole_display_face_for_the_hero_headline___a_custom_typeface_with_tight_tracking_and_unusually_compressed_line_height_that_gives_the_32px_headline_editorial_gravitas_without_bold_weight__the__0_04em_letter_spacing_is_aggressive_for_body_size_but_measured_for_display__pulling_characters_close_enough_to_read_as_a_unified_mark_rather_than_individual_letters____font_twklausanne:
      - "**Substitute:** Söhne Breit or Editorial New (both share the tight, wide proportions)"
      - "**Weights:** 400"
      - "**Sizes:** 32px"
      - "**Line height:** 1.10"
      - "**Letter spacing:** -0.04em"
      - "**Role:** Sole display face for the hero headline — a custom typeface with tight tracking and unusually compressed line-height that gives the 32px headline editorial gravitas without bold weight. The -0.04em letter-spacing is aggressive for body size but measured for display, pulling characters close enough to read as a unified mark rather than individual letters"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 16px | 1.5 | -0.14px | `--text-body-sm` |"
      info: "| display | 32px | 1.1 | -1.28px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| navPill | 16px |"

    layout:

      - "**Section gap:** 24px"
      - "**Card padding:** 0px"
      - "**Element gap:** 8px"

  components:

    navigation_pill:
      role: "Floating top navigation"

      info: "Centered floating bar with 16px border-radius, contains brand name in Inter 400 and a hamburger icon. Sits at the top of the viewport with generous margin, appearing as a detached object rather than a full-width header bar."

    hero_headline:
      role: "Page-level statement"

      info: "Centered, single block of text at 32px in twkLausanne weight 400 with -1.28px letter-spacing and 1.10 line-height. Color #fafafa. This is the only display-size text on the site and the only use of the custom typeface."

    hero_subtitle:
      role: "Contextual description below headline"

      info: "Centered paragraph in Inter 400 at 17px, color #a3a3a3, line-height 1.29. Constrained to a text-width column (approximately 500-600px) centered in the viewport. Separated from the headline by 24px vertical gap."

    project_card_thumbnail_dark:
      role: "Work preview for projects with dark or photographic content"

      info: "Large rounded container at 24px border-radius, filled with #181818 (same as canvas — the card shape is defined by its content, not a visible background). Contains project artwork, illustration, or product screenshot that fills the container edge-to-edge with the 24px radius masking the corners."

    project_card_thumbnail_elevated:
      role: "Work preview for app/UI projects needing visible surface separation"

      info: "Same 24px border-radius and dimensions as the dark variant, but filled with #262626 to create subtle contrast against the #181818 canvas. Used for project thumbnails that contain screenshots of digital products where the surface needs to be perceptible."

    card_title_with_arrow_link:
      role: "Project name and navigation indicator"

      info: "Inter 400 at 16px in #fafafa, followed by a small ↗ arrow icon. The arrow is a typographic character or icon at the same baseline as the text. No underline, no color change — the arrow is the sole affordance signal."

    card_description:
      role: "One-line project summary"

      info: "Inter 400 at 16px in #a3a3a3, positioned directly below the card title with minimal vertical gap. Kept to one or two lines, using muted color to recede beneath the title."

    horizontal_scroll_gallery:
      role: "Full-bleed project showcase"

      info: "Single row of project cards scrolling horizontally. Full viewport width with no padding constraints. Cards are separated by 8px gaps. The scroll track is the only content section — there is no vertical stacking of project grids or multi-row arrangements."

    card_stack:
      role: "Thumbnail + meta group"

      info: "A single project card unit combining the thumbnail (24px radius) and the title + description block below it. The meta block has no visible container or background — it exists as a typographic stack on the dark canvas. Vertical rhythm: 8px between thumbnail and title, 4px between title and description."

  do_s_and_don_ts:

    do:
      - "Use #181818 as the sole page background — never introduce lighter or darker canvas variants"
      - "Use 24px border-radius for all card-shaped surfaces; use 16px for the navigation pill only"
      - "Use twkLausanne at exactly 32px with -1.28px letter-spacing for headlines; never use this typeface for body text"
      - "Use Inter weight 400 for all body, UI, and label text — never introduce weight 500, 600, or 700"
      - "Keep all spacing on the 4px grid; use 8px as the default element gap"
      - "Let project artwork and identity work provide all color on the page — the interface itself stays achromatic"
      - "Center the hero text block in the viewport and float the nav as a centered pill, not a full-width bar"

    don_t:
      - "Never add drop shadows, inner shadows, or box-shadows to any element — depth comes from surface color contrast only"
      - "Never introduce accent colors, brand colors, or saturated hues into the UI chrome — the palette is locked to four neutrals"
      - "Never use font weights other than 400 — hierarchy is built through size and color (Bone vs Ash), not weight"
      - "Never use sharp corners on containers — all surfaces are rounded (16px or 24px)"
      - "Never stack project cards in a multi-row grid — the gallery is a single horizontal scroll row only"
      - "Never add gradients, textures, patterns, or decorative backgrounds to the interface"
      - "Never use letter-spacing wider than -0.009em on body text — the slight tightening is part of the voice"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Obsidian | `#181818` | Full-bleed page canvas; everything floats on this |"
    info: "| 1 | Graphite | `#262626` | Elevated card thumbnails and content containers needing subtle separation from the canvas |"

  elevation:

    info: "No shadows. Depth is communicated exclusively through a two-level surface system (#181818 canvas → #262626 elevated cards). The absence of shadows is a deliberate editorial choice — shadows would introduce warmth and materiality that competes with the work thumbnails, while flat surfaces keep the frame weightless and gallery-like."

  imagery:

    info: "The site has no decorative imagery of its own — no photography, no abstract graphics, no textures, no patterns. The only visual content is the project work inside the card thumbnails: vibrant brand illustrations (SPSQ x Collectivo's green/pink/purple figures, Discord Nitro's astronaut), product UI screenshots (Nitro Value's green-gradient app), and black-and-white identity work (ScamSpotter). These are the ONLY color on the entire site. Icons are minimal: a single hamburger menu icon and ↗ arrow characters on card titles. The chrome itself is purely typographic and structural — the design system deliberately delegates all visual expression to the portfolio content."

  layout:

    info: "Single-page horizontal-scroll layout with no vertical page sections. The nav pill floats centered at the top of the viewport. Below it, the hero text (headline + subtitle) is centered in a constrained text-width column (~560px) within the full viewport. The remainder of the page is a single full-bleed horizontal scroll row of project cards with 8px gaps. There is no footer, no sidebar, no secondary sections, no grid system, and no page-level navigation beyond the hamburger. The entire spatial structure is: floating pill → centered text → horizontal scroll gallery. Content density is generous — cards are large, the scroll track is the primary real estate, and the chrome occupies minimal vertical space."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #fafafa (primary), #a3a3a3 (muted)"
    - "background: #181818 (page), #262626 (elevated)"
    - "border: #fafafa (neutral action border) or #a3a3a3 (subtle)"
    - "accent: none observed"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "*Build the hero section*: Dark canvas at #181818. Centered headline in twkLausanne weight 400 at 32px, color #fafafa, letter-spacing -1.28px, line-height 1.10. Below it, a subtitle in Inter weight 400 at 17px, color #a3a3a3, line-height 1.29, constrained to ~560px width and centered. 24px vertical gap between headline and subtitle."

    - "*Build the navigation pill*: A centered floating bar with 16px border-radius, dark background (#262626 or #181818 with subtle border), padding ~8px 16px. Contains the word \"Kirschberg\" in Inter weight 400 at 16px #fafafa, and a hamburger icon (three horizontal lines) on the right side. Positioned at top center with ~24px margin from viewport edge."

    - "*Build a project card*: 24px border-radius thumbnail filled with #262626 (elevated variant) or #181818 (flat variant), dimensions roughly 400x500px. Below the thumbnail, the project title in Inter 400 at 16px #fafafa followed by a ↗ arrow character. Below that, description text in Inter 400 at 16px #a3a3a3. 8px gap between thumbnail and title, 4px between title and description."

    - "*Build the horizontal gallery section*: Full-bleed row of project cards, no left/right page padding. Cards arranged in a single horizontal flex row with 8px column gap. The section scrolls horizontally on overflow. No section header, no background change from the page canvas."

  similar_brands:

    - "**rauno.me** — Same single-weight Inter on a near-black canvas with no accent color, where project work is the only chromatic element"
    - "**tony.xyz** — Same dark, near-monochrome portfolio with a custom display typeface and flat, shadowless card surfaces"
    - "**linear.app** — Same restraint of four neutrals on a dark canvas, with content (screenshots) providing all visual color and no decorative chrome"
    - "**cobe.io** — Same gallery-wall approach where a near-black background makes portfolio work thumbnails the visual focus"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #181818;
          --color-graphite: #262626;
          --color-bone: #fafafa;
          --color-ash: #a3a3a3;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-twklausanne: 'twkLausanne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-display: 32px;
          --leading-display: 1.1;
          --tracking-display: -1.28px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
        
          /* Layout */
          --section-gap: 24px;
          --card-padding: 0px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-navpill: 16px;
        
          /* Surfaces */
          --surface-obsidian: #181818;
          --surface-graphite: #262626;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #181818;
          --color-graphite: #262626;
          --color-bone: #fafafa;
          --color-ash: #a3a3a3;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-twklausanne: 'twkLausanne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-display: 32px;
          --leading-display: 1.1;
          --tracking-display: -1.28px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        }