Brooklinen-inspired

# Visual style inspired by Brooklinen's storefront (Bedding)

A full style reference in DESIGN.md format: tokens in the front matter, then type scale, components, layout, do's and don'ts. Use it for colour, type, spacing and components only — never Brooklinen's name, logo, product photos, copy or trademarks.

---
version: alpha
name: "Brooklinen"
description: |-
  A confident, tactile bedding brand that wraps its premium-casual voice in a deep navy anchor — `#121f36` — and a warm off-white canvas of `#f4f8fe`. The palette reads like a well-edited linen closet: charcoal ink (`#272727`) for body copy, soft steel (`#b1b7c3`) for muted accents, and a restrained use of `#ea0202` for sale badges and urgent CTAs that snap attention without breaking the calm. The brand's signature move is the generous use of `{rounded.full}` pill shapes on buttons and search bars, paired with `{rounded.sm}` (8px) on product cards and `{rounded.md}` (12px) on modals — every corner is softened, never sharp. Typography leans on a single clean sans-serif stack at modest weights (400–600), with display sizes rarely exceeding 28px; the brand trusts product photography, swatch circles, and the crisp `#eaeaea` hairline to carry hierarchy. The result is a system that feels both heirloom and modern — like a hotel lobby translated into direct-to-consumer e‑commerce, where `#d4edda` success badges and `#f8d7da` error banners are the only moments of high chroma.

colors:
  primary: "#121f36"
  primary-active: "#171722"
  primary-disabled: "#b1b7c3"
  ink: "#272727"
  body: "#333333"
  muted: "#6b6b6b"
  muted-soft: "#888888"
  hairline: "#eaeaea"
  hairline-soft: "#e8e8e8"
  canvas: "#f4f8fe"
  surface-soft: "#f5f5f5"
  surface-card: "#ffffff"
  on-primary: "#ffffff"
  accent-sale: "#ea0202"
  accent-sale-soft: "#f8d7da"
  accent-success: "#155724"
  accent-success-soft: "#d4edda"
  accent-warning: "#856404"
  accent-warning-soft: "#fff3cd"
  accent-info: "#383d41"
  accent-info-soft: "#fef3e2"
  badge-new: "#e6f7f4"
  badge-new-text: "#1c1c1c"
  swatch-border: "#d1d5db"
  swatch-active: "#d0d0d0"
  star-rating: "#121f36"
  scrim: "#000000"

typography:
  display-xl:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.3px
  display-lg:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  display-md:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0
  title-md:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  title-sm:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0
  body-md:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  caption:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0
  caption-sm:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0
  badge:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.18
    letterSpacing: 0.2px
    textTransform: uppercase
  button-md:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.2px
  button-sm:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.23
    letterSpacing: 0.15px
  link:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
    textDecoration: underline
  nav-link:
    fontFamily: "'Brooklinen Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0.1px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 14px 28px
    height: 48px
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
  button-primary-disabled:
    backgroundColor: "{colors.primary-disabled}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    border: "2px solid {colors.ink}"
    padding: 12px 26px
    height: 48px
  button-secondary-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    rounded: "{rounded.full}"
  button-tertiary:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 14px 28px
  button-sale:
    backgroundColor: "{colors.accent-sale}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 14px 28px
    height: 48px
  icon-button:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    height: 40px
    width: 40px
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: 64px
    borderBottom: "1px solid {colors.hairline}"
  nav-link-active:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: "2px solid {colors.primary}"
  nav-link-inactive:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.nav-link}"
  search-bar:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    border: "1px solid {colors.hairline}"
    padding: 10px 20px
    height: 44px
  search-bar-focused:
    border: "2px solid {colors.primary}"
    rounded: "{rounded.full}"
  text-input:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    border: "1px solid {colors.hairline}"
    padding: 12px 16px
    height: 48px
  text-input-focused:
    border: "2px solid {colors.primary}"
    rounded: "{rounded.sm}"
  text-input-error:
    border: "1px solid {colors.accent-sale}"
    rounded: "{rounded.sm}"
  product-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    boxShadow: "0 1px 3px rgba(0,0,0,0.08)"
  product-card-hover:
    boxShadow: "0 4px 12px rgba(0,0,0,0.12)"
    rounded: "{rounded.sm}"
  product-card-image:
    rounded: "{rounded.sm} {rounded.sm} 0 0"
  product-card-title:
    typography: "{typography.title-sm}"
    color: "{colors.ink}"
  product-card-price:
    typography: "{typography.body-md}"
    color: "{colors.body}"
  product-card-sale-price:
    typography: "{typography.body-md}"
    color: "{colors.accent-sale}"
  product-card-rating:
    color: "{colors.star-rating}"
    typography: "{typography.caption}"
  product-swatch:
    rounded: "{rounded.full}"
    height: 24px
    width: 24px
    border: "1px solid {colors.swatch-border}"
  product-swatch-active:
    border: "2px solid {colors.swatch-active}"
    rounded: "{rounded.full}"
  hero-banner:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-xl}"
    height: 400px
  hero-banner-image:
    rounded: "{rounded.none}"
  hero-banner-cta:
    backgroundColor: "{colors.on-primary}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 14px 28px
  badge-new:
    backgroundColor: "{colors.badge-new}"
    textColor: "{colors.badge-new-text}"
    typography: "{typography.badge}"
    rounded: "{rounded.full}"
    padding: "4px 10px"
  badge-sale:
    backgroundColor: "{colors.accent-sale}"
    textColor: "{colors.on-primary}"
    typography: "{typography.badge}"
    rounded: "{rounded.full}"
    padding: "4px 10px"
  badge-success:
    backgroundColor: "{colors.accent-success-soft}"
    textColor: "{colors.accent-success}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: "4px 8px"
  badge-error:
    backgroundColor: "{colors.accent-sale-soft}"
    textColor: "{colors.accent-sale}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: "4px 8px"
  footer:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    padding: "{spacing.section} {spacing.base}"
  footer-link:
    color: "{colors.on-primary}"
    typography: "{typography.link}"
    textDecoration: none
  footer-heading:
    color: "{colors.on-primary}"
    typography: "{typography.title-sm}"
  accordion:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    border: "1px solid {colors.hairline}"
  accordion-header:
    typography: "{typography.title-md}"
    padding: "{spacing.base} {spacing.lg}"
  accordion-content:
    padding: "0 {spacing.lg} {spacing.base}"

