---
version: alpha
name: "Brooklinen"
description: "Brooklyn bedding brand built on warm off-white linen-toned canvas, a deep navy-indigo primary, and a pairing of bold slab serif display type with a humanist sans — making high-quality sleep goods feel accessible without sacrificing craft."

colors:
  # Surface / canvas
  background: "#fdfaf8"          # warm linen off-white — logo background extracted
  surface: "#f5f2ef"             # slightly deeper warm ivory for secondary panels
  surface-navy: "#283455"        # full brand navy for dark hero sections

  # Text / ink
  ink: "#0f1528"                 # near-navy dark — primary text
  ink-secondary: "#46454a"       # warm dark gray — supporting copy, metadata
  ink-muted: "#6e6e6e"           # medium gray — captions, secondary labels
  on-background: "#283455"       # navy text on light background for headings
  on-surface-navy: "#fdfaf8"     # warm white text on navy sections

  # Brand accent — Brooklinen Navy
  primary: "#283455"             # rgb(40, 52, 85) — the single brand workhorse
  on-primary: "#ffffff"
  primary-container: "#8ea4b6"   # muted steel blue — tinted variant, secondary surfaces

  # State / interaction
  primary-hover: "#102970"       # deepened navy for link/button hover
  link-hover: "#3860be"          # brighter blue for link hover states
  focus-ring: "#3860be"          # focus ring — extracted from link hover color

  # Semantic
  success: "#417823"             # green from palette — form validation
  error: "#ea0202"               # from swym CSS variable for error states
  warning: "#856404"             # from swym CSS variable for warning states

  # Borders
  border: "#dddddd"              # light gray — inputs, cards, dividers
  border-strong: "#283455"       # navy — outlined buttons, active inputs

  # Shadow tints
  shadow-soft: "#000000"         # was rgba(0,0,0,0.2) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, 'Times New Roman', serif"
    fontSize: 45px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  display:
    fontFamily: "Playfair Display, Georgia, 'Times New Roman', serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  heading-section:
    fontFamily: "Playfair Display, Georgia, 'Times New Roman', serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  heading-sub:
    fontFamily: "DM Sans, 'Brandon Text', Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.24px
  body-large:
    fontFamily: "DM Sans, 'Brandon Text', Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.2px
  body:
    fontFamily: "DM Sans, 'Brandon Text', Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px
  nav-link:
    fontFamily: "DM Sans, 'Brandon Text', Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.16px
  button-ui:
    fontFamily: "DM Sans, 'Brandon Text', Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1.68px
  label-upper:
    fontFamily: "DM Sans, 'Brandon Text', Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 1.92px
  caption:
    fontFamily: "DM Sans, 'Brandon Text', Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.12px

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

rounded:
  none: 0px
  sm: 4px
  md: 10px
  lg: 16px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
    border: "1px solid {colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
    border: "1px solid {colors.primary-hover}"
  button-ghost:
    backgroundColor: "{colors.surface-navy}"
    textColor: "{colors.on-surface-navy}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
  card-elevated:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 12px 16px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 12px 16px
    border: "1px solid {colors.border-strong}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-background}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-promo:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Brooklinen Design System

## Overview

Brooklinen launched from Brooklyn with a simple argument: hotel-quality bedding should not cost hotel-room money. The design system makes that argument quietly but persistently. The canvas — a warm, faintly cream off-white (`{colors.background}`) — feels like natural linen before you have read a single word. It is not the clinical white of a medical device company or the bright white of a discount flash sale. It is the color of something that has been thought about, and it signals that the product inside the photography has been thought about too.

The brand accent is Brooklinen Navy (`{colors.primary}`), a deep blue-indigo drawn from rgb(40, 52, 85). It arrives on the site with quiet authority: in the logo lockup, in primary CTAs, in navigation links, in input borders. It is not a playful color, but it is not a corporate one either — it sits in the same register as a well-washed denim, suggesting quality without ceremony. The complement is a muted steel blue (`{colors.primary-container}`), which functions as a tonal mid-tone: visible in hover gradients and tinted surfaces without competing with the primary navy.

