---
version: alpha
name: Boll & Branch
description: Premium organic bedding brand anchored in a near-black canvas, warm linen cream accents, and an all-serif Louize typeface — quiet luxury that communicates earned craftsmanship through restraint, natural photography, and squared-off buttons that never shout.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f3ef"             # warm off-white section fills, discovery panels
  surface-linen: "#ebe0d5"       # warm linen cream — badge fill, product label, promo band
  surface-dark: "#1d1d1c"        # near-black nav, dark hero, primary CTA fill

  # Ink / text
  ink: "#1d1d1c"                 # near-black headings and body — the dominant text tone
  ink-secondary: "#616161"       # supporting copy, footer links, metadata
  ink-muted: "#9e9e9e"           # captions, disabled states, placeholder text
  on-dark: "#ffffff"             # text on near-black surface and dark hero sections
  on-linen: "#1d1d1c"            # text on the warm linen badge and promo band

  # Brand accent — warm slate blue used for promo badges and secondary indicators
  primary: "#75839a"             # slate blue badge fill, accent chip
  on-primary: "#ffffff"          # text on slate blue chip

  # Interactive states
  text-hover: "#3860be"          # link hover color surfaced by dembrandt
  focus-ring: "#3860be"          # focus outline — electric blue, same as hover

  # Borders
  border: "#d8d8d8"              # 1px hairline dividers, card edges, input borders
  border-strong: "#1d1d1c"       # button outlines, bottom nav rule
  border-muted: "#8f8f8f"        # secondary input, subtle rule

  # Shadow tints (opaque approximations — originals were rgba)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.04) — Google format requires hex
  shadow-card: "#000000"         # was rgba(0,0,0,0.08) — Google format requires hex
  shadow-medium: "#000000"       # was rgba(0,0,0,0.20) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Louize, Cormorant Garamond, Playfair Display, Georgia, serif"
    fontSize: 62px
    fontWeight: 400
    lineHeight: 1.03
    letterSpacing: -0.62px
  display:
    fontFamily: "Louize, Cormorant Garamond, Playfair Display, Georgia, serif"
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1.07
    letterSpacing: -0.54px
  heading-section:
    fontFamily: "Louize, Cormorant Garamond, Playfair Display, Georgia, serif"
    fontSize: 37px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.37px
  heading-sub:
    fontFamily: "Louize, Cormorant Garamond, Playfair Display, Georgia, serif"
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.48
    letterSpacing: -0.27px
  body-large:
    fontFamily: "Louize, Cormorant Garamond, Playfair Display, Georgia, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: -0.20px
  body:
    fontFamily: "Fakt, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: 0px
  body-serif:
    fontFamily: "Louize, Cormorant Garamond, Playfair Display, Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: -0.16px
  nav-link:
    fontFamily: "Fakt, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Fakt, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1.32px
  label-ui:
    fontFamily: "Fakt, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Fakt, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 2.25
    letterSpacing: -0.12px
  eyebrow:
    fontFamily: "Fakt, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 80px
  5xl: 96px

rounded:
  none: 0px
  sm: 2px
  md: 10px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 18px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"

  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 18px 28px
    border: "1px solid {colors.on-dark}"
  button-outline-hover:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.surface-dark}"

  button-outline-dark:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 18px 28px
    border: "1px solid {colors.border-strong}"
  button-outline-dark-hover:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px

  card-elevated:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 15px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border-strong}"

  badge-linen:
    backgroundColor: "{colors.surface-linen}"
    textColor: "{colors.on-linen}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 0px 16px
  badge-linen-hover:
    backgroundColor: "{colors.surface-linen}"
    textColor: "{colors.ink-secondary}"

  badge-slate:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 0px 16px

  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 16px 20px
---

# Boll & Branch Design System

## Overview