---

## Components

### Buttons
**`button-primary`** — The primary call-to-action, rendered as a full pill (`{rounded.full}`) in deep navy (`{colors.primary}`) with white text. On hover, it shifts to a slightly darker `{colors.primary-active}`. The disabled state uses `{colors.primary-disabled}` (#b1b7c3) to signal inactivity. Padding is generous at 14px 28px, giving the button a substantial, premium feel.
**`button-secondary`** — An outlined pill with a 2px solid `{colors.ink}` border on a transparent background. On hover, the background fills with `{colors.ink}` and text inverts to `{colors.canvas}`. Used for "Add to Cart" alternatives and secondary actions.
**`button-tertiary`** — A text-only button with no background or border. Uses `{colors.ink}` and `{typography.button-md}`. Reserved for less prominent actions like "View Details" or "Learn More."
**`button-sale`** — A high-urgency variant using `{colors.accent-sale}` (#ea0202) as background. Identical shape and padding to `button-primary`, but the red signals clearance or limited-time offers. Hover state darkens the red slightly (not captured in tokens).

### Cards
**`product-card`** — The core product display unit. A white (`{colors.surface-card}`) container with `{rounded.sm}` (8px) corners and a subtle `boxShadow` (0 1px 3px rgba(0,0,0,0.08)). On hover, the shadow deepens to 0 4px 12px rgba(0,0,0,0.12). The image area uses `{rounded.sm}` on top corners only. Title uses `{typography.title-sm}` in `{colors.ink}`, price uses `{typography.body-md}` in `{colors.body}`, and sale prices switch to `{colors.accent-sale}`. Star ratings appear in `{colors.star-rating}` (navy) at `{typography.caption}` size.
**`product-swatch`** — Circular color swatches at 24×24px with `{rounded.full}`. Default border is `{colors.swatch-border}` (#d1d5db). Active state uses a thicker `{colors.swatch-active}` (#d0d0d0) border. Used in product detail pages for color/pattern selection.

### Navigation
**`top-nav`** — A fixed-height (64px) bar on `{colors.canvas}` with a `{colors.hairline}` bottom border. Nav links use `{typography.nav-link}` (14px, weight 500). Active links gain a 2px `{colors.primary}` bottom border. Inactive links are `{colors.muted}`. The nav collapses to a hamburger menu on mobile.
**`search-bar`** — A pill-shaped (`{rounded.full}`) input with a 1px `{colors.hairline}` border on white background. On focus, the border thickens to 2px `{colors.primary}`. Height is 44px with 10px 20px padding. Uses `{typography.body-sm}` for placeholder text.

### Forms
**`text-input`** — Standard form input with `{rounded.sm}` (8px) corners, a 1px `{colors.hairline}` border, and 12px 16px padding. Height is 48px. Focus state uses a 2px `{colors.primary}` border. Error state switches to `{colors.accent-sale}` border. Used in checkout, account creation, and newsletter signup forms.

### Badges
**`badge-new`** — A pill badge with `{colors.badge-new}` (#e6f7f4) background and `{colors.badge-new-text}` (#1c1c1c) text. Uses `{typography.badge}` (11px, weight 600, uppercase). Padding is 4px 10px. Used to flag new arrivals.
**`badge-sale`** — A red pill badge with `{colors.accent-sale}` background and white text. Same typography and padding as `badge-new`. Used for discount indicators.
**`badge-success`** — A green-toned badge with `{colors.accent-success-soft}` (#d4edda) background and `{colors.accent-success}` (#155724) text. Uses `{typography.caption}` (12px, weight 500). Padding is 4px 8px. Used for "In Stock" or "Free Shipping" messages.
**`badge-error`** — A red-toned badge with `{colors.accent-sale-soft}` (#f8d7da) background and `{colors.accent-sale}` (#ea0202) text. Same typography and padding as `badge-success`. Used for "Out of Stock" or error notifications.

### Hero
**`hero-banner`** — A full-width banner with `{colors.primary}` background and white text. Height is 400px. The CTA button inverts the primary scheme: white background with navy text. Images are edge-to-edge with no rounding. Used for seasonal collections and brand campaigns.

### Footer
**`footer`** — A deep navy (`{colors.primary}`) footer with white text. Uses `{typography.body-sm}` for body copy and `{typography.title-sm}` for section headings. Links are white with no underline by default. Padding uses `{spacing.section}` (64px) top and bottom. Contains accordion-style sections on mobile.

### Accordion
**`accordion`** — A collapsible section with `{rounded.sm}` corners, a 1px `{colors.hairline}` border, and white background. Headers use `{typography.title-md}` with `{spacing.base}` vertical padding and `{spacing.lg}` horizontal padding. Content area uses `{spacing.lg}` horizontal padding with no top padding. Used in product descriptions, FAQs, and footer navigation on mobile.

## Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 744px | Single-column product grid, hamburger nav, accordion footer, hero height reduced to 300px, buttons full-width |
| Tablet | 744–1128px | Two-column product grid, expanded nav with dropdowns, hero height 350px, buttons inline |
| Desktop | 1128–1440px | Three-column product grid, full top-nav visible, hero height 400px, max-width container |
| Wide | > 1440px | Four-column product grid, max-width 1440px container centered, hero height 450px |

### Touch Targets
- All buttons and interactive elements minimum 44px height (48px preferred) to meet WCAG touch target guidelines.
- Product swatches at 24×24px with 8px touch padding via `{spacing.sm}`.
- Icon buttons at 40×40px with `{rounded.full}`.
- Nav links have 44px minimum touch area even when text is smaller.

### Collapsing Strategy
- Top navigation collapses to hamburger menu below 744px. The hamburger icon is 40×40px with `{rounded.full}`.
- Product filters collapse to a slide-out drawer on mobile, triggered by a "Filter" button.
- Footer sections become accordion-style on mobile, with `{colors.hairline}` dividers between sections.
- Search bar collapses to an icon-only trigger on mobile, expanding to full-width overlay on tap.
- Product image galleries switch from horizontal thumbnails to vertical swipeable dots on mobile.

## Known Gaps

- **Agent usage policy:** Historical tokens are unverified. Do not use them as current-site measurements or claim a faithful reconstruction.







- **Evidence:** [SOURCE.json](./SOURCE.json) records capture time, URLs and per-token evidence status. CSS value matches do not establish semantic roles or visual fidelity; unmeasured values remain inferred or unverified.

- Hover and focus states for many components (especially product-card-hover, button-secondary-active) are inferred from common patterns; exact CSS transitions and shadow values may vary.
- Error styling for form validation (text-input-error) uses the sale red, but specific error message typography and iconography are not captured.
- Sub-brand palettes (e.g., Brooklinen x specific designer collaborations) are not included; only the core brand palette is documented.
- Dark mode is not supported; all tokens assume light background (`{colors.canvas}` = #f4f8fe).
- Typography font-family is inferred as a generic sans-serif stack; the actual font name (if custom) is unknown — "Brooklinen Sans" is a placeholder.
- Animation durations and easing curves (e.g., button hover transitions, card shadow changes) are not specified.
- Modal and overlay components (e.g., quick-view, cart drawer) are not documented due to insufficient extraction data.
- Accessibility contrast ratios for certain muted tokens (e.g., `{colors.muted-soft}` #888888 on white) may need verification against WCAG AA standards.