Typography tells the brand's dual personality. ToledoTS-Bold — a robust slab-inflected display serif — powers all large headlines at 30–45px with tight 1.15 line-heights. It is bold in name and in presence; the weight gives e-commerce headlines the editorial confidence of a catalog brand rather than a conversion-rate-optimized checkout page. Below the display scale, BrandonTextWeb takes over as a friendly humanist sans at 14–24px. Its slight optical warmth and modest letter-tightening (`-0.14px` to `-0.24px`) keeps body copy easy without feeling casual. The pairing says: we take our craft seriously, and we want you to feel at home.

**Key Characteristics:**
- Warm linen canvas (`{colors.background}`) as the defining ground tone — not white, not cream, definitively Brooklinen
- Deep navy-indigo (`{colors.primary}`) as the sole brand accent across all interactive elements, borders, and header marks
- ToledoTS-Bold display serif for all large-scale headlines (`{typography.display-hero}`, `{typography.display}`) — weight-forward, no tracking
- BrandonTextWeb humanist sans for all functional text (`{typography.body}`, `{typography.nav-link}`) with subtle negative tracking
- 20px rounded corners (`{rounded.xl}`) on all CTAs and form inputs — approachable but not informal
- Uppercase tracking-heavy button labels (`{typography.button-ui}`, 1.68px letter-spacing) — a signature retail legibility choice
- 10px card radius (`{rounded.md}`) on product tiles — gentle lift without heavy curvature
- Inset gradient shadows on hero images (`rgba(0,0,0,0.88)` bottom, `rgba(0,0,0,0.6)` mid) — cinematic depth applied to lifestyle photography
- Smooth cubic-bezier motion (`cubic-bezier(0.33, 1, 0.68, 1)`) at 250ms dominates button transitions
- No gradients on color surfaces — all depth comes from photography, not fills

## Colors

### Surface & Canvas
- **Linen White** (`{colors.background}`): The defining canvas — warm, faintly cream, the visual texture of unbleached linen. Every product page lives on this ground.
- **Ivory Panel** (`{colors.surface}`): Slightly deeper warm tone for section bands, alternate card backgrounds, and input hover states.
- **Brooklinen Navy** (`{colors.surface-navy}`): The brand's deep blue fills dark hero sections, promotional banners, and email capture modules.

### Text & Ink
- **Near-Navy** (`{colors.ink}`): Primary text color — not pure black, but a very dark navy-adjacent tone that keeps warm-palette coherence throughout.
- **Warm Dark Gray** (`{colors.ink-secondary}`): Supporting copy, product subcopy, secondary navigation labels — pulled from a warm gray with slight purple undertone.
- **Medium Gray** (`{colors.ink-muted}`): Captions, metadata, disabled states, form helper text.
- **Navy Heading** (`{colors.on-background}`): The primary navy used as a text color for large headings on the warm canvas.

### Brand Accent
- **Brooklinen Navy** (`{colors.primary}`): The sole brand accent. Applied to CTAs, input borders, navigation links, and logo mark — the entire interaction layer runs on this color.
- **Deep Hover Navy** (`{colors.primary-hover}`): Pressed deeper for button and link hover, maintaining brand identity while signaling activation.
- **Link Hover Blue** (`{colors.link-hover}`): A brighter mid-blue applied when hovering text links — distinct from the base navy hover to prevent ambiguity.
- **Steel Blue Tint** (`{colors.primary-container}`): Muted desaturated blue variant used for subtle secondary tint surfaces and tonal background shifts.

### Semantic & State
- **Focus Ring** (`{colors.focus-ring}`): Bright blue extracted from the brand's link hover color — visible against both warm canvas and dark navy backgrounds.
- **Success Green** (`{colors.success}`): Form validation confirmations only.
- **Error Red** (`{colors.error}`): Inline form error states from the platform's component system.

