A quiet, print-derived design magazine that lets full-bleed architectural photography carry the page over a white canvas and warm near-black #2d2d2d ink with generous whitespace. Contrary to a "serif-led" read, it is SANS-led: the workhorse is Theinhardt, a Swiss neo-grotesque used for 14px/500 nav, 18px/400 body and 24px/700 sub-heads, lifted only at display scale by a Noe Text high-contrast serif set 48/54 at -1.44px tracking, all in sentence case with no tracked uppercase eyebrows. Colour is rationed to two moments: a dusty-mauve #cc91b6 newsletter band pinned above the nav, and a muted teal #0b8482 that owns the Dwell+ subscribe controls (a solid 54px primary CTA plus a pale rgba(11,132,130,.1) tint pill), with links in violet #4558ff and blue #0099ff. Buttons are small pills at 32px on a 4 to 6px radius, fields round to 25px, and depth stays soft and editorial (rgba(0,0,0,.05) 0 4px 16px card shadows) with no gradients or backdrop blur. Motion is unhurried — a slow color 0.4s ease link transition and 1s fade-in reveals, no animation library. Two honest gaps: the button hover and focus states could not be isolated because the CSS-module classes are hashed and carry no explicit hover rule, and there is no reduced-motion block. Theinhardt and Noe Text are licensed, so the preview stands in with Inter and Fraunces.
⚠ needs-dashboard
Browse Dwell in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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.
| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.