---
title: "Brooklinen design system"
variant: extended
source: https://www.brooklinen.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/brooklinen-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Brooklinen · Design System

> Calm, polished bedding shopping with a lived-in warmth

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.brooklinen.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Brooklinen pairs an ink-blue identity with warm, quiet neutrals and immersive bedroom photography. The homepage balances editorial lifestyle storytelling with scannable product and category carousels, ending in a broad, practical footer.

## North star

Use restrained navy and warm pale surfaces to frame tactile bedding photography, with editorial headlines and practical shopping controls.

## Overview

The visual system anchors the store in deep navy #283455, used for the announcement and bundle bands, headings, navigation, links, and primary actions. Gallery White #fdfaf8 keeps the header and shopping areas bright, while cream and cool blue-gray surfaces distinguish editorial and promotional sections without breaking the calm palette. Warm bedding photography supplies most of the page’s color and texture; product images sit on restrained pale backdrops, while full-bleed lifestyle scenes carry campaign moments. Large serif display headlines contrast with compact, friendly BrandonText for navigation, product details, and controls. The long homepage alternates immersive banners with horizontal product and category browsing, using a spacious overall rhythm and dense information only in product cards and the footer. Borders are quiet and shadows minimal, so imagery, color blocks, and typography create hierarchy rather than stacked effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Linen | `#283455` | `--color-midnight-linen` | brand | Core ink for headings, navigation, links, buttons, the announcement strip, and the prominent bundle band. |
| Gallery White | `#fdfaf8` | `--color-gallery-white` | surface | Main canvas and bright shopping surfaces; also supports reversed text and controls on dark bands. |
| Quiet Stitch | `#dddddd` | `--color-quiet-stitch` | neutral | Subtle outlines and hairlines on small controls and secondary interface elements. |
| Warm Muslin | `#f9f3ed` | `--color-warm-muslin` | surface | Soft cream section surface that warms editorial and reassurance content. |
| Misty Blue | `#dde3ec` | `--color-misty-blue` | surface | Cool pale section surface, notably supporting the information-rich footer area. |
| Sage Leaf | `#417823` | `--color-sage-leaf` | accent | Small green promotional text, such as bundle-savings labels; keep usage limited. |
| Soft Graphite | `#6e6e6e` | `--color-soft-graphite` | semantic | Muted secondary copy and supporting navigation or footer text. |

### Semantic aliases

`--color-canvas` → `#fdfaf8` (Gallery White) · `--color-surface` → `#283455` (Midnight Linen) · `--color-surface-2` → `#f9f3ed` (Warm Muslin) · `--color-surface-3` → `#dde3ec` (Misty Blue) · `--color-text` → `#283455` (Midnight Linen) · `--color-text-muted` → `#fdfaf8` (Gallery White) · `--color-text-subtle` → `#6e6e6e` (Soft Graphite) · `--color-border` → `#dddddd` (Quiet Stitch) · `--color-accent` → `#283455` (Midnight Linen) · `--color-accent-2` → `#417823` (Sage Leaf) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#283455` | `#fdfaf8` | 11.8:1 | AAA |
| `#283455` | `#f9f3ed` | 11.14:1 | AAA |
| `#283455` | `#dde3ec` | 9.5:1 | AAA |
| `#fdfaf8` | `#283455` | 11.8:1 | AAA |
| `#fdfaf8` | `#f9f3ed` | 1.06:1 | fail |
| `#fdfaf8` | `#dde3ec` | 1.24:1 | fail |
| `#6e6e6e` | `#fdfaf8` | 4.91:1 | AA |
| `#6e6e6e` | `#283455` | 2.4:1 | fail |
| `#6e6e6e` | `#f9f3ed` | 4.63:1 | AA |
| `#6e6e6e` | `#dde3ec` | 3.95:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BrandonTextWeb-Bold | `--font-body` | webfont | 400 | Compact body emphasis, product links, buttons, and uppercase eyebrow labels. | Nunito Sans |
| BrandonTextWeb-Regular | `--font-brandontextweb-regular` | webfont | 400 | Navigation, supporting copy, captions, and form text. | Nunito Sans |
| ToledoTS-Bold | `--font-display` | webfont | 400 | Display headings, including hero and editorial section titles. | DM Serif Display |

- **BrandonTextWeb-Bold:** Measured as regular weight; compact, slightly tight tracking. Eyebrows use uppercase with expanded spacing.
- **BrandonTextWeb-Regular:** Friendly sans with slightly negative tracking on most roles; keep navigation readable and unembellished.
- **ToledoTS-Bold:** Serif display face measured at regular weight; use sentence case for editorial headings and preserve its distinctive contrast.

### Type scale — Perfect Fourth (ratio ≈ 1.339, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45px | 400 | 1.15 | 0 | — | ToledoTS-Bold | Primary campaign headline over the hero image. |
| h2 | 36px | 400 | 1.15 | 0 | — | ToledoTS-Bold | Major editorial and promotional section headings. |
| h3 | 30px | 400 | 1.15 | 0 | — | ToledoTS-Bold | Subsection and supporting campaign headings. |
| h4 | 24px | 400 | normal | -0.01em | — | BrandonTextWeb-Regular | Card or smaller editorial headings. |
| body | 14px | 400 | normal | -0.01em | — | BrandonTextWeb-Bold | Product details and emphasized short body copy. |
| caption | 12px | 400 | normal | -0.01em | — | BrandonTextWeb-Regular | Small labels, ratings, and supporting metadata. |
| button | 14px | 400 | 1 | -0.01em | — | BrandonTextWeb-Bold | Shopping actions and outlined secondary controls. |
| nav | 18px | 400 | 0.78 | -0.01em | — | BrandonTextWeb-Regular | Main product navigation and footer navigation. |
| link | 14px | 400 | normal | -0.01em | — | BrandonTextWeb-Bold | Product names and inline shopping or support links. |
| eyebrow | 14px | 400 | normal | 0.12em | uppercase | BrandonTextWeb-Bold | Compact uppercase labels above content. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24, 36, 40, 64 px.
- Section rhythm 40px · element gap 40px · card padding — · max content width 1312px.

