ingmar_coenen___style_reference:
  info: "> Oversized masthead on white paper — a 295px geometric letterform pressed against a vast white wall, with tiny serif footnotes and pill-shaped navigation floating below."

  theme: "light"

  info: "Ingmar Coenen's portfolio operates as an editorial gallery wall: a single colossal Megazoid wordmark dominates the top of the page like a magazine masthead, then the system retreats into ruthless white-space and tiny Swiss-type UI. The entire color palette is binary — pure black on pure white with one warm stone-gray for ghost controls — because the work itself is supposed to carry the color. Typography is the brand: a 295px geometric display face (Megazoid) for monumental headings, ITC Garamond Light Condensed for reflective serif body copy, and Neue Haas Unica Pro at 12-13px with negative tracking for all interface chrome. Components are minimal and rounded — 100px pill buttons, 12px cards — creating a tension between the heavy display voice and the soft, almost cartoonish corner radii. Density is compact at the UI level (4-14px gaps) but generous in layout (80-120px section breathing room)."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Primary text, logo wordmark, filled pill buttons, hairline borders — the structural ink that holds every element together |"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Page background, card surfaces, button text on dark fills — the paper everything sits on |"
    info: "| Charcoal Slate | `#3a4042` | `--color-charcoal-slate` | Secondary text, link color, body copy, subtle borders — slightly softened black for hierarchy below the primary text level |"
    info: "| Pale Stone | `#f2f2f2` | `--color-pale-stone` | Ghost button and segmented toggle background — the only non-white surface, used for inactive controls like the Grid/List switcher |"
    info: "| Mid Gray | `#919191` | `--color-mid-gray` | Muted helper text, low-emphasis borders, disabled states |"
    info: "| Silver | `#cccccc` | `--color-silver` | Lightest border tone, placeholder outlines, decorative strokes |"

  tokens___typography:

    sans_serif___sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Role:** sans-serif — detected in extracted data but not described by AI"

    megazoid___monumental_display_wordmark_for_the_site_title_and_any_project_level_hero_headings__ultra_heavy_geometric_letterforms_at_near_zero_line_height__used_sparingly_as_a_single_full_bleed_statement_that_bleeds_past_container_edges__the_fill_variant_is_used_for_filled_knockout_versions_of_the_same_glyphs_____font_megazoid:
      - "**Substitute:** Druk Wide, Antonio Bold, or a heavy geometric display like Objektiv Blk"
      - "**Weights:** 400"
      - "**Sizes:** 295px"
      - "**Line height:** 0.90"
      - "**Role:** Monumental display wordmark for the site title and any project-level hero headings. Ultra-heavy geometric letterforms at near-zero line-height, used sparingly as a single full-bleed statement that bleeds past container edges. The Fill variant is used for filled/knockout versions of the same glyphs."

    itc_garamond_std_light_condensed___editorial_serif_for_reflective_about_bio_paragraphs_and_any_long_form_copy_that_needs_a_literary_voice__the_light_condensed_cut_is_deliberately_anti_corporate___it_reads_as_a_thoughtful_side_note_against_the_massive_megazoid_masthead__not_as_marketing_prose_____font_itc_garamond_std_light_condensed:
      - "**Substitute:** Cormorant Garamond Light, EB Garamond Light, or Playfair Display"
      - "**Weights:** 400"
      - "**Sizes:** 36px"
      - "**Line height:** 0.94"
      - "**Role:** Editorial serif for reflective about/bio paragraphs and any long-form copy that needs a literary voice. The Light Condensed cut is deliberately anti-corporate — it reads as a thoughtful side note against the massive Megazoid masthead, not as marketing prose."

    neue_haas_unica_pro___primary_ui_and_body_typeface___the_workhorse_for_navigation_labels__project_metadata__links__and_inline_annotations__set_extremely_tight_at__0_02em_letter_spacing_and_1_1_line_height__giving_labels_a_compact__swiss_catalog_density_____font_neue_haas_unica_pro:
      - "**Substitute:** Inter, Neue Haas Grotesk, or Helvetica Neue Medium"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 13px"
      - "**Line height:** 1.10"
      - "**Letter spacing:** -0.02em"
      - "**Role:** Primary UI and body typeface — the workhorse for navigation labels, project metadata, links, and inline annotations. Set extremely tight at -0.02em letter-spacing and 1.1 line-height, giving labels a compact, Swiss-catalog density."

    megazoid_regular___megazoid_regular___detected_in_extracted_data_but_not_described_by_ai____font_megazoid_regular:
      - "**Weights:** 400"
      - "**Sizes:** 295px"
      - "**Line height:** 0.9"
      - "**Role:** Megazoid Regular — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| heading | 36px | 0.94 | — | `--text-heading` |"
      info: "| display | 295px | 0.9 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    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: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| images | 12px |"
      info: "| buttons | 100px |"
      info: "| smallElements | 4px |"

    layout:

      - "**Section gap:** 80px"
      - "**Card padding:** 14px"
      - "**Element gap:** 10px"

  components:

    sticky_navigation_bar:
      role: "Persistent top header with rounded pill nav items and a CTA"

      info: "Full-width white bar with no visible border, floated 8px from the top edge. Left cluster: three pill-shaped nav links ('Work', 'About', 'Capabilities') with 100px radius, 9px top padding, 14px horizontal padding, 12px Neue Haas Unica Pro Medium text in #000000. Right cluster: a filled black 'Start a project' pill button with white text. The bar sits as a floating island on scroll with subtle shadow or just edge proximity."

    filled_pill_button:
      role: "Primary action — the only chromatic-strength CTA in the system"

      info: "100px border-radius, #000000 background, #ffffff text. Horizontal padding 14px, vertical padding 9px. Neue Haas Unica Pro 12px medium, letter-spacing -0.02em. No border. The fully rounded shape softens what would otherwise be an aggressive black block — a signature decision that makes the CTA feel friendly despite the monochrome severity."

    ghost_nav_pill:
      role: "Inactive or default nav link"

      info: "Same 100px radius and 12px Neue Haas Unica Pro text as the filled button, but transparent background and #000000 text. On hover or active state, background fills to #000000 with text inverting to #ffffff — a single-color toggle rather than introducing any new hue."

    segmented_view_toggle:
      role: "Grid/List layout switcher at page bottom"

      info: "Two adjacent pill segments ('Grid' and 'List') in a shared capsule. Active segment: #000000 background with #ffffff text. Inactive segment: #f2f2f2 background with #000000 text. 100px radius on outer container, shared internal gap of 4px. 12px Neue Haas Unica Pro labels."

    work_card___image:
      role: "Project tile with a product/photograph area"

      info: "Full-bleed image inside a 12px-radius container, no visible card border. Metadata (project name, client, number) overlaid in white Neue Haas Unica Pro 12px at lower-left of the image, set with -0.02em tracking. Aspect ratio varies per project but always cropped tight — the object is the hero, no decorative framing."

    work_card___typographic:
      role: "Project tile expressed as type-only artwork"

      info: "Cream/warm-white background surface within a 12px-radius card. Central content is a circular arrangement of repeated text (e.g. 'Haven-1' rotating around a circle) with a small caps center label ('MICROGRAVITY RESEARCH LAB') set in Neue Haas Unica Pro 12px. No photographic element — the typography itself is the project artifact."

    about_paragraph_block:
      role: "Long-form bio copy"

      info: "Right-aligned or right-anchored text block set in ITC Garamond Std Light Condensed 36px, line-height 0.94, #000000. No max-width constraint — text sits as a narrow column aligned to the right margin. The extremely tight line-height at display size gives the paragraph a compressed, almost headline-like weight despite being body copy."

    masthead_wordmark:
      role: "The site identity — a full-bleed display heading"

      info: "Megazoid Regular at 295px, line-height 0.9, #000000, set flush-left and bleeding past viewport edges. Single line. No margin above or below — it IS the page. The Megazoid Fill variant may be used for knock-out or reversed treatments on dark surfaces."

    link_with_underline:
      role: "Inline link in body or nav context"

      info: "Neue Haas Unica Pro 12px, #3a4042 text, 1px solid #3a4042 underline offset ~4px from baseline. No hover state color change — only weight or underline thickness shifts. Underline acts as a hairline divider rather than decorative emphasis."

    card_metadata_label:
      role: "Small caps project metadata overlaid on images"

      info: "Neue Haas Unica Pro 12px, letter-spacing -0.02em, uppercase, #ffffff on dark images or #3a4042 on light surfaces. Set in a tight two-line stack (name on line 1, detail on line 2) with ~4px row gap."

  do_s_and_don_ts:

    do:
      - "Use Megazoid at 295px with line-height 0.9 for any site-level display heading — it is the only element that earns full-bleed real estate"
      - "Set all UI text in Neue Haas Unica Pro 12-13px with letter-spacing -0.02em and line-height 1.1"
      - "Use 100px border-radius on every interactive element (buttons, nav pills, toggles) to soften the monochrome severity"
      - "Reach for ITC Garamond Light Condensed 36px for any reflective or editorial paragraph longer than two lines"
      - "Maintain 80-120px vertical breathing room between major layout sections"
      - "Keep the entire palette to black, white, charcoal, and pale stone — let project imagery supply any color"
      - "Use 12px radius for all cards and image containers, 4px for inline elements and hairline details"

    don_t:
      - "Never introduce a chromatic color — the 0% colorfulness is structural to the brand"
      - "Never set body copy below 12px or above 36px (the type system is intentionally a two-scale system: tiny UI and monumental display)"
      - "Never use box-shadows for elevation — rely on the stark black/white contrast and 12px corner radius for surface separation"
      - "Never center-align the Garamond about paragraph — it lives right-anchored as a deliberate editorial decision"
      - "Never use a system font for body or nav — Neue Haas Unica Pro's tight tracking is the signature, not a fallback"
      - "Never add decorative gradients, textures, or background patterns to cards or surfaces"
      - "Never use line-height above 1.2 on Neue Haas Unica Pro — the tight 1.1 is part of the Swiss-catalog character"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Default page background, the dominant visual field |"
    info: "| 2 | Stone Fill | `#f2f2f2` | Ghost controls and inactive toggle segments |"
    info: "| 3 | Ink Surface | `#000000` | Filled pill buttons and the inverted logo zone |"

  elevation:

    - "**Floating Navigation Bar:** `0 2px 12px rgba(0,0,0,0.06)`"

  imagery:

    info: "Photography is product-focused and tightly cropped — objects fill the frame with no lifestyle context or environmental staging. The wood furniture piece in the work grid is shot against a neutral studio ground with dramatic shadow, treating the object as sculpture. There is no people photography, no color-grading beyond natural tones, and no decorative illustration. Type-only project cards (like the 'Haven-1' circular composition) replace imagery when the project IS the typography. The visual density is overwhelmingly text-and-object — no atmospheric or environmental photography appears anywhere."

  layout:

    info: "The page opens with a full-bleed monumental wordmark (INGMAR at 295px) that bleeds past both viewport edges, establishing a magazine-cover hierarchy. Below the masthead, a floating sticky nav bar sits as a horizontal island. The about paragraph is right-anchored to the right margin, creating a deliberate asymmetry against the left-aligned logo. The work section uses a 2-column grid of project cards with varying aspect ratios — image cards on one side, typographic cards on the other — creating a checkerboard rhythm. Cards use 12px radius and no visible borders; separation is achieved through white space alone. At the page bottom, a compact Grid/List toggle anchors the layout. Section gaps are 80-120px, generous enough to let the massive type breathe while keeping the UI itself compact. Navigation is a single sticky top bar with no sidebar, no mega-menu, no footer beyond the view toggle."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #3a4042"
    - "accent: #000000 (used for filled pill buttons — the only 'accent' in this binary system)"
    - "muted text: #919191"
    - "ghost surface: #f2f2f2"
    - "primary action: #000000 (filled action)"

    example_component_prompts:

    - "Create a sticky navigation bar: white #ffffff background, 100px-radius pill nav links on the left in Neue Haas Unica Pro 12px #000000 with 14px horizontal and 9px vertical padding. On the right, a filled black pill button (#000000 bg, #ffffff text, 100px radius, same padding) reading 'Start a project'. The bar floats 8px from the top with a subtle 0 2px 12px rgba(0,0,0,0.06) shadow."

    - "Create a monumental masthead: Megazoid Regular 295px, line-height 0.9, #000000, set flush-left bleeding past viewport edges, occupying the full top of the page with no margin."

    - "Create a work grid card: 12px border-radius container, full-bleed product photograph inside, with overlaid metadata in Neue Haas Unica Pro 12px #ffffff, letter-spacing -0.02em, uppercase, positioned at lower-left with 14px padding."

    - "Create an about paragraph: ITC Garamond Std Light Condensed 36px, line-height 0.94, #000000, right-anchored to the right margin, no max-width constraint, reading as a narrow editorial column."

    - "Create a Grid/List toggle: two adjacent pill segments in a shared 100px-radius capsule, 4px gap between them. Active segment #000000 bg with #ffffff text, inactive segment #f2f2f2 bg with #000000 text. Labels in Neue Haas Unica Pro 12px."

  typographic_philosophy:

    info: "The system runs on a three-voice type hierarchy that creates deliberate tension: Megazoid shouts at 295px as a once-per-page masthead, Garamond Light Condensed whispers at 36px in editorial paragraphs, and Neue Haas Unica Pro at 12px with -0.02em tracking handles all functional UI. No font bridges these three scales — there is no 40px or 60px intermediate. This means any new page either commits to the monumental register (Megazoid) or the micro-catalog register (Unica), and Garamond only appears for human-voiced, reflective copy. The negative letter-spacing on the UI font and the extreme tightness of the display line-heights (0.9-0.94) are the signature: the type feels compressed and confident rather than airy and friendly."

  similar_brands:

    - "**Pentagram** — Same editorial-portfolio approach: massive type as identity, monochromatic severity, work presented as generous full-bleed case study cards"
    - "**Rauno Freiberg** — Same Swiss-grid minimalism with oversized display type dominating a white canvas and tiny UI labels in a tight sans-serif"
    - "**Locomotive (locomotive.ca)** — Same dark-text-on-white discipline with a large custom wordmark, pill-shaped navigation, and project-grid card layouts"
    - "**Manuel Bortoletti** — Same monolithic typographic identity — a single oversized display letterform at the top of the page against a vast white field"
    - "**Haus** — Same pill-button navigation over a minimal white portfolio layout with tight Swiss sans-serif UI labels"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-black: #000000;
          --color-canvas-white: #ffffff;
          --color-charcoal-slate: #3a4042;
          --color-pale-stone: #f2f2f2;
          --color-mid-gray: #919191;
          --color-silver: #cccccc;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-megazoid: 'Megazoid', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-itc-garamond-std-light-condensed: 'ITC Garamond Std Light Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-haas-unica-pro: 'Neue Haas Unica Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-megazoid-regular: 'Megazoid Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-heading: 36px;
          --leading-heading: 0.94;
          --text-display: 295px;
          --leading-display: 0.9;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --section-gap: 80px;
          --card-padding: 14px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-full: 100px;
          --radius-full-2: 200px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-images: 12px;
          --radius-buttons: 100px;
          --radius-smallelements: 4px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-stone-fill: #f2f2f2;
          --surface-ink-surface: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-black: #000000;
          --color-canvas-white: #ffffff;
          --color-charcoal-slate: #3a4042;
          --color-pale-stone: #f2f2f2;
          --color-mid-gray: #919191;
          --color-silver: #cccccc;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-megazoid: 'Megazoid', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-itc-garamond-std-light-condensed: 'ITC Garamond Std Light Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-haas-unica-pro: 'Neue Haas Unica Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-megazoid-regular: 'Megazoid Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-heading: 36px;
          --leading-heading: 0.94;
          --text-display: 295px;
          --leading-display: 0.9;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-full: 100px;
          --radius-full-2: 200px;
        }