---
version: alpha
name: Kvadrat
description: "Danish textile house built on a warm cream canvas, proprietary Neuzeit Grotesk at restrained weight, a near-monochrome ink palette, and large-format textile photography as the system's sole ornamentation"

colors:
  # Surface / canvas
  background: "#f6f5f1"          # warm cream — the dominant Kvadrat canvas (site hero bg) /* estimated — screenshot cream tone */
  surface: "#ffffff"             # pure white for header, drawers, overlay panels
  surface-warm: "#f0ede8"        # deeper cream editorial panels /* estimated */

  # Text / ink
  ink: "#231f20"                 # primary text — the brand's near-black with subtle warmth (from extracted data)
  ink-secondary: "#939598"       # secondary text, muted labels, disabled states (from extracted palette)
  on-background: "#231f20"
  on-surface: "#231f20"

  # Brand accent — Kvadrat is near-monochrome; no chromatic accent
  primary: "#231f20"             # filled button / CTA uses the same near-black ink
  on-primary: "#ffffff"
  primary-hover: "#4e4b4c"       # warm dark hover state — from extracted --hover-color CSS variable

  # Interaction states
  text-hover: "#4e4b4c"          # link hover — from --hover-color CSS variable (#4E4B4C)
  focus-ring: "#000000"          # black outline 2px from extracted focus data

  # Borders
  border: "#231f20"              # 1px solid ink-colored border on inputs, buttons, dividers
  border-subtle: "#f6f6f6"       # was rgb(246,246,246) — Google format requires hex; very light structural separator

  # Shadow tints
  shadow-soft: "#000000"         # was rgba(0,0,0,0.03) — Google format requires hex; minimal card lift /* was rgba(0,0,0,0.03) — Google format requires hex */

typography:
  display-hero:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.31
    letterSpacing: 0px
  display:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-section:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sub:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-large:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.36
    letterSpacing: 0px
  label-caps:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.5px
  caption:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  micro:
    fontFamily: "kvadrat_neuzeit_s, Neuzeit Grotesk, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 10px
  md: 20px
  lg: 40px
  xl: 60px
  2xl: 80px
  3xl: 120px

rounded:
  none: 0px
  pill: 9999px    # search inputs and primary text inputs use ~22–24px radius = effectively pill

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 13px 20px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 13px 20px
    borderColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.micro}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  nav-item-hover:
    textColor: "{colors.text-hover}"
    typography: "{typography.nav-link}"
---

# Kvadrat Design System

## Overview

Kvadrat's website is a textile gallery, not a retail catalogue. The page arrives wearing a warm cream (`{colors.background}`) that reads less like a browser default and more like unbleached linen — the exact material quality the brand has traded in since 1968. Against this field, large-format textile photographs are positioned with the care of museum installations: a monochrome mesh fabric suspended at a diagonal, its weave thrown into high relief by precise studio lighting. Nothing competes with the textile. The interface — navigation, type, buttons — withdraws into a near-black ink palette and leaves the material at the center of every composition.

The proprietary `kvadrat_neuzeit_s` is a custom cut of the Neuzeit Grotesk — a warm, humanist grotesque that splits the difference between Swiss rationality and Danish approachability. Unlike the tracked uppercase of a luxury fashion house, Kvadrat's typeface is set in sentence case at modest weights (400 for reading, 500 for mid-level headings) with generous line-heights. Only buttons and section labels escalate to weight 700, and even there the tracking is minimal. The overall reading register is editorial without being cold: it communicates expertise and materiality rather than exclusivity or ceremony.