The desktop page uses a wide, centered commerce canvas, with the measured content maximum at 1312px. A horizontal header leads into broad campaign bands and full-width lifestyle imagery; below, product and category carousels form repeated horizontal grids. Editorial and promotional sections alternate with product browsing to create a clear long-page rhythm. Keep generous separation between major blocks, but allow card details, swatches, footer links, and utility controls to remain compact. The footer switches to multiple aligned columns with a newsletter form.

## Shape & elevation

- Radius: button `4px` · input `20px` · card `16px` · media `2px` · nav `50%` · xs `2px` · sm `4px` · md `6px` · lg `16px` · xl `20px` · pill `9999px`
- Shadow `inset` (media): `rgba(0, 0, 0, 0.88) -1px -88px 215px -2000px inset`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0.6) -1px -88px 40px -25px inset`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- Motion: standard transition `0.25s cubic-bezier(0.33, 1, 0.68, 1)` on interactive elements.

The interface is mostly flat: color bands, photographs, and pale section surfaces provide the layering. Use thin, low-contrast #dddddd outlines for restrained controls and only subtle shadowing where needed. Avoid pronounced card shadows or stacked panels; keep product cards visually open against their background.

## Imagery

Use tactile, natural-light bedroom and bedding photography as the primary visual material. Hero and campaign moments use wide, immersive scenes with centered text and actions; product collections isolate folded bedding or apparel on pale, quiet backdrops. Keep real fabric texture, lived-in styling, and varied warm and cool linens. No illustration-led visual language is evident; small product color swatches serve as utility details.

## Components

### Announcement strip

A narrow #283455 band above the main header, with centered light promotional link text and small side chevrons.

### Commerce navigation

Bright header with wordmark, horizontal category links, search, account, and bag utilities; navigation uses BrandonTextWeb-Regular.

### Campaign banner

Full-width lifestyle photo with centered headline, supporting copy, and paired shopping actions; dark overlay protects legibility.

### Product carousel

Horizontal product cards on a pale field, with product imagery, compact names and pricing, ratings, swatches, and carousel arrows.

### Category tiles

Photo-led category cards with concise labels overlaid near the bottom and horizontal browsing controls.

### Newsletter footer

Multi-column footer on a cool pale surface, pairing store and support links with a rounded email field and signup action.

### Measured component styles

- **Primary button** (“Skip to content”): background #283455 · text #ffffff · radius 20px · padding 0px 14px · 400 14px BrandonTextWeb-Bold
- **Secondary button** (“Quick View”): background #ffffff · text #283455 · radius 0px · padding 0px · 400 13.3333px Arial
- **Link** (“SOFTEST”): transparent background · text #283455 · radius 0px · padding 0px · 400 16px Times New Roman
- **Input**: background #fdfaf8 · text #0f1528 · border 1px solid #283455 · radius 20px · padding 19.2px 24px 0px 24px · 400 14px BrandonTextWeb-Regular
- **Card** (“All Bedding”): background #283455 · text #000000 · radius 16px · padding 0px · 400 16px Times New Roman
- **Navigation item** (“Sheets”): transparent background · text #283455 · radius 0px · padding 0px · 400 18px BrandonTextWeb-Regular

## Do

- Anchor interface chrome and primary actions in #283455.
- Keep shopping canvases bright with #fdfaf8.
- Let bedding photography provide most visual richness.
- Alternate immersive campaigns with scannable product rows.
- Use serif display headlines against BrandonText utility copy.
- Keep borders and elevation restrained.
- Reserve green for small promotional callouts.

## Don't

- Do not replace the calm palette with saturated interface colors.
- Do not put dense copy over busy photography without contrast support.
- Do not use heavy shadows to separate every card.
- Do not turn product grids into oversized editorial panels.
- Do not use all-caps for long headings or body copy.
- Do not make the footer feel like a separate unrelated brand.

## Agent prompt

Build a new Brooklinen-style commerce page with a calm, editorial bedding-store character. Use Midnight Linen (#283455) for navigation, headings, links, and primary actions; Gallery White (#fdfaf8) for the main canvas; Warm Muslin (#f9f3ed) and Misty Blue (#dde3ec) for occasional section bands. Use Soft Graphite (#6e6e6e) for secondary copy, Quiet Stitch (#dddddd) for subtle borders, and only tiny Sage Leaf (#417823) promotional accents. Pair a refined serif display face with a friendly compact sans for navigation, product details, and controls. Build a spacious wide layout that alternates full-width lifestyle campaigns with horizontal product and category browsing. Feature warm, tactile bedroom photography, legible text overlays, restrained controls, product swatches, and a structured multi-column footer. Keep surfaces flat and shadows minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long, single-column sequence of full-width campaigns, product carousels, category tiles, editorial bands, and reviews. | carousel browsing, product discovery, campaign CTAs | nav and announcement bands, full-bleed photography, product cards |
| 2 | footer | Four-column information footer with a wider newsletter area on a pale cool background. | email signup, support navigation, store locator | multi-column link lists, rounded email field, social icons |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/brooklinen-com