leonid_kostetskyi___style_reference:
  info: "> Wine-stained editorial gallery — oversized typographic statements floating on a white gallery wall, every mark a deliberate negative space."

  theme: "light"

  info: "Leonid Kostetskyi's site is a single-canvas editorial spread: a near-white gallery wall dominated by oversized Neue Haas Display headlines set in a muted dark-wine accent. The system runs on extreme contrast — one chromatic color (#472425, a desaturated oxblood) does all the brand work against pure white, with black and near-black handling secondary text and hairlines. Typography is the product: display faces reach 188px with negative tracking, sitting beside 8–15px uppercase utility labels. Spacing is expansive and editorial, with massive vertical breathing room between elements and no decorative ornamentation beyond one small radial starburst mark. The feel is Swiss-poster meets personal portfolio — confident, restrained, slightly austere, and unmistakably authored."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Oxblood | `#472425` | `--color-oxblood` | The singular chromatic identity — display headlines, nav links, body text, borders, and the active theme toggle. This muted dark-wine red carries all brand presence; the system is monochrome with this one warm, desaturated red as the only color |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas and card surfaces. The background that the typography sits on; it reads as gallery white, not pure technical white |"
    info: "| Carbon Black | `#000000` | `--color-carbon-black` | Secondary text, decorative borders, and structural hairlines. Used as the neutral companion to Oxblood when chromatic emphasis isn't needed |"
    info: "| Graphite | `#121212` | `--color-graphite` | Tertiary text and body borders. A softer near-black for inline content where pure black feels too harsh |"
    info: "| Ash | `#999999` | `--color-ash` | Muted helper text, the inactive theme toggle label, and low-emphasis annotations |"
    info: "| Crimson | `#e73737` | `--color-crimson` | Red outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color |"

  tokens___typography:

    neue_haas_display___the_display_face_used_for_the_nameplate_and_role_titles__sits_at_135_188px_with_tight_negative_tracking__0_025em_to__0_020em___the_oversized_scale_is_the_signature__there_is_no_intermediate_heading_tier__just_utility_text_and_then_this_monumental_display_____font_neue_haas_display:
      - "**Substitute:** Inter, Helvetica Neue, or Suisse Int'l at matching weight"
      - "**Weights:** 400"
      - "**Sizes:** 11px, 12px, 15px, 27px, 135px, 143px, 165px, 188px"
      - "**Line height:** 0.86–1.00"
      - "**Letter spacing:** -0.0250em at 188px, -0.0200em at 135px"
      - "**Role:** The display face used for the nameplate and role titles. Sits at 135–188px with tight negative tracking (-0.025em to -0.020em) — the oversized scale is the signature; there is no intermediate heading tier, just utility text and then this monumental display."

    sfuidisplay___body_and_utility_type__weight_300_whispers_at_body_sizes_for_a_quiet__label_like_reading_voice__weight_400_carries_the_uppercase_tracked_annotations_8_12px_that_label_sections_and_form_microcopy__the_narrow_range_8_21px_confirms_this_is_a_system_with_two_voices__monumental_display_or_quiet_label_____font_sfuidisplay:
      - "**Substitute:** Inter, SF Pro Text, or system-ui"
      - "**Weights:** 300, 400"
      - "**Sizes:** 8px, 9px, 11px, 12px, 15px, 18px, 19px, 20px, 21px"
      - "**Line height:** 1.00–1.60"
      - "**Role:** Body and utility type. Weight 300 whispers at body sizes for a quiet, label-like reading voice; weight 400 carries the uppercase tracked annotations (8–12px) that label sections and form microcopy. The narrow range (8–21px) confirms this is a system with two voices: monumental display or quiet label."

    arial___rare_fallback_for_button_labels_where_the_custom_faces_aren_t_available___not_a_designed_choice__a_system_safety_net_____font_arial:
      - "**Substitute:** system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.20"
      - "**Role:** Rare fallback for button labels where the custom faces aren't available — not a designed choice, a system safety net."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.6 | — | `--text-caption` |"
      info: "| body | 19px | 1.4 | — | `--text-body` |"
      info: "| subheading | 21px | 1.1 | — | `--text-subheading` |"
      info: "| heading | 27px | 1 | — | `--text-heading` |"
      info: "| heading-lg | 135px | 0.86 | -2.7px | `--text-heading-lg` |"
      info: "| display | 165px | 0.86 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    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: "| 20 | 20px | `--spacing-20` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Section gap:** 200px"
      - "**Card padding:** 12px"
      - "**Element gap:** 16px"

  components:

    nameplate_headline:
      role: "Primary identity statement — the personal name at hero scale"

      info: "Neue Haas Display weight 400 at 165–188px, color Oxblood (#472425), letter-spacing -0.025em, line-height 0.86. Sits flush-left at the canvas edge. No other element competes at this scale."

    role_display_title:
      role: "Professional title, secondary hero element"

      info: "Neue Haas Display weight 400 at 135–143px, color Oxblood, letter-spacing -0.020em, line-height 0.86. Mirrors the nameplate in scale and treatment, creating a typographic diptych."

    editorial_caption_block:
      role: "Small uppercase body annotation — manifesto or description copy"

      info: "SFUIDisplay weight 300 at 11–12px, uppercase, color Oxblood, line-height 1.6. Tracks tightly, sits in narrow left-aligned columns beneath or beside the display type. The quiet voice that contrasts the monumental headlines."

    top_right_navigation:
      role: "Primary site navigation"

      vertical_stack_of_text_links: "Home, About, Projects, Awards, Contacts. SFUIDisplay weight 400 at 11–12px, color Oxblood, no bullets, no borders. Right-aligned, floats in the upper-right corner with the theme toggle below."

    theme_toggle:
      role: "Light/dark mode switcher"

      info: "Two stacked labels — DARK THEME (active option in Oxblood or Carbon) and LIGHT THEME (inactive in Ash #999999). SFUIDisplay weight 400 at 8–9px, uppercase. No checkbox, no switch UI — pure typographic toggle."

    starburst_mark:
      role: "Decorative personal signature"

      info: "Small radial line illustration (sun/starburst pattern) in Oxblood, approximately 40px diameter, placed in the lower-left near the editorial caption. The only illustration in the system — a visual autograph."

    project_card:
      role: "Portfolio work tile"

      info: "White surface with 1px border in Oxblood or Carbon Black, 12px internal padding, 0px radius. Image or content fills the frame; the border is the only container treatment. No shadow, no rounded corners."

    hairline_divider:
      role: "Structural separation between content blocks"

      info: "1px line in Oxblood (#472425) or Carbon (#000000), full-width or section-width. The primary mechanism for breaking up the white canvas."

    inline_link:
      role: "Navigable text link within body copy"

      info: "SFUIDisplay weight 400 at body size, color Oxblood, underline offset 2px or none. No button chrome — links live as chromatic words in a monochrome stream."

  do_s_and_don_ts:

    do:
      - "Use Oxblood (#472425) for all display headlines, nav links, and body text — it is the sole chromatic voice"
      - "Set display type at 135–188px in Neue Haas Display weight 400 with -0.025em letter-spacing and 0.86 line-height"
      - "Use SFUIDisplay weight 300 at 11–15px for body and caption copy; reserve weight 400 for navigation and active labels"
      - "Maintain 200px minimum vertical gap between major sections to preserve the editorial gallery rhythm"
      - "Separate content blocks with 1px Oxblood or Carbon hairlines — never with shadows, fills, or rounded containers"
      - "Keep all corners square (0px radius) across cards, buttons, and inputs — the system has no soft edges"
      - "Place the starburst mark once per page in the lower-left zone as a signature element"

    don_t:
      - "Never introduce a second chromatic color — Oxblood is the only hue, with Crimson reserved exclusively for hover/error states"
      - "Don't use intermediate heading sizes between 27px and 135px — the system jumps from body text to monumental display with nothing in between"
      - "Don't apply box-shadows, glows, or drop effects to any element — hierarchy comes from scale and space, not depth"
      - "Don't round corners on cards, buttons, or images — 0px radius everywhere maintains the editorial sharpness"
      - "Don't use color blocks or filled backgrounds behind text — content sits directly on white with hairline borders at most"
      - "Don't center body copy or long-form text — the layout is flush-left and asymmetric, magazine-spread style"
      - "Don't add decorative gradients, blurs, or atmospheric effects — the visual language is flat, printed, and graphic"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Full-bleed page background — the gallery wall |"
    info: "| 2 | Card | `#ffffff` | Project cards and content blocks sit flush on the same white, separated only by 1px borders in Oxblood or Carbon |"

  elevation:

    info: "No shadows. Elevation is expressed through generous negative space and 1px hairline borders in Oxblood or Carbon Black. Cards and content blocks sit flush on the white canvas — the system trusts typography and whitespace to create hierarchy rather than depth."

  imagery:

    info: "The system is overwhelmingly text-dominant. Imagery is not present in the hero or structural regions — the nameplate and role title ARE the hero. Where project work appears, it will be contained within square-cornered frames bordered by 1px Oxblood hairlines, sitting flush on white. The only decorative graphic is a small radial starburst line illustration in Oxblood, used once as a signature mark. Photography or project visuals, if introduced, should be treated as gallery prints: full-bleed within the card frame, no rounded corners, no overlays, no captions integrated into the image itself."

  layout:

    info: "Full-bleed editorial spread with no max-width container. The hero is a single screen composed of four zones: nameplate flush-left at 188px occupying the upper-left quadrant; vertical nav stack in the upper-right; a small uppercase manifesto caption in the lower-left; and a 135px role title ('CREATIVE DIRECTOR') flush-left in the lower-right. The composition is deliberately asymmetric — weight is distributed diagonally from upper-left (name) to lower-right (role). Section rhythm is built on 200px vertical gaps with 1px Oxblood hairlines marking transitions. Content blocks stack as full-width bands rather than columns; project work would be a single-column vertical flow. Navigation is minimal text links in the top-right corner, with a typographic theme toggle below. No sticky header, no sidebar, no card grids visible in the hero — the first screen is a typographic poster."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #472425 (Oxblood — all headings, body, links)"
    - "background: #ffffff (Paper White — full canvas)"
    - "border: #472425 or #000000 (1px hairlines only)"
    - "accent: #472425 (Oxblood — the singular brand color)"
    - "muted: #999999 (Ash — inactive toggles, helper text)"
    - "primary action: #472425 (outlined action border)"

    example_component_prompts:
    - "*Create a nameplate headline:* Neue Haas Display weight 400, 188px, color #472425, letter-spacing -4.7px, line-height 0.86. Flush-left, no margin. The text fills the upper-left zone of a full-bleed white canvas."

    - "*Create a role display title:* Neue Haas Display weight 400, 135px, color #472425, letter-spacing -2.7px, line-height 0.86. Sits in the lower-right quadrant, flush-left, balancing the nameplate diagonally."

    - "*Create an editorial caption block:* SFUIDisplay weight 300, 11px, uppercase, color #472425, line-height 1.6, max-width 180px. Narrow column, flush-left, positioned in the lower-left zone."

    - "*Create a vertical navigation stack:* SFUIDisplay weight 400, 11px, color #472425, text-decoration underline, line-height 1.6. Items: Home, About, Projects, Awards, Contacts. Right-aligned, top-right corner of the canvas."

    - "*Create a project card frame:* White surface (#ffffff), 1px border in #472425, 12px padding, 0px border-radius. No shadow. Image or content sits flush within the frame against the same white canvas."

  similar_brands:

    - "**Tobias van Schneider** — Same oversized editorial typography as the sole hero element, single-color brand identity, and aggressive negative space"
    - "**Pentagram partner sites** — Swiss-poster typographic approach with monumental name-as-headline and minimal color palette"
    - "**Locomotive (agency portfolio)** — Editorial full-bleed spreads with display-scale typography and no card grids or conventional UI chrome"
    - "**Arnold St. (creative director portfolio)** — Asymmetric single-screen compositions where the name and role title function as the entire page design"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-oxblood: #472425;
          --color-paper-white: #ffffff;
          --color-carbon-black: #000000;
          --color-graphite: #121212;
          --color-ash: #999999;
          --color-crimson: #e73737;
        
          /* Typography — Font Families */
          --font-neue-haas-display: 'Neue Haas Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sfuidisplay: 'SFUIDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.6;
          --text-body: 19px;
          --leading-body: 1.4;
          --text-subheading: 21px;
          --leading-subheading: 1.1;
          --text-heading: 27px;
          --leading-heading: 1;
          --text-heading-lg: 135px;
          --leading-heading-lg: 0.86;
          --tracking-heading-lg: -2.7px;
          --text-display: 165px;
          --leading-display: 0.86;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-56: 56px;
          --spacing-72: 72px;
          --spacing-200: 200px;
        
          /* Layout */
          --section-gap: 200px;
          --card-padding: 12px;
          --element-gap: 16px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-oxblood: #472425;
          --color-paper-white: #ffffff;
          --color-carbon-black: #000000;
          --color-graphite: #121212;
          --color-ash: #999999;
          --color-crimson: #e73737;
        
          /* Typography */
          --font-neue-haas-display: 'Neue Haas Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sfuidisplay: 'SFUIDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.6;
          --text-body: 19px;
          --leading-body: 1.4;
          --text-subheading: 21px;
          --leading-subheading: 1.1;
          --text-heading: 27px;
          --leading-heading: 1;
          --text-heading-lg: 135px;
          --leading-heading-lg: 0.86;
          --tracking-heading-lg: -2.7px;
          --text-display: 165px;
          --leading-display: 0.86;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-56: 56px;
          --spacing-72: 72px;
          --spacing-200: 200px;
        }