Boll & Branch is the quiet luxury end of the bedding market — a brand that leads with warmth, earned trust, and sensory softness, and whose design system mirrors that positioning without strain. The canvas is white (`{colors.background}`) and warm cream (`{colors.surface}`, `{colors.surface-linen}`), but what separates it from the typically clean direct-to-consumer aesthetic is the near-black chrome: the navigation sits in a near-black `{colors.surface-dark}` bar, buttons are squared, heavy, and dark-filled or dark-outlined, and the text hierarchy is built entirely around a serif that whispers rather than announces. There are no gradients, no playful rounds, no brand hue pushing color into the chrome. The warmth comes from photography and natural texture; the chrome gets out of the way.

The typographic backbone is Louize — a refined text serif with old-style proportions that sits at display scale (37–62px) with just enough negative tracking (-0.37px to -0.62px) to feel considered rather than decorated. Below 24px, Fakt, a clean humanist sans, takes over for body, navigation, and UI labels. The two-family system is a clear split: Louize for the moment of attention, Fakt for the action. Button labels appear in Fakt at 12px, weight 700, with uppercase and 1.32px letter-spacing — a confident stencil quality that reads as a CTA even at small scale. Product headlines in Louize at 37–62px carry the editorial warmth; the buttons beneath them stay crisp and transactional.

Shape is deliberately conservative. Corners are near-square: `{rounded.none}` (0px) on buttons, most cards, and inputs; a modest `{rounded.md}` (10px) appears on media thumbnails and elevated card variants. The badge system is rectangular — no pill, no soft rounding — which gives product tags a stamp-like quality consistent with the brand's craft orientation. Shadows are light and layered: a barely-perceptible double drop (`rgba(0,0,0,0.04)` diffuse + `rgba(0,0,0,0.08)` directional) lifts product cards without dramatizing them. The overall impression is of something genuine: a design that communicates quality through what it doesn't do rather than what it emphasizes.

**Key Characteristics:**
- Near-black nav (`{colors.surface-dark}`) and square-cornered CTAs (`{rounded.none}`) give dark chrome weight without a dark-mode theme
- Louize serif at 37–62px (`{typography.display-hero}`, `{typography.heading-section}`) carries the editorial personality — negative tracking at every display size
- Fakt sans for all functional text: nav, body, buttons, captions — keeps UI crisp below the display register
- Button labels in 12px uppercase Fakt at 700 weight with 1.32px letter-spacing (`{typography.button-ui}`) — stamp-like CTA quality
- Warm linen cream (`{colors.surface-linen}`) as the badge and label surface — communicates natural materials without reaching for a brand hue
- Rectangular badges (`{rounded.none}`) styled as product stamps, not pills — consistent with a craft-forward brand identity
- Subtle double-layer card shadow (diffuse 4px + directional 16px, both near-zero opacity) lifts product imagery quietly
- Full-bleed lifestyle photography anchors every major section; chrome stays minimal and secondary
- 8px-based spacing scale with generous section rhythms (`{spacing.5xl}` = 96px between major sections)
- No gradients, no chromatic brand color in chrome — warmth comes entirely from imagery and linen surface tones
- Motion is deliberate: 0.5s ease for image transitions, 0.2–0.3s ease for button and link interactions
- Breakpoints cluster tightly around mobile ranges (400–640px) and desktop inflections (768–1280px)

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The default page canvas — clean, neutral, lets warm secondary surfaces and photography define the mood.
- **Warm Off-White** (`{colors.surface}`): Section fills and panel backgrounds with a barely-there warm undertone. Used for discovery panels and content bands.
- **Linen Cream** (`{colors.surface-linen}`): The most expressive surface tone — a warm beige (`#ebe0d5`) that appears in product badges, promo labels, and section accents. Communicates organic fiber and natural dye without a logo.
- **Near-Black** (`{colors.surface-dark}`): The nav bar, dark hero sections, and primary CTA fill. `#1d1d1c` — a hair off pure black, which softens the contrast just enough to read as editorial rather than stark.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Dominant text color — headings, body copy, and labels on light backgrounds.
- **Graphite** (`{colors.ink-secondary}`): Supporting copy, footer navigation, and metadata.
- **Muted Gray** (`{colors.ink-muted}`): Captions, placeholders, and disabled UI states.
- **White** (`{colors.on-dark}`): All text on dark surfaces — nav, dark hero sections, outlined buttons over photography.