### Borders & Shadows
- **Light Gray Border** (`{colors.border}`): Input field resting borders, card dividers, table rules — deliberately light to avoid visual noise against the warm canvas.
- **Navy Border** (`{colors.border-strong}`): Active input borders, outlined button strokes — the brand navy giving structural weight to form controls.
- **Shadow Base** (`{colors.shadow-soft}`): Drop shadows approximated from on-site `rgba(0,0,0,0.2)` values; used sparingly on overlaid modals and quick-view panels.

## Typography

### Font Families
- **ToledoTS-Bold** (closest Google substitute: Playfair Display): Brooklinen's custom display serif. A bold slab with confident weight and tight proportions. Appears exclusively at headline scale (30–45px); its density earns attention at size but would crowd body copy. Self-hosted as `ToledoSerial-Bold.otf`.
- **BrandonTextWeb** (closest Google substitute: DM Sans): The humanist sans used across all functional text. Regular, Medium, and Bold weights; the optical character is open and friendly without the geometric coldness of a pure grotesque. Self-hosted in Regular, Medium, Bold, and Italic variants.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | Primary campaign headlines, hero banners, product category names |
| `display` | Section openers, feature copy, editorial content blocks |
| `heading-section` | Product bundle headers, blog post titles, promo section titles |
| `heading-sub` | Card product names, feature sub-heads, drawer headings |
| `body-large` | Lead paragraphs, editorial descriptions, marketing sub-copy |
| `body` | Product descriptions, navigation, standard page copy |
| `nav-link` | Navigation bar links, breadcrumbs, filter labels |
| `button-ui` | All CTA labels — uppercase, tracked, weighted |
| `label-upper` | Section eyebrows, taxonomy labels, status flags — uppercase tracked |
| `caption` | Price disclaimers, image credits, small metadata |

### Principles
- **Serif for authority, sans for function**: ToledoTS-Bold headlines give Brooklinen editorial presence; BrandonTextWeb makes everything readable and approachable.
- **Uppercase + tracking on UI labels**: Button text and category labels use `{typography.button-ui}` (1.68px) and `{typography.label-upper}` (1.92px) — a deliberate retail legibility choice that reinforces the brand's organized, quality-conscious voice.
- **Negative tracking in body**: Body copy runs at -0.14px to -0.24px negative tracking, slightly compressing text for comfortable scan-reading at product-detail density.
- **Weight as voice**: Regular (400) for body prose; Bold (700) for all action and display text. No in-between weight hedging.
- **No italic in headlines**: The serif's Roman weight carries all headline moments — italic is reserved only for brand editorial accents.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The 8px grid is applied faithfully at element level, but the brand is unafraid of density — product grid cards run with 16px gaps that collapse to 8px on mobile. Section-level vertical rhythm is generous (40–64px vertical padding) while internal card padding stays tight (16px) to maximize product photography dominance.

### Grid & Container
- Max content width: approximately 1250px (breakpoint evidence)
- Standard 12-column grid; product grids run 2-up at mobile, 3-up at tablet, 4-up at desktop
- Full-bleed hero sections common; content max-width caps horizontally inside
- Sticky header transitions from expanded (with promotional bar) to compact on scroll

### Whitespace Philosophy
- Hero sections use generous vertical padding (64px+) to foreground lifestyle photography
- Product tile grids use tighter gaps (8–16px) to emphasize catalog density
- Internal card padding (16px) keeps focus on the product image, not the container
- Form elements receive 12–19px padding for comfortable touch-target sizing

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Nav, product grid tiles, standard body content |
| Subtle (Level 1) | `rgba(0,0,0,0.13) 1px 0px 0px 0px inset` | Subtle card outlines, hairline dividers |
| Card (Level 2) | `rgba(0,0,0,0.2) 0px 2px 8px 0px` | Quick-view panels, floating tooltips |
| Elevated (Level 3) | `rgba(0,0,0,0.2) 0px 0px 25px 0px` | Modals, drawers, sticky nav on scroll |
| Hero Gradient | `rgba(0,0,0,0.88) inset -1px -88px 215px -2000px` | Image-based depth: bottom inset gradient on hero photography |
| Focus Ring | `{colors.focus-ring} 0px 0px 0px 2px` | Keyboard focus outline on interactive elements |

