# Dwell — Marketing / Home Design Spec

> Source: dwell.com (live DOM, computed styles), 2026-08-02 (desktop 1512px).
> Coverage: home / article index. Same-origin stylesheets readable (sheetsBlocked 0); OneTrust consent-widget rules excluded as third-party. Button :hover not isolated — CSS-module hashed classes carry no explicit :hover rule (see §4), so exact hover fills are `not captured` (earned).
> Reality check: hint said "serif-led" — actually SANS-led. The workhorse is **Theinhardt**, a Swiss neo-grotesque (763×); a **Noe Text** high-contrast serif is reserved for display headlines only (24×). So it is serif-*accented*, not serif-led. The rest of the hint holds: quiet editorial magazine, generous whitespace, full-bleed photography.

## 1. Visual Theme & Atmosphere

A calm, print-derived design magazine: a white canvas, warm near-black #2d2d2d ink, and page after page of full-bleed architectural photography with generous whitespace. Chrome is quiet and restrained — a thin nav, small pill buttons, hairline dividers — so the homes carry all the visual weight. The one moment of brand colour is a dusty-mauve #cc91b6 newsletter band pinned above the nav; the product accent is a muted teal #0b8482 on the Dwell+ subscribe controls. Typography does the editorial work: a neutral neo-grotesque for everything functional, lifted by a high-contrast serif for the large "Unlock the Best of Dwell"-style display headlines. Feels: quiet, editorial, refined, print-derived.

## 2. Color Palette & Roles

### Ink & neutrals
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#2d2d2d` | Primary text, headings (warm near-black, 681×) |
| ink-black | `#000000` | Occasional strong text |
| grey-77 | `#767676` | Secondary text |
| grey-ad | `#adadad` | Muted / meta text |
| border-c1 | `#c1c1c1` | Input / control hairline |
| border-aa | `#aaaaaa` | Hairline |
| surface-f4 | `#f4f4f4` | Light grey inset |
| tint-05 | `rgba(0,0,0,.05)` | Hover / inset fill |
| white | `#ffffff` | Page canvas, cards |

### Accents
| Token | Hex | Role / usage |
|---|---|---|
| teal (Dwell+) | `#0b8482` | Primary brand accent: Subscribe pill + Try-Dwell+ CTA (solid + `rgba(11,132,130,.1)` tint) |
| mauve | `#cc91b6` | Newsletter banner band (signature colour moment) |
| link-violet | `#4558ff` | Inline text links ("Sign up") |
| blue | `#0099ff` | Secondary link / outline button |

Rule: chrome is white + warm-grey; teal is the product-accent (Dwell+), mauve is reserved for the newsletter band, and blue/violet only tint links.

## 3. Typography Rules

- **Theinhardt** (neo-grotesque, workhorse, 763×) for nav, body, UI and most headings. **Noe Text** (high-contrast serif, 24×) for large display headlines only.
- Specimens below use open stand-ins — **Inter** for Theinhardt, **Fraunces** for Noe Text; the site ships the licensed Optimo / Schick Toikka faces.
- Body 18px / 27px / 400.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display headline | Noe Text (serif) | 48 / 54 | 700 | -1.44px |
| Sub / section (h3) | Theinhardt | 24 / 28.8 | 700 | normal |
| Body | Theinhardt | 18 / 27 | 400 | normal |
| Nav / UI | Theinhardt | 14 / 21 | 500 | normal |

Patterns: the serif appears only at display scale with tight -1.44px tracking; everything else is the grotesque at 400–700. Sentence case throughout — no tracked uppercase eyebrows.

## 4. Component Stylings

### Buttons
- **Dwell+ primary CTA (Try Dwell+ for FREE)**: bg `#0b8482`, text `#ffffff`, radius 4px, h 54px, Theinhardt 18/500, padding `18px 27px`.
- **Subscribe (nav)**: bg `rgba(11,132,130,.1)` pale teal, text `#0b8482`, radius 6px, h 32px, 14/500, padding `9px 12px`.
- **Sign In (nav)**: bg `rgba(0,0,0,.06)` light grey, text `rgba(0,0,0,.82)`, radius 6px, h 32px.
- **Outline (More Stories)**: transparent, text `#0099ff`, 1px `#0099ff` border, radius 4px, h 32px.

### Inputs
- Search / newsletter field: bg white, 1px `#c1c1c1`/`#aaaaaa` border, radius up to 25px on rounded pill fields, placeholder grey, Theinhardt 14–18px.

### Cards / panels
- White cards over white; soft editorial shadow `rgba(0,0,0,.05) 0 4px 16px` (deeper `rgba(0,0,0,.1) 0 6px 20px` on modals). Radius 4–8px; hairline `#c1c1c1` dividers. Article tiles are full-bleed `<img>` photography with the headline below.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Text link | `#2d2d2d` / accent | `color 0.4s ease` shift | not captured (see note) | — | — |
| Dwell+ / Subscribe button | teal fill / tint | not isolated (CSS-module hashing) | not captured | — | — |
| Input | 1px border | — | not captured | — | — |

Note: buttons use hashed CSS-module classes with no explicit `:hover` rule in the stylesheets — the page's dominant interaction is a global `color 0.4s ease` transition on links; exact button hover fills and focus rings were not isolable (earned `not captured`).

## 5. Layout Principles