### Brand Accent
- **Slate Blue** (`{colors.primary}`): A secondary badge fill (`#75839a`) used for the product category chip variant. Not a primary interactive color — more of an informational surface for product attributes.

### Interactive States
- **Electric Blue** (`{colors.text-hover}`, `{colors.focus-ring}`): The link hover color and keyboard focus ring. `#3860be` is the only chromatic color in the interactive vocabulary — strictly functional, never decorative.

### Borders & Shadows
- **Hairline** (`{colors.border}`): Standard dividers, card edges, input resting borders (`#d8d8d8`).
- **Strong** (`{colors.border-strong}`): Outlined-button borders and emphasized rule lines (near-black).
- **Shadow tints** (`{colors.shadow-soft}`, `{colors.shadow-card}`, `{colors.shadow-medium}`): All converted from rgba originals. The primary card shadow is a double layer: a 0-blur ambient at 4% + a directional 16px at 8% — soft and layered without drama.

## Typography

### Font Families
- **Primary Serif**: `Louize`, with fallbacks `Cormorant Garamond, Playfair Display, Georgia, serif`. A self-hosted text serif appearing exclusively in display and section-heading roles. The regular (400) weight has old-style elegance; the italic variant surfaces in product names and feature copy.
- **Functional Sans**: `Fakt`, with fallbacks `Helvetica Neue, Helvetica, Arial, sans-serif`. A clean humanist grotesque used for all navigation, body copy, UI labels, and button text. Both regular (400) and bold (700) weights are self-hosted.
- **Font files**: `Louize-Regular`, `Louize-Italic`, `Fakt-Normal`, `Fakt-Bold` — all self-hosted via Shopify CDN.

### Hierarchy

The full type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 62px / 400 / -0.62px — landmark homepage headline at full-bleed hero scale |
| `display` | 54px / 400 / -0.54px — campaign section headers, large feature copy |
| `heading-section` | 37px / 400 / -0.37px — major content section openers ("Discover Your Best Sleep") |
| `heading-sub` | 27px / 400 / -0.27px — product category headings, feature subheadings |
| `body-large` | 20px / 400 / -0.20px — Louize lead paragraphs, editorial intros |
| `body` | 16px / 400 — standard Fakt body prose, descriptions, form labels |
| `body-serif` | 16px / 400 / -0.16px — Louize body variant for editorial pull-quotes |
| `nav-link` | 16px / 400 Fakt — top navigation, secondary nav categories |
| `button-ui` | 12px / 700 / uppercase / 1.32px Fakt — all CTA labels |
| `label-ui` | 14px / 400 Fakt — form labels, product attribute labels |
| `caption` | 12px / 400 / -0.12px Fakt — metadata, helper text, footer footnotes |
| `eyebrow` | 10px / 700 / uppercase / 1.2px Fakt — badge labels, product stamp text |

### Principles
- **Louize headlines, Fakt everything else** — the switch is semantic, never casual. Louize appears only in display and sub-heading roles; Fakt handles all functional text.
- **Negative tracking at every Louize size** — letterSpacing scales with fontSize (e.g., -0.01em ratio), creating a quiet optical tightness that feels confident.
- **Button labels are a discipline** — 12px uppercase Fakt at 700 with 1.32px tracking reads as intentional even at small scale. Never switch to sentence case for CTAs.
- **No weight extremes** — Louize runs exclusively at 400; Fakt uses 400 for body and 700 for labels/buttons. Mid-weights (500–600) appear only in select UI headings.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Generous vertical rhythm — major section separations at `{spacing.5xl}` (96px) and `{spacing.3xl}` (64px) — creates the breathing room expected of a premium home brand. Component internals stay measured at `{spacing.md}` (16px) to `{spacing.lg}` (24px).

### Grid & Container
- Max content width: approximately 1440px, centered, with full-bleed hero photography breaking the container
- Product grid: typically 3–4 columns at desktop, collapsing to 2-up at tablet, single column on mobile
- Hero pattern: full-bleed lifestyle photography with white serif headline centered over the image and two outlined CTAs below
- Navigation: full-width near-black bar with the wordmark left-aligned, category links centered, utility icons right