**Shadow Philosophy**: Brooklinen's site is nearly shadow-free at the card level — product tiles sit flat on the warm canvas without elevation. Depth is primarily cinematic rather than structural: the large inset gradient shadows applied to lifestyle hero images create a dramatic bottom-burn effect, pulling viewer attention into the photography. Explicit box shadows are reserved for overlaid elements (tooltips, quick-view panels, modals) where spatial separation is functionally necessary.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed hero imagery, horizontal dividers |
| `sm` | 4px | Small utility chips, notification badges, table borders |
| `md` | 10px | Product cards, image containers, tooltip boxes |
| `lg` | 16px | Modal corners, drawer top radius, select dropdowns |
| `xl` | 20px | All CTA buttons and form inputs — the system's primary rounded shape |
| `pill` | 9999px | Category tags, small badge labels, quantity selectors |

The system has a clear two-tier shape language: 20px on interactive controls (buttons, inputs) and 10px on content containers (product cards, panels). The 20px CTA radius is rounded enough to feel consumer-friendly, but stops well short of pill — it is shaped for purchase confidence, not playfulness. Pill appears only on small labeling elements where text labels need maximum peripheral clarity.

## Components

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

### Button Variants

- **`button-primary`** — Navy fill (`{colors.primary}`), white text, 20px radius, uppercase tracked button label. The definitive Brooklinen CTA: "Shop Sheets," "Add to Bag," "Explore All."
- **`button-primary-hover`** — Deepened navy (`{colors.primary-hover}`) on hover, maintaining shape and weight.
- **`button-secondary`** — Warm canvas fill with navy text and navy border (`{colors.border-strong}`). Used on dark sections and alongside primary CTAs as a softer companion action.
- **`button-secondary-hover`** — Ivory surface fill, deeper navy border. The border-color shift provides clear activation feedback without adding visual noise.
- **`button-ghost`** — Navy surface fill with warm white text. Used in hero sections and promotional banners where the canvas itself is `{colors.surface-navy}`.

### Cards

Product cards at `{rounded.md}` (10px) sit flat on the warm linen canvas without shadow — photography is the differentiator, not card chrome. Hover state adds a subtle image-scale transform (0.4s linear) and reveals a "Quick View" CTA in white overlay. Elevated variant (`card-elevated`) adds modest box shadow for featured collection panels.

### Inputs

Email and text inputs use `{rounded.xl}` (20px) to mirror the button shape language, creating a unified form vocabulary. Resting border is light gray (`{colors.border}`); focus border upgrades to brand navy (`{colors.border-strong}`). Padding at 12–19px accommodates comfortable mobile thumb typing. The email capture module shows a full-navy fill input field (background `{colors.surface-navy}`, warm linen text) as an inversion variant.

### Badges / Tags

Promo badges use `{rounded.pill}` and brand navy fill (`badge-promo`) for product callouts like "Staff Pick" or seasonal labels. Standard badges use the ivory surface (`badge`) with navy text for neutral informational labeling. All badge typography follows `{typography.label-upper}` — uppercase tracked for maximum thumbnail legibility.

### Navigation

Sticky full-width header with promotional announcement bar above. Logo centered at desktop (unusual for the category — reinforces the brand-first, catalog-second positioning). Navigation links in BrandonTextWeb Medium `{typography.nav-link}`, color `{colors.primary}`. Header transitions from full-height to compact on scroll using 0.5s ease animation. Mobile: hamburger drawer with identical link hierarchy at accessible touch-target sizes.

## Do's and Don'ts