- Top-pinned mauve newsletter band, then a thin white nav: lowercase "dwell" wordmark left, section links (Home Tours, Photos, Magazine, Shop, Projects, Collections, Find a Pro) + search, Subscribe + Sign In right.
- Full-bleed editorial hero photo, then a magazine grid of image-led story cards with headline + dek beneath each.
- Generous whitespace and a centered ~1280px max content column; hairline dividers, not heavy rules.

## 6. Depth & Elevation

- Radii: `25px` (rounded pill fields, 12&times;), `6px` (nav buttons), `4px` (CTAs / outline), `8px`, `2px`, `50%` (avatars); dropdowns use `0 0 4px 4px`.
- Borders: 2px `#2d2d2d` (emphasis), 1px `#c1c1c1`/`#aaaaaa` hairlines, 1px `#0099ff` outline button.
- Elevation: soft editorial shadows — `rgba(0,0,0,.05) 0 4px 16px` on cards, `rgba(0,0,0,.1) 0 6px 20px` on modals. Restrained, never heavy.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.4s | ease | link / text colour (dominant, 217&times;) |
| color | 0.15s | ease | quicker link shifts |
| opacity, transform | 0.4s | ease | reveals, carousel |
| all | 0.5s | ease | misc |
| background-color | 0.4s | ease | button/band fills |

House transition: a slow **`color 0.4s ease`** on links — the editorial, unhurried hover. Keyframes: `fade-in` (1s ease, content reveal), `rotateSpinner` / hashed module spinners (loaders), `fb_transform`. No animation library. No `prefers-reduced-motion` block (reducedMotionBlocks 0) — recorded as a gap.

## 8. Backgrounds, Effects & WebGL

- Flat solid surfaces; atmosphere is full-bleed `<img>` photography (no CSS background images, rasterLayers 0; no canvas, WebGL, video or grain).
- No CSS gradients and no backdrop-filter blur — depth is soft shadow + whitespace only.

## 9. Do's and Don'ts

### Do
- Keep a white canvas with warm near-black `#2d2d2d` ink and generous whitespace; let architectural photography carry the page.
- Use Theinhardt (neo-grotesque) for everything functional; reserve the Noe serif for large display headlines at tight -1.44px tracking.
- Keep the teal `#0b8482` for Dwell+ subscribe controls and the mauve `#cc91b6` strictly for the newsletter band.
- Use small pill buttons (32px, radius 4–6px) with pale-tint or solid fills; outline buttons at 1px `#0099ff`.
- Keep shadows soft and editorial (`rgba(0,0,0,.05) 0 4px 16px`); transitions slow (`color 0.4s ease`).

### Don't
- Don't make the site serif-led — the serif is display-only; body/UI stay in the grotesque.
- Don't add heavy shadows, gradients or backdrop blur — depth is whitespace + faint shadow.
- Don't spread teal or mauve into general chrome; each has one job.
- Don't use tracked uppercase eyebrows — the type is sentence-case throughout.
- Don't ship the fade/reveal motion without a reduced-motion block (the live site omits one).

## 10. Responsive Behavior

- Breakpoints from stylesheets: 400, 426, 530, 550, 600, 768, 896, 1280px — a device-oriented ladder.
- The magazine grid recolumns to single-column; the nav collapses to a menu; the mauve band and hero persist.
- No `prefers-color-scheme: dark` block (darkSchemeBlocks 0) — single light theme. No container queries.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#2d2d2d` · Muted `#767676` · Border `#c1c1c1` · Accent teal `#0b8482` · Banner mauve `#cc91b6`
- Fonts: Theinhardt (Inter) sans + Noe Text (Fraunces) serif display · Body 18px · Radius 4–6px control / 25px pill field · Control height 32–54px
- Focus: not captured (recommend visible ring) · Hover: `color 0.4s ease`

<dwell_design_language>
Use the Dwell design language: a quiet, print-derived design magazine. White canvas, warm near-black `#2d2d2d` ink, a warm-grey ladder (#767676/#adadad/#c1c1c1/#f4f4f4) and generous whitespace, with full-bleed architectural photography carrying the page. Type is SANS-led: Theinhardt, a Swiss neo-grotesque (stand-in Inter), for 14px/500 nav, 18px/400 body and 24px/700 sub-heads, lifted by a Noe Text high-contrast SERIF (stand-in Fraunces) reserved for 48px display headlines at -1.44px tracking; sentence case throughout, no tracked uppercase eyebrows. The one brand-colour moment is a dusty-mauve `#cc91b6` newsletter band above the nav; the product accent is a muted teal `#0b8482` on the Dwell+ subscribe CTA (solid) and Subscribe pill (`rgba(11,132,130,.1)` tint), with links in violet `#4558ff` / blue `#0099ff`. Buttons are small pills (32px, radius 4&ndash;6px) plus a 54px teal primary; inputs use 1px `#c1c1c1` borders and up to 25px rounded fields. Depth is soft and editorial (`rgba(0,0,0,.05) 0 4px 16px` cards), never heavy; no gradients, no backdrop blur. Motion is slow and unhurried &mdash; a `color 0.4s ease` link transition and 1s fade-in reveals, no animation library. Feels: quiet, editorial, refined, print-derived. Avoid: making it serif-led (the serif is display-only), heavy shadows or gradients, spreading teal/mauve into general chrome, tracked uppercase eyebrows, or omitting a reduced-motion block.
</dwell_design_language>