klim___style_reference:
  info: "> typographic gallery in a black box — a curator's vitrina where each specimen hangs in its own dark band"

  theme: "mixed"

  info: "Klim Type Foundry presents its library as a typographic gallery: each typeface gets its own full-bleed band, set in itself, with no ornament. The site alternates between a matte black gallery mode and a pale studio-gray mode, letting the letterforms carry all the visual weight. UI chrome is reduced to a thin black header strip and small orange label tags; everything else is type. The accent system is deliberately loud — vivid orange-red, electric blue, mint teal — used as tiny color punches against an otherwise neutral monochrome canvas."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Studio Charcoal | `#101c19` | `--color-studio-charcoal` | Page canvas, primary background — a near-black with a green undertone that reads as neutral but feels warmer than pure black |"
    info: "| Gallery Black | `#000000` | `--color-gallery-black` | Feature bands, specimen backgrounds, header bar — pure black for maximum type contrast |"
    info: "| Charcoal Surface | `#1c1c1c` | `--color-charcoal-surface` | Elevated surface, input fields, secondary panel backgrounds — one step lighter than the canvas |"
    info: "| Slate Mist | `#3c585f` | `--color-slate-mist` | Muted accent band, tertiary surface — desaturated blue-gray used as an alternate section background |"
    info: "| Graphite | `#555555` | `--color-graphite` | Mid-tone borders, muted body text on light sections, card outlines |"
    info: "| Steel | `#646464` | `--color-steel` | Secondary borders, subdued link text on dark backgrounds |"
    info: "| Fog | `#7f7f7f` | `--color-fog` | Tertiary borders, inactive UI elements, secondary text |"
    info: "| Ash | `#939393` | `--color-ash` | Medium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color |"
    info: "| Marble | `#f9f9f9` | `--color-marble` | Light-mode page canvas, pale gray that photographs cleanly for specimen presentations |"
    info: "| Bone | `#ffffff` | `--color-bone` | Primary text on dark backgrounds, type specimen letterforms, button labels, high-contrast surfaces |"
    info: "| Flare Orange | `#d33c03` | `--color-flare-orange` | Label tags, collection names, editorial annotations — a saturated vermilion that reads as the foundry's signature mark on light backgrounds |"
    info: "| Signal Red | `#e90702` | `--color-signal-red` | Hot accent on dark surfaces, inline highlights, the reddest red in the palette for maximum voltage |"
    info: "| Electric Blue | `#24a7f2` | `--color-electric-blue` | Interactive highlights, active states, link emphasis — a bright cyan-blue that pops against black |"
    info: "| Mint Pulse | `#93ffe6` | `--color-mint-pulse` | Decorative text accent, special-occasion highlights — a pale mint used sparingly for emphasis |"
    info: "| Canary | `#ffff79` | `--color-canary` | Rare chromatic accent, used for the highest-attention text moment on dark backgrounds |"
    info: "| Blush | `#ffe6d9` | `--color-blush` | Soft warm accent, subtle text tint — a cream-pink that warms dark sections without competing with type |"

  tokens___typography:

    soehne___soehne___detected_in_extracted_data_but_not_described_by_ai____font_soehne:
      - "**Weights:** 400, 700"
      - "**Sizes:** 16px, 36px"
      - "**Line height:** 0.98, 1.19, 1.2, 1.33, 1.5"
      - "**OpenType features:** `\"ordn\"; \"tnum\"`"
      - "**Role:** SOEHNE — detected in extracted data but not described by AI"

    s_hne___primary_ui_typeface___used_for_navigation__body_text__buttons__form_labels__and_all_functional_interface_text__tight_line_heights_0_98_1_20_at_display_sizes__generous_1_50_for_body__two_weights_only__regular_for_content__bold_for_emphasis__tabular_numerals_via_tnum_for_price_alignment__ordinals_via_ordn_____font_shne:
      - "**Substitute:** Inter, Söhne (Klim's own)"
      - "**Weights:** 400, 700"
      - "**Sizes:**"
      - "**Line height:** 1.19, 1.20, 1.33, 1.50"
      - "**OpenType features:** `\"ordn\" on, \"tnum\" on`"
      - "**Role:** Primary UI typeface — used for navigation, body text, buttons, form labels, and all functional interface text. Tight line-heights (0.98–1.20) at display sizes; generous (1.50) for body. Two weights only: regular for content, bold for emphasis. Tabular numerals via tnum for price alignment; ordinals via ordn."

    s_hne_ikon___iconographic_variant_of_s_hne_for_interface_glyphs__special_characters__and_numeric_ui_elements__same_voice_as_s_hne_but_with_alternate_character_forms_via_calt_and_tabular_figures_via_tnum_____font_shne_ikon:
      - "**Substitute:** Söhne (Klim's own)"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.20, 1.33, 1.50"
      - "**OpenType features:** `\"tnum\" on, \"calt\" on`"
      - "**Role:** Iconographic variant of Söhne for interface glyphs, special characters, and numeric UI elements. Same voice as Söhne but with alternate character forms via calt and tabular figures via tnum."

    soehne_ikon___soehne_ikon___detected_in_extracted_data_but_not_described_by_ai____font_soehneikon:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.2, 1.33, 1.5"
      - "**OpenType features:** `\"tnum\"; \"calt\"`"
      - "**Role:** SOEHNE_IKON — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 36px | 1.19 | — | `--text-heading` |"
      info: "| display | 56px | 1.1 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 34 | 34px | `--spacing-34` |"
      info: "| 69 | 69px | `--spacing-69` |"
      info: "| 137 | 137px | `--spacing-137` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 69px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    top_bar:
      role: "Primary site navigation"

      info: "Full-width black bar (#000000), fixed/sticky, 8px vertical padding, 20px horizontal padding. Left-aligned: brand name 'Klim Type Foundry' in white Söhne 16px regular, then 'Fonts' as a 16px Söhne link in Flare Orange (#d33c03). Right-aligned: hamburger menu icon in white. No drop shadow, no border — the bar sits as a pure black strip."

    label_tag:
      role: "Collection or edition annotation"

      info: "Inline rectangular tag with Flare Orange (#d33c03) background, white Söhne 16px text, 2px border-radius, 8px horizontal and 4–5px vertical padding. Used to label specimen collections (e.g. 'Die Grotesk', 'American Grotesk Collection'). Positioned bottom-left of the image it annotates."

    typeface_specimen_band:
      role: "Full-width type showcase row in the font catalogue"

      info: "Full-bleed horizontal band, one per typeface family. Alternates between Gallery Black (#000000), Charcoal Surface (#1c1c1c), Slate Mist (#3c585f), and Marble (#f9f9f9). Contains three zones: (1) family name set in the typeface itself at 36px+ in Bone (#ffffff on dark bands) or Graphite (#555555 on light bands), left-aligned with ~20px left padding; (2) variant list in Söhne 16px regular, center-aligned, listing sub-styles (e.g. 'Founders Grotesk', 'Founders Grotesk Condensed'); (3) 'Buy' links in Söhne 16px, right-aligned, in Fog (#7f7f7f) on dark or Graphite on light. No card chrome, no borders between zones — the three columns float in the band."

    specimen_variant_row:
      role: "Individual sub-style entry within a typeface band"

      info: "Single line of Söhne 16px text listing one variant name (e.g. 'Founders Grotesk Condensed'). Text color matches the band's text tier: Bone on dark, Graphite on light. 7px row-gap between variant entries. No bullet, no chevron — pure text."

    buy_link:
      role: "Purchase action for a typeface variant"

      info: "Söhne 16px, right-aligned in the specimen band. Text color: Fog (#7f7f7f) on dark bands, Graphite (#555555) on light. No background fill, no border, no padding — the word 'Buy' alone, set as text. Hover state brightens to Bone or Electric Blue."

    image_specimen:
      role: "Full-bleed type-in-context or object photography"

      info: "Edge-to-edge image with no border-radius (0px), no frame, no caption. Fills the full viewport width. May be paired with a Label Tag in the bottom-left corner. Images sit on the page canvas (Marble for light sections, Gallery Black for dark sections) with no gutter."

    hamburger_menu_trigger:
      role: "Mobile and desktop menu toggle"

      info: "Three short horizontal lines in Bone (#ffffff), 2px thick, right-aligned in the Top Bar. No background, no border. Touch target approximately 24×24px."

    input_field:
      role: "Form input for search or filter"

      info: "Charcoal Surface (#1c1c1c) background, Graphite (#555555) 1px border, 2px border-radius, 8px horizontal padding, Söhne 16px text in Bone. No visible focus ring color specified — likely defaults to Electric Blue or a 1px border darken."

    text_link:
      role: "Inline hyperlink within body or navigation content"

      info: "Söhne 16px, no underline by default. Color varies by context: Flare Orange (#d33c03) for primary nav links, Electric Blue (#24a7f2), Signal Red (#e90702), Mint Pulse (#93ffe6), or Canary (#ffff79) for inline links on dark backgrounds. Ash (#939393) 1px border may appear on interactive containers."

    section_divider:
      role: "Horizontal rule between specimen bands"

      info: "Implicit — specimen bands stack directly with no visible divider. The color change of the background itself creates separation. No border, no line, no whitespace gap greater than the band padding."

    collection_annotation:
      role: "Editorial label overlaid on specimen imagery"

      info: "Identical visual treatment to the Label Tag — Flare Orange (#d33c03) background, white Söhne text, 2px radius, small padding. Anchored to bottom-left of the image it describes. Functions as a caption that can be clicked to enter a collection."

  do_s_and_don_ts:

    do:
      - "Set all primary UI text in Söhne 16px/400 with Söhne 700 for emphasis only"
      - "Use Flare Orange (#d33c03) for label tags, collection names, and editorial annotations — this is the foundry's signature mark"
      - "Alternate specimen band backgrounds between #000000, #1c1c1c, #3c585f, and #f9f9f9 to create rhythm without dividers"
      - "Use 2px border-radius on all interactive elements (buttons, tags, inputs) — this near-sharp corner is the system's geometric signature"
      - "Set type specimens in the typeface they represent at 36px+ — the font IS the content"
      - "Enable tnum and ordn font features on all Söhne usage for consistent number and ordinal rendering"
      - "Maintain tight spacing: 8px component padding, 10px element gaps, 20px horizontal page padding"

    don_t:
      - "Do not introduce drop shadows, gradients, or glow effects — the system is flat and shadowless"
      - "Do not use border-radius greater than 2px — the design is intentionally near-sharp"
      - "Do not use color on large background fills — chromatic colors are reserved for tiny label tags and text accents"
      - "Do not set body or display type in colors other than Bone (#ffffff on dark) or Graphite (#555555 on light) — chromatic type is for special emphasis only"
      - "Do not add visible section dividers or whitespace gaps larger than ~69px between bands — the background color shift IS the divider"
      - "Do not use system fonts for UI text — Söhne is the voice of the interface"
      - "Do not place more than one chromatic color in a single component — each color punch gets its own moment"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Gallery Black | `#000000` | Feature band, specimen background |"
    info: "| 2 | Studio Charcoal | `#101c19` | Primary page canvas, page background |"
    info: "| 3 | Charcoal Surface | `#1c1c1c` | Elevated panel, input field |"
    info: "| 4 | Slate Mist | `#3c585f` | Alternate band background |"
    info: "| 5 | Marble | `#f9f9f9` | Light-mode page canvas |"

  elevation:

    the_system_is_deliberately_flat: "zero drop shadows, zero glow, zero gradient. Elevation is communicated entirely through background-color stacking (canvas → charcoal surface → elevated panel) and through the alternating band backgrounds. This is a poster-gallery approach where type and imagery carry all dimensional weight, not UI chrome."

  imagery:

    info: "Full-bleed object photography and editorial imagery serve as type-in-context specimens: industrial objects (crates), surreal material studies (bacon flag), and typographic compositions. Images fill the viewport edge-to-edge with zero border-radius and no framing. Color treatment is natural and unstylized — the objects speak for themselves against a pure black or pale-gray studio background. No illustrations, no icons beyond the hamburger glyph, no decorative graphics. The images function as both content and atmosphere."

  layout:

    info: "Full-bleed page model with no max-width container. The Top Bar spans the full viewport width. Below it, sections alternate between full-viewport image specimens and stacked specimen bands. The fonts catalogue uses a three-column structure within each band: family name left-aligned, variant list centered, Buy links right-aligned — no gutters, no card chrome. Vertical rhythm is driven by ~69px section gaps between type families. The page reads as a vertical exhibition: one artwork or typeface per band, stacked without interruption."

  agent_prompt_guide:

    quick_color_reference:
    - "text (on dark): #ffffff"
    - "text (on light): #555555"
    - "background (dark mode): #101c19"
    - "background (light mode): #f9f9f9"
    - "border / outline: #939393"
    - "accent / label tag: #d33c03"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "**Label Tag**: Flare Orange (#d33c03) background, white Söhne 16px/400 text, 2px border-radius, 8px horizontal padding, 4px vertical padding. Place bottom-left of an image."

    - "**Specimen Band (dark)**: Full-width, Gallery Black (#000000) background, 20px horizontal padding, 20px vertical padding. Left: family name in the typeface itself, 36px, Bone (#ffffff). Center: variant list in Söhne 16px, Bone. Right: 'Buy' text in Söhne 16px, Fog (#7f7f7f)."

    - "**Specimen Band (light)**: Full-width, Marble (#f9f9f9) background. Left: family name in the typeface itself, 36px, Graphite (#555555). Center: variants in Söhne 16px, Graphite. Right: 'Buy' in Söhne 16px, Graphite."

    - "**Top Bar**: Full-width, Gallery Black (#000000), 8px vertical padding, 20px horizontal. Left: 'Klim Type Foundry' in Söhne 16px/400 white, then 'Fonts' in Söhne 16px/400 Flare Orange. Right: hamburger in white."

    - "**Inline Link on Dark**: Söhne 16px/400, Electric Blue (#24a7f2), no underline, no background. Used for interactive text within specimen descriptions."

  specimen_band_color_rotation:

    info: "The specimen list cycles through four background states in a repeating rhythm: Gallery Black (#000000) → Charcoal Surface (#1c1c1c) → Slate Mist (#3c585f) → Marble (#f9f9f9). Text color inverts with background: Bone (#ffffff) on all dark bands, Graphite (#555555) on the Marble band. This rotation is the page's primary navigation device — the viewer tracks position by band color rather than by section headers."

  similar_brands:

    - "**Commercial Type** — Same full-bleed specimen-band layout with type-as-content philosophy and minimal black header chrome"
    - "**Grilli Type** — Type-foundry presentation style: large display type, black/white alternation, photographic specimens with minimal overlay"
    - "**Dinamo (abcdinamo.com)** — Editorial type showcase with alternating dark/light bands and near-zero border-radius geometry"
    - "**Production Type** — Type catalogue structured as stacked horizontal bands, each typeface given its own colored strip"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-studio-charcoal: #101c19;
          --color-gallery-black: #000000;
          --color-charcoal-surface: #1c1c1c;
          --color-slate-mist: #3c585f;
          --color-graphite: #555555;
          --color-steel: #646464;
          --color-fog: #7f7f7f;
          --color-ash: #939393;
          --color-marble: #f9f9f9;
          --color-bone: #ffffff;
          --color-flare-orange: #d33c03;
          --color-signal-red: #e90702;
          --color-electric-blue: #24a7f2;
          --color-mint-pulse: #93ffe6;
          --color-canary: #ffff79;
          --color-blush: #ffe6d9;
        
          /* Typography — Font Families */
          --font-soehne: 'SOEHNE', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne: 'Söhne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne-ikon: 'Söhne Ikon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehneikon: 'SOEHNE_IKON', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 36px;
          --leading-heading: 1.19;
          --text-display: 56px;
          --leading-display: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-34: 34px;
          --spacing-69: 69px;
          --spacing-137: 137px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 69px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 2px;
        
          /* Named Radii */
          --radius-tags: 2px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 2px;
          --radius-buttons: 2px;
        
          /* Surfaces */
          --surface-gallery-black: #000000;
          --surface-studio-charcoal: #101c19;
          --surface-charcoal-surface: #1c1c1c;
          --surface-slate-mist: #3c585f;
          --surface-marble: #f9f9f9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-studio-charcoal: #101c19;
          --color-gallery-black: #000000;
          --color-charcoal-surface: #1c1c1c;
          --color-slate-mist: #3c585f;
          --color-graphite: #555555;
          --color-steel: #646464;
          --color-fog: #7f7f7f;
          --color-ash: #939393;
          --color-marble: #f9f9f9;
          --color-bone: #ffffff;
          --color-flare-orange: #d33c03;
          --color-signal-red: #e90702;
          --color-electric-blue: #24a7f2;
          --color-mint-pulse: #93ffe6;
          --color-canary: #ffff79;
          --color-blush: #ffe6d9;
        
          /* Typography */
          --font-soehne: 'SOEHNE', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne: 'Söhne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne-ikon: 'Söhne Ikon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehneikon: 'SOEHNE_IKON', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 36px;
          --leading-heading: 1.19;
          --text-display: 56px;
          --leading-display: 1.1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-34: 34px;
          --spacing-69: 69px;
          --spacing-137: 137px;
        
          /* Border Radius */
          --radius-sm: 2px;
        }