### Do
- Use `{colors.background}` linen warm canvas as the default page surface — the warm off-white is the brand's ambient identity signal.
- Apply `{colors.primary}` navy to every interactive element: CTAs, input borders, link text, icon strokes. The system earns coherence through monochromatic discipline.
- Use `{typography.display-hero}` and `{typography.display}` (ToledoTS-Bold) exclusively at 30px and above — the serif only reads as editorial at display scale.
- Set all CTA buttons to `{rounded.xl}` (20px) — the rounded-rectangle is the brand's interactive signature. Pill is for badge labels, not buttons.
- Use `{typography.button-ui}` uppercase tracking (1.68px) for all button labels — it is a consistent brand legibility choice, not an aesthetic flourish.
- Let lifestyle photography carry the visual weight; keep card containers flat and shadowless so imagery dominates.
- Apply `{colors.primary-container}` steel blue as a tonal midpoint in secondary surfaces and hover gradients — it keeps the palette warm without introducing a competing accent.
- Reserve `{colors.border-strong}` navy for active or focused input states, distinguishing them clearly from the resting `{colors.border}` light gray.

### Don't
- Don't introduce a chromatic secondary brand color (orange, red, green) as a decorative accent — the only semantic color breaks are functional: success, error, warning from the platform component system.
- Don't use pill-radius on primary CTAs — the 20px rounded-rectangle is the intentional choice. Pill would undermine the understated quality signal.
- Don't apply ToledoTS-Bold (`{typography.display-hero}`) below 24px — the slab's weight collapses into illegibility at body scale.
- Don't use flat white (`#ffffff`) as the page background in place of the linen canvas — the warm `{colors.background}` tone is not interchangeable with pure white.
- Don't render body copy in all-caps or with heavy positive tracking — that treatment is reserved for button labels and category eyebrows only.
- Don't add decorative gradients or color-fill washes to product card backgrounds — flatness preserves the photography-first hierarchy.
- Don't skip the promotional announcement bar when implementing the navigation — it is part of the brand's ongoing merchandising voice and is present on nearly every page.
- Don't introduce a competing border-radius value (8px, 12px, 24px) on CTA buttons — the system's shape language is defined by `{rounded.xl}` (20px) for controls and `{rounded.md}` (10px) for containers.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column, 16px gutters, hero headline scales to ~24px |
| Mobile | 425–767px | Single column layout, navigation collapses to hamburger |
| Tablet | 768–1023px | Two-column product grids, sticky header compacts earlier |
| Desktop | 1024–1250px | Three/four-column grids, full nav visible, hero full-bleed |
| Large Desktop | >1250px | Content max-width caps, gutters expand symmetrically |

### Touch Targets
- Primary CTA buttons at `12px 24px` padding with 14px BrandonTextWeb achieve approximately 40–44px height — within touch-target minimum
- Form inputs at `12px 16px` with body-size text reach ~44px comfortable touch area
- Navigation links given generous padding on mobile for thumb accuracy
- Quick-view buttons on product cards anchored to card corners with minimum 44px tap zones

### Collapsing Strategy
- Display headline scale drops from 45px to approximately 28–32px on mobile; line-height maintained at 1.15
- Four-column product grids collapse to 2-up at 768px, single-column below 500px
- Hero sections maintain full-bleed imagery; text overlay reflows to bottom third at mobile
- Section vertical padding compresses from 64px to 32px on mobile
- Announcement bar collapses or hides on smallest breakpoints to preserve header height

### Image Behavior
- Product photography fills card containers at `{rounded.md}` (10px); object-fit cover maintains aspect ratios
- Hero lifestyle images use full-bleed with bottom inset gradient shadow (`rgba(0,0,0,0.88)`) for text legibility on overlay
- Lazy loading for below-fold product grid; eager loading for hero and above-fold content
- Card hover: product image scales 1.05x over 0.4s linear — subtle zoom for interaction feedback

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-muted}`
- Border: `{colors.border}`
- CTA fill: `{colors.primary}`
- Focus ring: `{colors.focus-ring}`
- Dark section canvas: `{colors.surface-navy}`

### Example Component Prompts

1. **Primary CTA Button**: Build a rounded-rectangle button with `background-color: #283455` (`{colors.primary}`), `color: #ffffff` (`{colors.on-primary}`), `border-radius: 20px` (`{rounded.xl}`), `padding: 12px 24px`, font DM Sans Bold 14px uppercase `letter-spacing: 1.68px` (`{typography.button-ui}`). On hover, deepen background to `#102970` (`{colors.primary-hover}`), transition `0.25s cubic-bezier(0.33, 1, 0.68, 1)`.