### Whitespace Philosophy
- **Space as quality signal**: generous section padding is part of the brand's premium positioning — compressed layouts would undercut the quiet luxury impression
- **Photography-led**: oversized lifestyle photography does the work; editorial chrome recedes
- **Grid rigidity over decoration**: structure comes from consistent columns and spacing, not fills, borders, or decorative elements

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Nav, body text, most inline elements |
| Hairline (Level 1) | `1px solid {colors.border}` | Card edges, section dividers, input borders |
| Card (Level 2) | `0px 0px 4px rgba(0,0,0,0.04), 0px 8px 16px rgba(0,0,0,0.08)` | Product cards, discovery panels |
| Modal (Level 3) | `0px 2px 8px rgba(0,0,0,0.20)` | Drawer menus, product quick-views |
| Overlay (Level 4+) | `0px 0px 50px rgba(0,0,0,0.30)` | Dialog overlays, full-screen panels |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard navigation — electric blue |

**Shadow Philosophy**: Boll & Branch's elevation system is restrained. The primary card shadow is a double-layer construction — an ambient diffuse at near-zero opacity (4%) combined with a soft directional drop at 8% — that lifts product cards just enough to separate them from the canvas without introducing drama. The design never reaches for deep or brand-tinted shadows. Modals use a single moderate shadow; overlays use a soft wide spread. The commitment to lightness across all levels reinforces the brand's natural, honest positioning.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, input fields, most badges, primary cards — the dominant shape decision |
| `sm` | 2px | A rare micro-rounding on small button/close elements where 0px feels harsh |
| `md` | 10px | Product image thumbnails, elevated card containers, media tiles |
| `pill` | 9999px | Reserved for rare circular icon buttons (close, navigation controls) |

The system is near-square. Buttons are rectangular stamps; badges are rectangular tags; product cards are squared-off frames. The only soft edges appear on media tiles and image thumbnails (10px), where the rounded corner creates warmth at the image level without softening the interactive vocabulary. The binary is clear: `{rounded.none}` for structure, `{rounded.md}` for media, `{rounded.pill}` for the rare circular icon control.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Near-black fill (`{colors.surface-dark}`), white text, **0px radius**, uppercase Fakt 12px at 700 weight, 1.32px tracking, `18px 28px` padding. The single authoritative CTA for dark contexts.
- **`button-outline`** — Transparent fill with a white 1px border, white text — used over photography and dark hero sections. Hover fills to near-black, inverting the contrast.
- **`button-outline-dark`** — Transparent fill with a near-black 1px border, ink-colored text — used on light sections. Hover fills to near-black.

### Cards

- **`card`** — White surface, no shadow, no radius. Product cards are squared-off photo tiles with Louize heading and Fakt price label beneath.
- **`card-elevated`** — Same white surface with 10px radius and a double-layer card shadow (`{colors.shadow-card}`). Used for featured collections and discovery panels.

### Inputs

- **`input`** — White fill, 1px `{colors.border}` border, 0px radius, Fakt 16px body type, `8px 15px` padding. Focus (`input-focus`) upgrades border to near-black `{colors.border-strong}` — no color change, just weight.

### Badges

- **`badge-linen`** — Warm linen cream fill (`{colors.surface-linen}`), near-black text, rectangular (0px), Fakt 10px uppercase at 700 with 1.2px tracking. Product tags: "New," "Best Seller," fabric names.
- **`badge-slate`** — Slate blue fill (`{colors.primary}`), white text, same stamp construction. Used for category or collection labels.

### Navigation

**`nav-bar`** — Near-black (`{colors.surface-dark}`) full-width bar, white Fakt 16px links. Wordmark left, categories center, utilities (search, account, cart, stores) right. A thin bottom-border rule in `{colors.border-strong}` separates nav from content. Sticky on scroll.

## Do's and Don'ts