The chromatic palette is deliberately near-monochrome. The extracted palette yields exactly three values: `{colors.ink}` (a near-black with a trace of warm brown, `#231f20`), `{colors.ink-secondary}` (a cool medium grey, `#939598`), and the canvas `{colors.surface}` white. The one acknowledged CSS variable is `--hover-color: #4E4B4C` — a warm charcoal one step lighter than the primary ink, used to soften link interactions without introducing any chromatic notes. This is a material-culture palette: every textile that will ever be placed on this canvas is the brand accent, and the system is designed to yield.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) that recalls the materiality of the textiles it showcases — never optical white
- Proprietary `kvadrat_neuzeit_s` (Neuzeit Grotesk) at weights 400–500 for all display and reading text — humanist rather than geometric
- Near-monochrome ink palette: `{colors.ink}` (#231f20), `{colors.ink-secondary}` (#939598), no chromatic brand accent
- `--hover-color: {colors.text-hover}` (#4E4B4C) is the only interaction deviation from the primary ink — a barely perceptible warm lightening
- Pill-radius inputs (22–24px) against otherwise-flat rectangular buttons — a single curved form in a mostly angular vocabulary
- Full-bleed textile photography as the primary visual element; the interface is the neutral mount
- Bottom-only border dividers and `1px solid {colors.border}` as the principal structural vocabulary
- Motion at 0.2–0.25s `ease` for links; 0.2–0.3s `ease-in` for buttons — measured, never theatrical
- Submenu revealed at 0.5s — content is given time, not snapped in
- `{spacing.md}` (20px) as the system's most-used spatial unit; generous section-level rhythm at `{spacing.3xl}` (120px)
- Self-hosted WOFF2 fonts: no Google Fonts dependency, full typographic control
- Breakpoints at 576px and 350px — a tight mobile-first responsive contract

## Colors

### Primary Surfaces
- **Warm Cream** (`{colors.background}`): The dominant canvas throughout — hero backgrounds, product listing pages, editorial panels. This is the Kvadrat signature: linen-temperature, never clinical.
- **Pure White** (`{colors.surface}`): Header bar, drawer overlays, search panels. Used where the interface needs to lift above the canvas without warmth.
- **Deeper Cream** (`{colors.surface-warm}`): Editorial moments and campaign sections where an additional tonal layer is needed — a warm step down from the background.

### Text & Ink
- **Near-Black** (`{colors.ink}`): The primary text color across the entire system — headings, body copy, navigation, button labels. The subtle brown-warm undertone (`#231f20`) distinguishes it from pure black and recalls the color of pressed linen.
- **Medium Grey** (`{colors.ink-secondary}`): Secondary text, muted navigation elements, inactive states, fine-print copy. Appears on menus (mega-menu buttons) and social icons.

### Brand Accent
- **Warm Charcoal Hover** (`{colors.text-hover}`): The sole interaction-state deviation from the primary ink. `#4E4B4C` is only three perceptual steps from `{colors.ink}` — a whisper of acknowledgment rather than a bright response. Applied to all link hover transitions at `0.2s ease`.

### Borders & Structural Lines
- **Ink Border** (`{colors.border}`): `1px solid #231f20` — the default structural element. Button outlines, input borders, section dividers.
- **Ghost Separator** (`{colors.border-subtle}`): `#f6f6f6` — near-invisible horizontal rules and tag separators. Nearly disappears on the cream background.

### Shadow & Focus
- **Minimal Shadow** (`{colors.shadow-soft}`): The basis for the single documented shadow — `rgba(0,0,0,0.03) 0px 9px 22px -7px`. At 3% opacity this is barely more than air; used on the top navigation bar on scroll.
- **Focus Ring** (`{colors.focus-ring}`): `2px solid black` — accessible, unambiguous keyboard focus indicator.

## Typography

### Font Family
- **Primary**: `kvadrat_neuzeit_s`, fallbacks: `Neuzeit Grotesk, Arial, sans-serif`
- **Icon system**: `icomoon` (icon font) — navigation and social icons
- **Loading source**: Fully self-hosted WOFF2 — `kvadrat_neuzeit_s-webfont.woff2` (regular), `-italic-webfont.woff2`, `-bold-webfont.woff2`. No Google Fonts, no Adobe Fonts, no variable fonts.
- **OpenType features**: No tracked uppercase in the primary reading stack. The `{typography.label-caps}` token applies `0.5px` letter-spacing at small sizes for labels, but never the wide tracks of a fashion brand.

*Note: `kvadrat_neuzeit_s` is a brand-customized Neuzeit Grotesk. For external implementations, the closest publicly available approximents are Neuzeit Grotesk (available via commercial license), Aktiv Grotesk, or Nunito Sans (Google Fonts — humanist, warm apertures). Avoid purely geometric grotesks like Futura or Circular — the Kvadrat voice requires humanist openness.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero section headings, campaign opening statements — 35px / 400 / lh 1.31 |
| `display` | Section openers, featured fabric names — 27px / 500 / lh 1.2 |
| `heading-section` | Sub-section labels, product family titles — 25px / 400 / lh 1.3 |
| `heading-sub` | Card headings, inline callouts — 16px / 700 / lh 1.5 |
| `body-large` | Lead paragraphs, product introductions — 16px / 400 / lh 1.5 |
| `body` | Standard reading copy — 15px / 400 / lh 1.6 |
| `nav-link` | Top navigation links, footer links — 15px / 400 / lh 1.5 |
| `button-ui` | CTA labels, form submit actions — 14px / 700 / lh 1.36 |
| `label-caps` | Filter labels, section markers — 15px / 700 / 0.5px tracking |
| `caption` | Product metadata, fine print — 10px / 400 / lh 1.5 |
| `micro` | Tags, badges, small counts — 12px / 600 / lh 1.4 |

### Principles
- Weight 400 carries the full editorial register — `kvadrat_neuzeit_s` at regular weight is authoritative enough that the site requires no bold display text
- Weight 700 appears only in functional contexts (buttons, labels) — never in editorial headings
- Line-height 1.5–1.6 at body sizes produces a pace suited to material-culture reading: unhurried, considered
- Sentence case throughout the navigation and body copy — no uppercase-tracked navigation links, no all-caps headings; the approach is warm and conversational
- The single expressive type treatment is the `{typography.label-caps}` minimal 0.5px tracking — far subtler than the 2.1px tracks of comparable design brands

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px (mapped to Kvadrat's observed 5/10/20px cadence).

Kvadrat's spacing personality is generous at every scale. The dominant spacing unit is `{spacing.md}` (20px), observed 120 times in production — it governs padding within components, gutters between cards, and breathing room inside navigation. Section-level vertical rhythm expands to `{spacing.3xl}` (120px), providing the gallery-like air around each textile moment.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: full-bleed imagery with the textile product as the single centered subject; canvas fills the viewport width
- Collection grid: product tiles arranged in a 2–4 column grid depending on viewport, with `{spacing.md}` gutters
- Editorial sections: alternating full-width and 2-column (photography + editorial text) layouts
- Footer: multi-column metadata grid collapsing to stacked on mobile

### Whitespace Philosophy
- **The neutral mount**: Whitespace in Kvadrat's system functions as the white space of a gallery wall — it gives the textile room to read as an artifact rather than a product
- **Scale discipline**: The cream canvas and generous spacing ensure that even at full bleed, the textile photograph never crowds the interface — it floats
- **Component compactness paired with section air**: Internal component spacing is precise and compact (`{spacing.xs}`–`{spacing.sm}`); the section-to-section rhythm is very generous (`{spacing.2xl}`–`{spacing.3xl}`)

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All surfaces at rest — product cards, editorial sections, page background |
| Hairline Rule | `1px solid {colors.border}` | Navigation dividers, input borders, button outlines, section edges |
| Ghost Separator | `1px solid {colors.border-subtle}` | Subtle structural lines between content clusters |
| Scroll Lift | `rgba(0,0,0,0.03) 0px 9px 22px -7px` | Navigation bar on scroll — barely perceptible lift |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Kvadrat's elevation system is almost entirely shadow-free. The dominant depth signal is the `1px solid {colors.border}` hairline — the same near-black ink used for text, repurposed as a structural edge. The single box-shadow (3% opacity, 9px spread) on the scrolled navigation bar is the quietest shadow in the design-brand corpus. This material reticence is consistent with how a textile house understands surface: the woven fabric itself has depth; the interface should be flat.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, badges, navigation, modals — the default for all layout and functional components |
| `pill` | 9999px | Search inputs and text inputs — the one curved exception in an angular system |

Kvadrat's shape language is nearly binary. Buttons are flat rectangles — no radius. Cards are flat rectangles. Navigation is flat. The single departure is the pill-shaped input field (22–24px radius in production), which introduces a soft oval form exclusively for text entry. The contrast between the rectangular action surfaces (buttons) and the oval entry surfaces (inputs) creates a quiet distinction between interaction modes — you enter through a soft opening, you act through a hard edge.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants

- **`button-primary`** — Near-black fill (`{colors.primary}` = `#231f20`), white text, `{typography.button-ui}` (14px / 700), zero radius, `13px 20px` padding. The CTA is flat, material, and undecorated.
- **`button-primary-hover`** — Shifts to warm charcoal (`{colors.primary-hover}` = `#4E4B4C`) via `0.2s ease-in`. A barely perceptible warming; the form is unchanged.
- **`button-secondary`** — White fill with a `1px solid {colors.border}` outline, ink-colored text. Secondary actions on the cream canvas.
- **`button-secondary-hover`** — Inverts to ink fill and white text — the decisive hover inversion signals confirmation without theatrics.

### Cards

- **`card`** — Cream (`{colors.background}`) background, no shadow, no border, zero radius. Product photography defines the visual boundaries; the container is invisible.
- **`card-elevated`** — White surface, `rgba(0,0,0,0.03) 0px 9px 22px -7px` minimal shadow for panels that lift above the page background.

### Inputs

- **`input`** — White background, `1px solid {colors.border}`, pill radius (~22px), `13px 20px` padding, `{typography.body}` at 15px. The pill shape is the only curved form in the system.
- **`input-focus`** — Border replaced by `2px solid {colors.focus-ring}` (black). No glow, no color fill change.

### Badges / Tags

- **`badge`** — White background, ink text, zero radius, `{typography.micro}` at 12px. Product category chips and filter labels.

### Navigation

- Top bar: white background fixed on scroll, subtle `rgba(0,0,0,0.03)` scroll shadow. Kvadrat wordmark left-aligned.
- Links: `{typography.nav-link}` — 15px / 400; hover shifts to `{colors.text-hover}` (`#4E4B4C`) via `0.2s ease`.
- Mega-menu: animated in at `0.5s` via `showSubMenu` keyframe — content arrives with measured pace.
- Inactive nav elements and icons: `{colors.ink-secondary}` (`#939598`).

## Do's and Don'ts

### Do
- Use `{colors.background}` (warm cream) as the default page canvas — not pure white; the cream temperature is core to the brand's material character
- Apply `{rounded.none}` to all buttons, cards, and layout components — zero radius is the structural norm
- Reserve `{rounded.pill}` exclusively for input fields — it marks text entry as distinct from action surfaces
- Use `{colors.ink}` (`#231f20`) as primary text — never pure `#000000`; the brownish warmth is intentional
- Apply weight 400 for all display and editorial text — weight 700 belongs only in functional labels and buttons
- Let full-bleed textile photography occupy the center of each major layout section — the interface frames, never competes
- Use `1px solid {colors.border}` as the primary structural vocabulary — bottom borders, input outlines, button outlines
- Maintain generous section spacing (`{spacing.2xl}`–`{spacing.3xl}`) — the gallery pace is the brand identity
- Apply `{colors.ink-secondary}` (`#939598`) for all muted, secondary, and inactive text — never introduce a mid-tone that lacks warmth

### Don't
- Don't use pure white (`#ffffff`) as the default page canvas — only the warm cream (`{colors.background}`) has the material temperature of Kvadrat
- Don't add border-radius to buttons, cards, or layout components — even `4px` breaks the material flatness
- Don't introduce any chromatic accent color — the palette is intentionally monochrome; any color entered will compete with the textiles
- Don't use weight 700 for display headings — the semi-bold register reads as functional, not editorial
- Don't apply `{colors.text-hover}` (`#4E4B4C`) to static states — it belongs only in hover transitions; using it as a default would collapse the tonal hierarchy
- Don't use wide uppercase tracking on display text — Kvadrat's typographic voice is sentence-case and warm, not fashion-editorial
- Don't apply box-shadows larger than `rgba(0,0,0,0.03)` to any surface at rest — the material reticence is intentional
- Don't introduce background gradients or tinted surfaces beyond `{colors.surface-warm}` — any gradient reads as decoration competing with the textiles

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <350px | Minimal single-column, smallest spacing increments |
| Mobile | 350–576px | Single-column product grid; stacked navigation; hero reduces to portrait crop |
| Tablet / Desktop | >576px | Multi-column grid resumes; horizontal navigation; editorial 2-up layouts |

*Kvadrat documents two explicit breakpoints (350px and 576px) — a very lean responsive contract that prioritizes the content hierarchy over grid complexity. The low breakpoint count is consistent with the site's image-led layouts: when photography is the layout, responsive breakpoints are fewer.*

### Touch Targets
- Buttons: `13px` vertical padding × 2 + `14px` font = ~40px effective height — meets mobile touch target minimums
- Navigation links: 15px at 1.5 line-height provides approximately 44px tap zones via surrounding padding
- Product cards: full card area is tappable — large targets by virtue of photography scale

### Collapsing Strategy
- **Navigation**: Horizontal link row collapses to a condensed mobile header below 576px; mega-menu becomes an accordion drawer
- **Hero**: Full-bleed photography maintained across all widths; headline scale reduces proportionally from 35px → ~22px
- **Product grids**: 4-column → 2-column → 1-column across breakpoints
- **Spacing**: Section vertical padding scales from `{spacing.3xl}` (120px) → `{spacing.xl}` (60px) → `{spacing.lg}` (40px) on mobile
- **Editorial 2-column**: Photography stacks above text on mobile; photography always leads

### Image Behavior
- Hero textile photography: full-bleed via `object-fit: cover` at all widths; object positioned to show the weave detail
- Product thumbnails: uniform aspect ratio per grid cell, contained
- No gradient overlays detected on photography — Kvadrat relies on clear white space around images rather than text-on-image treatments

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand action: `{colors.primary}`
- Link hover: `{colors.text-hover}`
- Border: `{colors.border}`
- Surface (header/panels): `{colors.surface}`
- Focus ring: `{colors.focus-ring}`
- Button text: `{colors.on-primary}`

### Example Component Prompts

- "Create a Kvadrat-style hero section: warm cream (`#f6f5f1`) full-viewport background. Centered in the layout, a large textile photograph (square or landscape ratio) positioned with generous margin above and below — it floats on the canvas. Below the image, a headline in `kvadrat_neuzeit_s` (fallback: Neuzeit Grotesk, Arial) 35px weight 400, line-height 1.31, color `#231f20`, centered. A short editorial subtitle at 16px weight 400, line-height 1.5. One primary button: background `#231f20`, white text, `kvadrat_neuzeit_s` 14px weight 700, padding `13px 20px`, `0` border-radius. No decorative elements."

- "Design a Kvadrat product card: cream (`#f6f5f1`) background, `0` border-radius, no shadow, no border. Product textile photograph at top, full-width within the card. Below: fabric collection name in `kvadrat_neuzeit_s` 15px weight 700, color `#231f20`. Material description in 15px weight 400, line-height 1.6, color `#939598`. On hover, card background shifts slightly to white (`#ffffff`); opacity fades to 0.8 via `0.25s ease`."

- "Build a Kvadrat navigation bar: white (`#ffffff`) background, fixed on scroll, single-pixel bottom border `1px solid #231f20` when scrolled. Left: Kvadrat wordmark in `kvadrat_neuzeit_s` at 20px weight 400, color `#231f20`. Center: horizontal navigation links — `kvadrat_neuzeit_s` 15px weight 400, color `#231f20`, no underline at rest; hover → color `#4E4B4C` via `0.2s ease`. Right: search icon in `#939598`, language selector, account icon. Overall height 56px."

- "Create a Kvadrat-style editorial section: cream (`#f6f5f1`) background, `80px` vertical padding. Full-width textile photograph spanning ~60% of the viewport width, left-aligned. Right column: eyebrow label in `kvadrat_neuzeit_s` 15px weight 700, color `#939598`. Below: section heading in 27px weight 500, line-height 1.2, color `#231f20`. Body paragraph in 15px weight 400, line-height 1.6, color `#231f20`. A primary button: `#231f20` fill, white text, `kvadrat_neuzeit_s` 14px weight 700, `13px 20px` padding, `0` radius."

- "Design a Kvadrat form: pill-radius inputs only. Text input: white background, `1px solid #231f20` full border, border-radius `22px`, `kvadrat_neuzeit_s` 15px weight 400, color `#231f20`, padding `13px 20px`. Placeholder: color `#939598`. On focus: border becomes `2px solid #000000`, no glow, no fill change. Submit button: flat rectangle, `#231f20` background, white text, `kvadrat_neuzeit_s` 14px weight 700, `13px 20px` padding, `border-radius: 0`."

- "Create a Kvadrat materials filter bar: white background, horizontal row of tag pills. Each tag: white background, `1px solid #231f20` border, `border-radius: 0`, `kvadrat_neuzeit_s` 15px weight 400, color `#231f20`, padding `6px 14px`. Active tag: background `#231f20`, text `#ffffff`. Tag hover: background shifts to `#f6f5f1` (cream), text `#4E4B4C`."

### Iteration Guide

1. Start with the warm cream canvas — `{colors.background}` (`#f6f5f1`). Pure white is reserved for header and drawer surfaces only.
2. Every button, card, and layout component is a flat rectangle — `border-radius: 0`. Only inputs use the pill radius.
3. Typography weight 400 carries all editorial text. Weight 700 appears only in buttons and functional labels.
4. The only interaction color is `{colors.text-hover}` (`#4E4B4C`) — a warm step lighter than the ink. Never introduce a chromatic accent.
5. Textile photography is the page decoration — design the layout to center and isolate each textile; avoid decorative surface fills.
6. Use `1px solid {colors.border}` for all structural edges. No box-shadows except the barely-visible scroll shadow on the navigation bar.
7. Maintain generous vertical section rhythm — `{spacing.2xl}` (80px) minimum between major editorial blocks; `{spacing.3xl}` (120px) for hero-weight transitions.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Kvadrat. Brand names and trademarks belong to their respective owners.