2. **Product Card**: Set card `background: #fdfaf8` (`{colors.background}`), `border-radius: 10px` (`{rounded.md}`), no box-shadow. Product image fills top portion with `border-radius: 10px 10px 0 0`. On card hover: image scales 1.05x over `0.4s linear`. Content area padding `16px` (`{spacing.md}`). Product name in Playfair Display Bold 18px (`{colors.on-background}`); price in DM Sans 400 16px (`{colors.ink-secondary}`).

3. **Hero Section (Dark)**: Full-bleed lifestyle image with `position: relative`. Overlay container at bottom: `background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 100%)`. Headline in Playfair Display Bold 45px `{typography.display-hero}`, `color: #fdfaf8` (`{colors.background}`). CTA button below: navy fill 20px radius (`{components.button-primary}`). Section `min-height: 600px`.

4. **Email Capture Input**: Input field `background: #fdfaf8` (`{colors.background}`), `border: 1px solid #dddddd` (`{colors.border}`), `border-radius: 20px` (`{rounded.xl}`), `padding: 12px 16px`, DM Sans Regular 16px (`{typography.body}`). On focus: border shifts to `1px solid #283455` (`{colors.border-strong}`). Submit button to right: primary CTA (`{components.button-primary}`). On dark canvas (navy section): invert — input `background: #283455`, `border: 1px solid #fdfaf8`, `color: #fdfaf8`.

5. **Navigation Header**: Sticky full-width header above an announcement bar (navy `{colors.surface-navy}`, warm white text 12px `{typography.caption}`). Main header: warm linen canvas `{colors.background}`, Brooklinen wordmark centered. Nav links: DM Sans Medium 16px `{typography.nav-link}`, color `{colors.primary}`, no underline on default, underline on hover. Right: cart, search, account icons in `{colors.primary}`. Below 1024px: hide nav links, show hamburger triggering a full-height left drawer.

6. **Product Badge**: Pill-shaped label `background: #283455` (`{colors.primary}`), `color: #ffffff` (`{colors.on-primary}`), `border-radius: 9999px` (`{rounded.pill}`), `padding: 4px 10px`, DM Sans Bold 12px uppercase `letter-spacing: 1.92px` (`{typography.label-upper}`). Position absolute in top-left corner of product card with 8px offset from card edge.

### Iteration Guide

1. Start with the warm linen canvas (`{colors.background}` `#fdfaf8`) — never substitute pure white. The ambient warmth is the brand's first signal.
2. Set all CTAs to navy (`{colors.primary}`) with 20px radius (`{rounded.xl}`) and uppercase tracked labels (`{typography.button-ui}`) before adding any other interactive color.
3. Display headlines use Playfair Display Bold (`{typography.display-hero}`, `{typography.display}`) at 30px+. Switch to DM Sans at 24px and below.
4. Product cards are shadowless and flat — depth comes from photography, not container elevation. Add shadow only to overlaid elements (modals, drawers, tooltips).
5. Keep the color palette monochromatic except for semantic states (success, error). The only chromatic accent is `{colors.primary}` navy.
6. On dark (navy) sections, invert: use `{colors.on-surface-navy}` warm white for text and flip button fills to the ghost variant (`{components.button-ghost}`).
7. Letter-spacing is a brand signal: 1.68–1.92px uppercase on all labels and button text, -0.14px to -0.24px negative on body copy. Both are intentional and should not be dropped.

---

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