### Do
- Use `{colors.surface-dark}` for the nav bar and fill-style CTAs — the near-black header anchors the page and signals craft without going full dark-mode
- Keep buttons squared at `{rounded.none}` — the rectangular CTA is the brand's interactive stamp and must not be softened
- Set all CTA labels in uppercase Fakt 12px at 700 weight with 1.32px tracking (`{typography.button-ui}`) — the stamp quality is non-negotiable
- Use Louize (`{typography.display-hero}`, `{typography.heading-section}`) only at display scale — its elegance collapses at body sizes
- Apply `{colors.surface-linen}` (`#ebe0d5`) as the label/badge surface — it communicates natural materials without adding a brand hue
- Use the double-layer card shadow for product tiles (`0px 0px 4px` diffuse + `0px 8px 16px` directional) — the combination reads as soft and honest
- Let lifestyle photography fill hero sections fully; keep type and buttons minimal over the image
- Separate sections with generous vertical spacing (`{spacing.5xl}` = 96px) — premium feel depends on breathing room

### Don't
- Don't round button corners — even `{rounded.sm}` (2px) on a CTA starts to undermine the stamp quality that defines the brand
- Don't introduce a chromatic brand color in chrome — `{colors.text-hover}` electric blue is functional-only; never decorate with it
- Don't use Louize at body or UI sizes (below 20px) — the serif's character requires scale; at 14px it muddies legibility
- Don't use pill-shaped badges — the rectangular stamp is the brand; rounded pill badges would look like a different brand's design language
- Don't add gradients or colorful section fills — warmth comes from photography and linen tones, not from UI decoration
- Don't let card elevation become dramatic — the primary card shadow is intentionally near-invisible; heavy drop shadows contradict the natural, honest positioning
- Don't set Fakt button labels in sentence case or drop the letter-spacing — lowercase CTAs read as unfinished in this system
- Don't compromise on whitespace in section spacing — the generous vertical rhythm is load-bearing for the premium impression

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column, full-bleed hero; nav collapses to hamburger; Louize headline scales to ~32–36px; generous horizontal gutters |
| Mobile | 425–767px | Single column product grid; hero photography full-bleed; CTAs stack vertically |
| Tablet | 768–1023px | Two-column product grid; nav transitions to hamburger at lower end; hero copy moves beside imagery |
| Desktop | 1024–1279px | Three to four column product grid; full horizontal nav; sticky header; hero full-bleed with centered type overlay |
| Large Desktop | ≥1280px | Content max-width ~1440px centered; full-bleed hero images break the container at edges |

### Touch Targets
- Outlined buttons with `18px 28px` padding achieve 48px+ height with Fakt 12px line-height 1.0 — comfortable tap targets despite the modest font size
- Nav links at 16px Fakt with generous horizontal padding stay accessible on mobile
- Product cards carry large tap areas; no small badge-only interactive zones

### Collapsing Strategy
- **Navigation**: full horizontal category bar collapses to hamburger menu at 768px; near-black bar persists at all sizes
- **Hero**: full-bleed photography maintained at all sizes; Louize headline scales from 62px to ~32px; CTA buttons stack vertically on mobile
- **Product grid**: 4 columns → 2 columns at 768px → 1 column at 425px
- **Section spacing**: `{spacing.5xl}` (96px) vertical padding compresses toward `{spacing.2xl}` (48px) on mobile
- **Typography**: Louize display tracks and sizing scale down proportionally; Fakt body remains at 16px for legibility

