stykka___style_reference:
  info: "> Scandi atelier under white light — a quiet, hand-built showroom where the only voice is the photograph"

  theme: "light"

  info: "Stykka is a Scandinavian kitchen brand that treats the interface like a museum catalog: pure white canvas, black hairline borders, and full-bleed photography that carries every ounce of warmth, color, and craft. The UI is deliberately invisible — there is no accent color, no decoration, no shadow stack — so that the kitchens in the imagery feel like the only subject on screen. Typography does the talking: Inter at tight negative tracking on large display sizes, uppercase tracked labels for section openers, and a system fallback for the tiniest metadata. Spacing is compact and editorial, with 10px gaps between elements and generous white space at the section level. Everything from the nav to the feature grid to the outlined CTA assumes a black-and-white photograph will do the emotional heavy lifting — the system stays out of the way."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Press Black | `#000000` | `--color-press-black` | Primary text, 1px hairlines, icon strokes, outlined button borders. The structural ink of the entire system — every border, every label, every headline resolves to this single value |"
    info: "| Gallery White | `#ffffff` | `--color-gallery-white` | Page canvas, card surfaces, button text on dark surfaces, inverse overlay backgrounds. The unbroken ground on which every photograph sits |"
    info: "| Plate Gray | `#b8b8b8` | `--color-plate-gray` | Subtle disabled state, placeholder fill, secondary metadata. Reads as 10.6:1 on black (safe for muted labels) but only 2.0:1 on white — never use as body text on the default canvas |"

  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"

    inter___primary_typeface_for_everything_visible__weight_400_carries_body_and_nav__weight_500_lifts_labels__button_text__and_the_uppercase_section_openers__display_sizes_30_46px_use_aggressive_negative_tracking_around__0_04em_that_pulls_letters_together_so_headlines_feel_set_in_metal__not_typeset__sub_16px_sizes_flip_to_positive_tracking_0_021em_for_the_small_caps_label_treatment_that_recurs_across_hero_overlays_and_section_headers____font_inter:
      - "**Substitute:** system-ui, -apple-system, Segoe UI, Roboto"
      - "**Weights:** 400, 500"
      - "**Sizes:** 11px, 14px, 16px, 22px, 24px, 30px, 46px"
      - "**Line height:** 1.20, 1.25, 1.50"
      - "**Letter spacing:** -1.93px at 46px / display, -1.20px at 30px / heading, -0.89px at 24px / heading-sm, -0.79px at 22px / subheading, -0.37px at 16px / body, +0.29px at 14px and +0.23px at 11px / small-caps labels and caption"
      - "**OpenType features:** `\"ss01\" on for alternate single-storey 'a' if available, \"tnum\" for tabular numbers in any data row`"
      - "**Role:** Primary typeface for everything visible. Weight 400 carries body and nav; weight 500 lifts labels, button text, and the uppercase section openers. Display sizes (30–46px) use aggressive negative tracking (around -0.04em) that pulls letters together so headlines feel set in metal, not typeset. Sub-16px sizes flip to positive tracking (0.021em) for the small-caps label treatment that recurs across hero overlays and section headers"

    azeret_mono___reserved_for_a_single_editorial_moment_in_the_body___a_18px_monospace_line_that_breaks_the_inter_rhythm__use_sparingly__never_more_than_once_per_page__to_mark_a_hand_set_caption__specification__or_builder_s_note____font_azeret_mono:
      - "**Substitute:** IBM Plex Mono, JetBrains Mono, ui-monospace"
      - "**Weights:** 400"
      - "**Sizes:** 18px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.0100em"
      - "**Role:** Reserved for a single editorial moment in the body — a 18px monospace line that breaks the Inter rhythm. Use sparingly, never more than once per page, to mark a hand-set caption, specification, or builder's note"

    system_ui_sans_serif___invisible_utility_tier_for_the_smallest_chrome_elements___copyright_lines__version_stamps__decorative_micro_labels__inter_is_the_show__system_ui_is_the_scaffolding_you_never_notice____font_system_ui_sans_serif:
      - "**Substitute:** system-ui, -apple-system, Segoe UI"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Role:** Invisible utility tier for the smallest chrome elements — copyright lines, version stamps, decorative micro-labels. Inter is the show; system-ui is the scaffolding you never notice"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.2 | 0.23px | `--text-caption` |"
      info: "| body-sm | 14px | 1.25 | 0.29px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.37px | `--text-body` |"
      info: "| subheading | 22px | 1.2 | -0.79px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.89px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.1 | -1.2px | `--text-heading` |"
      info: "| display | 46px | 1.05 | -1.93px | `--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: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 33 | 33px | `--spacing-33` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 8px |"
      info: "| cards | 16px |"
      info: "| buttons | 8px |"
      info: "| imageContainers | 0px (photography is hard-edged to the grid line) |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 60-80px"
      - "**Element gap:** 10px"

  components:

    transparent_top_nav:
      role: "Primary navigation that sits over full-bleed hero photography"

      info: "Full-width, position-absolute over hero, no background fill. Left cluster: nav links (About, Journal, Inspiration, Design) in Inter 16px weight 400 #000 with 20px horizontal spacing. Center: wordmark 'Stykka' in Inter 22-24px weight 500 #000. Right cluster: language selector and 'Start building' outlined button. 20px vertical padding. No border, no shadow, no background."

    outlined_cta_button:
      role: "The only button variant on the site — used for every actionable element"

      info: "Inter 16px weight 500 #000, 1px solid #000000 border, 8px radius, padding 10px 18px (approx). Transparent fill so it sits cleanly over photography. Hover inverts: fill becomes #000000, text becomes #ffffff. No drop-shadow, no scale transform. The 8px radius is deliberately soft but not pill — it reads as pressed metal, not a tag."

    hero_section_full_bleed:
      role: "First-screen brand statement"

      info: "100vw × ~100vh image, no overlay, no gradient. Text block sits in the lower-left third, aligned to the 10px grid, padded from the viewport edge. Contains a tracked uppercase label, a display headline, and a single CTA. The hero is a photograph first and a layout second — no fake device frames, no illustration, no animation chrome."

    hero_overlay_label:
      role: "Tracked small-caps category tag above headlines"

      info: "Inter 14px weight 500 #ffffff (sits over photography), letter-spacing +0.29px, uppercase. Used in the hero and as the opener of every editorial section — it is the system's only repeated chrome. Color flips to #000000 on white backgrounds."

    display_headline:
      role: "Primary editorial statement on hero and section openers"

      info: "Inter 46px weight 400 #ffffff on hero / #000000 on white sections, line-height 1.05, letter-spacing -1.93px. Weight 400 (not 700) is the signature — the headline never shouts. It is set tight enough to feel architectural, not typeset."

    feature_grid_card:
      role: "4-column editorial card for product attributes"

      info: "Image on top (full-bleed, hard 0px corners, 4:3 or 3:4 aspect), 10px row gap to title, title in Inter 14-16px weight 500 uppercase #000 letter-spacing +0.29px, 10px gap to body, body in Inter 16px weight 400 #000 line-height 1.50. No card surface, no border, no shadow — the image edge IS the card edge. 4 columns on desktop, collapses to 2 then 1."

    language_selector:
      role: "Locale switcher in nav"

      info: "Globe icon (16px stroke, 1px #000) + 'English' in Inter 16px weight 400 + small chevron. No background, no border. Sits inline with other nav elements with 20px gap."

    section_header_block:
      role: "Editorial opener for a content section"

      stack: "tracked uppercase label (14px) → display or heading headline (30-46px) → optional supporting paragraph (16px, max-width ~60ch). Vertically centered or left-aligned to the 10px grid. Generous 60-80px section gap before and after. The header does most of the brand voice work — no decorative graphics."

    image_grid_multi_column:
      role: "Full-bleed photography showcase below the fold"

      info: "2- or 3-column grid of hard-edged images, 10-15px gutters, no captions, no borders. Each image bleeds to the edge of its cell. This is the system's only way of communicating product warmth — by showing it, not by styling it."

    inline_text_link:
      role: "Links within body copy"

      info: "Inter 16px weight 400 #000, 1px underline offset 3px, underline color #000. No color shift, no bold — the link is identified by the underline alone, which keeps the editorial line unbroken."

    footer_block:
      role: "Closing black band"

      info: "Full-width #000000 background, text in #ffffff. Inter 14-16px weight 400. Same 20px internal padding rhythm as the nav. Minimal: a wordmark, a link list, and a copyright line in system-ui 12px. No social icons, no newsletter form — the system stays austere to the end."

    monospace_spec_callout:
      role: "Editorial accent line for a material or dimension"

      info: "Azeret Mono 18px weight 400 #000, line-height 1.00, letter-spacing -0.18px. Single line, full-bleed across the content column. Breaks the Inter rhythm deliberately — use for a quote, a dimension, or a builder's note. Never more than one per page."

  do_s_and_don_ts:

    do:
      - "Use #000000 for every text element and every 1px border — never introduce a second ink color, the system is intentionally monochromatic"
      - "Set display headlines at Inter weight 400 (not 700) with tracking between -1.2px and -1.93px — the tight setting is the signature, not the weight"
      - "Use the 14px uppercase tracked label (ls +0.29px) as the opener of every section — it is the only repeated UI motif and it carries the editorial voice"
      - "Use the outlined CTA (1px #000 border, 8px radius, transparent fill) for every action — there is no filled or ghost variant, this is the only button"
      - "Let photography fill the entire viewport for hero and feature sections — 0px corner radius on all image containers, the photo bleeds to the grid line"
      - "Hold element gaps to 10px and section gaps to 60-80px — the compact density is what makes the white space feel intentional rather than empty"
      - "Use 16px card radius (not 12px, not 8px) on any card surface that contains text — the extra softness separates editorial content from the harder 8px button geometry"

    don_t:
      - "Never introduce an accent color, brand color, or chromatic highlight — the system has none by design, the photography provides all warmth"
      - "Never use a drop-shadow, box-shadow, or elevation token to group content — use a 1px border or whitespace instead, this is a flat system"
      - "Never set a display headline at weight 500+ — the headline must whisper at 400 to preserve the editorial register"
      - "Never use positive letter-spacing on sizes above 16px — the positive tracking is reserved for the 11-14px small-caps label tier only"
      - "Never use a filled or solid button — the outlined 1px border is the only button geometry in the system"
      - "Never apply the 16px card radius to images — images are always hard-edged (0px), the 16px is for text-bearing surfaces only"
      - "Never place body text directly on a full-color photograph without a tonal treatment — the hero overlay uses #ffffff text, and any text on a photograph must be either pure white or pure black to survive the contrast"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Default page background and image-negative space between sections |"
    info: "| 2 | Ink | `#000000` | Reserved as a contrast surface for inverse buttons, footer block, or full-bleed black sections — not used as page background |"

  elevation:

    info: "Zero shadow vocabulary. Structure is communicated entirely through 1px hairline borders in #000000 and whitespace. Cards, sections, and feature blocks float by adjacency, not by depth. Adding a drop-shadow breaks the editorial flatness of the system — if you need to group something, draw a border instead."

  imagery:

    info: "Photography is the entire visual system. The site uses no illustrations, no icons beyond simple line glyphs (globe, chevron, arrows), no abstract graphics, and no 3D renders. All imagery is warm, natural-light, editorial interior photography: timber kitchens, natural materials, daylight, human scale. Treatments are full-bleed with hard 0px corners — no rounded masking, no drop-shadow on photos, no duotone or color grading. Images occupy roughly 60% of the page area across the site, dominating the visual hierarchy over every UI element. The system is image-heavy in the sense that the few images shown are large, but the overall density is restrained — usually one full-bleed photograph per screen."

  layout:

    info: "Full-bleed max-width ~1280px centered container. Hero is a single 100vw × ~100vh photograph with a text overlay in the lower-left third — no split layout, no card hero, no video. Below the fold, the rhythm alternates: a centered 4-column feature grid, then a full-bleed 2- or 3-column image grid, then a black footer band. Sections are separated by 60-80px vertical whitespace, never by dividers. Navigation is a transparent bar absolutely positioned over the hero, becoming part of the page flow as the user scrolls. The layout reads as a long-scroll editorial spread — closer to a print catalog than a typical product page."

  agent_prompt_guide:

    info: "QUICK COLOR REFERENCE"
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000 (1px hairlines only)"
    - "accent: no distinct accent color (achromatic system — warmth comes from photography)"
    - "primary action: no distinct CTA color"

    info: "3-5 EXAMPLE COMPONENT PROMPTS"

    - "HERO SECTION"
    info: "Full-viewport image (100vw × 100vh) with no overlay or gradient. Lower-left text block on a 10px grid, padded 40px from the viewport edge. Small-caps label: Inter 14px weight 500, #ffffff, uppercase, letter-spacing +0.29px, content 'EXPLORE KITCHENS'. Display headline below: Inter 46px weight 400, #ffffff, line-height 1.05, letter-spacing -1.93px, content 'Built to last'. Outlined button below: Inter 16px weight 500, 1px solid #000000 border (visible as a cutout or re-tinted to #ffffff when over dark photography), 8px radius, padding 10px 18px, label 'Start building'."

    - "FEATURE GRID CARD"
    image_4: "3 aspect, 0px corner radius) on top. 10px row gap. Title: Inter 14px weight 500, #000000, uppercase, letter-spacing +0.29px. 10px gap. Body: Inter 16px weight 400, #000000, line-height 1.50, max-width 32ch. No card surface, no border, no shadow. Arranged in a 4-column grid with 20px column gaps, 40px row gaps."

    - "TRANSPARENT TOP NAV"
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "SECTION HEADER"
    info: "Stack on a centered 10px grid. Tracked label: Inter 14px weight 500, #000000, uppercase, letter-spacing +0.29px. 20px gap. Headline: Inter 30px weight 400, #000000, line-height 1.10, letter-spacing -1.20px. 20px gap. Optional supporting paragraph: Inter 16px weight 400, #000000, line-height 1.50, max-width 60ch."

    - "FOOTER BLOCK"
    info: "Full-width #000000 background. 20px internal padding. Inter 14-16px weight 400, #ffffff. Single wordmark left, link list center, copyright in system-ui 12px, #ffffff right. No social icons, no newsletter form."

  similar_brands:

    - "**Menu (space.menu)** — Same Scandinavian furniture-brand restraint, transparent nav over full-bleed interior photography, Inter at tight tracking, and an exclusively black/white interface that lets the product imagery carry all warmth"
    - "**Hem** — Editorial Scandi furniture catalog with the same uppercased tracked label openers, hard-edged full-bleed product photography, and a gallery-white canvas with hairline structural borders"
    - "**USM** — Modular furniture brand that uses a near-identical monospace label + Inter headline pairing, 0px image corners, and a 4-column feature grid layout for product attributes"
    - "**Vitra** — Same museum-catalog posture: large confident display headlines at weight 400 (not bold), 1px black rules instead of shadows, and full-bleed interior photography that does the brand's emotional work"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-press-black: #000000;
          --color-gallery-white: #ffffff;
          --color-plate-gray: #b8b8b8;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-system-ui-sans-serif: 'system-ui (sans-serif)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.2;
          --tracking-caption: 0.23px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.25;
          --tracking-body-sm: 0.29px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.37px;
          --text-subheading: 22px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.79px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.89px;
          --text-heading: 30px;
          --leading-heading: 1.1;
          --tracking-heading: -1.2px;
          --text-display: 46px;
          --leading-display: 1.05;
          --tracking-display: -1.93px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-50: 50px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 60-80px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
        
          /* Named Radii */
          --radius-tags: 8px;
          --radius-cards: 16px;
          --radius-buttons: 8px;
          --radius-imagecontainers: 0px (photography is hard-edged to the grid line);
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-ink: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-press-black: #000000;
          --color-gallery-white: #ffffff;
          --color-plate-gray: #b8b8b8;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-system-ui-sans-serif: 'system-ui (sans-serif)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.2;
          --tracking-caption: 0.23px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.25;
          --tracking-body-sm: 0.29px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.37px;
          --text-subheading: 22px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.79px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.89px;
          --text-heading: 30px;
          --leading-heading: 1.1;
          --tracking-heading: -1.2px;
          --text-display: 46px;
          --leading-display: 1.05;
          --tracking-display: -1.93px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-50: 50px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
        }