### Image Behavior
- Lifestyle photography is the dominant page element — full-bleed at hero, grid-cropped for products, always squared-off
- Product images use `{rounded.md}` (10px) on thumbnail variants within card grids; hero images are un-rounded and edge-to-edge
- Lazy loading below the fold; eager load on hero

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Nav / dark CTA surface: `{colors.surface-dark}`
- Warm accent surface: `{colors.surface-linen}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- CTA (light contexts): `{colors.border-strong}` outline on transparent
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

1. **Hero Section**: Full-bleed lifestyle photo (beach, bedroom, linen textures). Center-align a Louize 62px white headline (`{typography.display-hero}`, `{colors.on-dark}`) at weight 400. Below it: two side-by-side outlined buttons (`{components.button-outline}`) — "SHOP SHEETS" and "DESIGN YOUR BED" — with `18px 28px` padding, 1px white border, 0px radius, Fakt 12px 700 uppercase 1.32px tracking. No border-radius anywhere. Keep the button row small relative to the photo.

2. **Primary CTA Button (light section)**: Near-black fill (`{colors.surface-dark}`), white text (`{colors.on-dark}`), 0px radius, `18px 28px` padding, Fakt 12px 700 uppercase 1.32px tracking (`{typography.button-ui}`). Hover: deepen fill slightly. This is the brand's authoritative action — never round it.

3. **Product Card**: White card (`{colors.background}`), 0px radius (`{rounded.none}`), no border. Square-crop product image at top. Below image: a Louize 20px serif product name (`{typography.body-large}`, `{colors.ink}`), then Fakt 16px price (`{typography.body}`, `{colors.ink}`). A warm linen badge (`{components.badge-linen}`) in top-left of image stamping "Best Seller" or "New" at 10px uppercase. Card rest state is flat; hover adds the double-layer shadow (`0px 0px 4px rgba(0,0,0,0.04), 0px 8px 16px rgba(0,0,0,0.08)`).

4. **Section Header (Discovery)**: Off-white section (`{colors.surface}`). Left column: Louize 37px heading (`{typography.heading-section}`, `{colors.ink}`) — e.g., "Discover Your Best Sleep". Right of heading: Fakt 16px supporting copy (`{typography.body}`, `{colors.ink-secondary}`) in a tighter column. Below: category filter pills as outlined-dark buttons.

5. **Navigation Bar**: Full-width near-black bar (`{colors.surface-dark}`), 64px height. Left: wordmark in white Fakt or Louize. Center: category links — "Sheets, Bedding, Pillows & Inserts, Bundles, Bath & Lounge, Home, Sale" — in white Fakt 16px (`{typography.nav-link}`, `{colors.on-dark}`). Right: "Origin Track, About Us, Stores" utility links. A 1px rule (`{colors.border-strong}`) on the nav bar bottom edge. Sticky on scroll; no background change.

6. **Email Input**: White fill (`{colors.background}`), 1px `{colors.border}` border, 0px radius, `8px 15px` padding, Fakt 16px (`{typography.body}`). Focus: border upgrades to near-black (`{colors.border-strong}`) — no color, no glow, just weight. Pair with a near-black fill submit button (`{components.button-primary}`) to the right.

7. **Eyebrow + Section Intro**: Fakt 10px uppercase 700 1.2px tracking eyebrow (`{typography.eyebrow}`, `{colors.ink-secondary}`) above a Louize 27px section heading (`{typography.heading-sub}`, `{colors.ink}`). The eyebrow labels the section category; the Louize heading carries the editorial moment.

### Iteration Guide

1. Start with a white canvas (`{colors.background}`) and a near-black nav bar (`{colors.surface-dark}`). These two surfaces define the light/dark register of the entire system before any content is added.
2. Set all CTAs to 0px radius — if any button is rounded, the brand's stamp quality is lost. Square corners are the single most important shape rule.
3. Hero headlines belong exclusively to Louize (`{typography.display-hero}` or `{typography.heading-section}`) at weight 400 with negative tracking. Switch to Fakt for any text below 20px.
4. For CTAs over photography or dark backgrounds, use `{components.button-outline}` (transparent + white border). Over white sections, use `{components.button-outline-dark}` or `{components.button-primary}`.
5. Apply the warm linen surface (`{colors.surface-linen}`) to product badges and promo bands — it communicates natural fiber warmth without any brand hue.
6. Card shadow formula: `0px 0px 4px rgba(0,0,0,0.04), 0px 8px 16px rgba(0,0,0,0.08)`. If it reads as dramatic, the opacity is too high. The double-layer should be barely perceptible at a glance.
7. Section spacing target: 96px (`{spacing.5xl}`) between major content bands. If the page feels dense, increase section padding — the generous rhythm is part of the premium signal, not optional.

---

## 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 Boll & Branch. Brand names and trademarks belong to their respective owners.