---
version: alpha
name: Dwell
description: Modern home and architecture media system — clean editorial grid on white, Noe Text serif headlines, Theinhardt sans chrome, and a vivid indigo accent that signals every interaction.

colors:
  # Canvas / surface
  background: "#ffffff"
  surface: "#f6f6f6"       # sidebar panels, secondary content zones
  surface-alt: "#fafafa"   # subtle section fills, hover backgrounds
  surface-elevated: "#f8f8f8"

  # Text / ink
  ink: "#2d2d2d"           # primary body text and UI labels
  on-background: "#2d2d2d"
  on-surface: "#ffffff"
  ink-secondary: "#767676" # captions, metadata, secondary labels
  ink-muted: "#999999"     # disabled states, placeholder text
  ink-subtle: "#666666"    # mid-weight secondary text, form labels

  # Brand accent — vivid indigo-blue
  primary: "#4558ff"       # links, CTAs, focus rings, selected state
  on-primary: "#ffffff"
  primary-container: "#eef0ff"   # was rgba(69,88,255,0.06) — soft indigo tint
  primary-hover: "#122aff"       # deeper indigo on hover/active

  # Secondary teal (editorial, section color-coding)
  secondary: "#0b8482"     # teal used in editorial tags, section accents
  secondary-light: "#0d9c99"

  # Borders
  border: "#ebebeb"        # subtle dividers, card edges, rule lines
  border-strong: "#cccccc" # input borders, form element outlines

  # Semantic
  error: "#dd2222"         # was #d22 — Google format requires 6-digit hex

typography:
  display-hero:
    fontFamily: "Noe Text, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.03em
  display:
    fontFamily: "Noe Text, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.03em
  heading-section:
    fontFamily: "Noe Text, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.125
    letterSpacing: -0.03em
  heading-sub:
    fontFamily: "Noe Text, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.125
    letterSpacing: 0px
  article-headline:
    fontFamily: "Noe Text, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.02em
  body-large:
    fontFamily: "Noe Text, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Noe Text, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.375
    letterSpacing: 0px
  nav-link:
    fontFamily: "Theinhardt, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.03em
  button-ui:
    fontFamily: "Theinhardt, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label:
    fontFamily: "Theinhardt, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.1em
  caption:
    fontFamily: "Theinhardt, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  md: 6px
  lg: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 20px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    border: "1px solid {colors.border-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-hover}"
    border: "1px solid {colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 16px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-featured:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 0px

  tag:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  tag-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  tag-selected:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 6px 12px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    border: "1px solid {colors.border-strong}"
    padding: 10px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10px 12px

  nav-primary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 0px
  nav-link-default:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
  nav-link-hover:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"

  badge:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 4px 8px

  section-divider:
    backgroundColor: "{colors.background}"
    textColor: "{colors.secondary}"
    border: "1px solid {colors.border}"
    typography: "{typography.label}"
    padding: 8px 0px

  article-card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  article-card-headline-hover:
    textColor: "{colors.primary}"
---

# Dwell Design System

## Overview

Dwell's digital identity carries the authority of a print magazine that has shaped modern residential architecture for over two decades. The canvas is pure white (`{colors.background}`) — not a neutral default, but a deliberate commitment to editorial clarity where photography breathes and typography commands. Against this ground, the primary text ink (`{colors.ink}`, a warm near-black at `#2d2d2d`) lands with comfortable authority, while the vivid indigo accent (`{colors.primary}`) reserves its saturated energy entirely for interactions: links, CTAs, selected tags, and focus rings. Nothing on the page carries that blue at rest except the things that move.

The type system splits cleanly into two registers. Noe Text, a contemporary display serif with sharp ink traps and generous x-height, carries every headline from article titles at 64px to card captions at 24px — always with negative tracking (as tight as `-.03em`) that presses letters into tight editorial blocks. Theinhardt, a Swiss geometric sans in three weights (Regular/400, Medium/500, Bold/700), handles navigation, labels, captions, and all UI chrome. The combination reads as architecturally intelligent: the serif is warm and humanist, the sans is precise and structural, and neither ever trades places with the other.

What distinguishes Dwell from peers like Dezeen or Wallpaper is the controlled color vocabulary. Beyond the indigo and a secondary teal (`{colors.secondary}`) used sparingly in editorial section color-coding, the system stays resolutely desaturated. Whitespace is generous — section gutters breathe at 48–64px, and the reading column stays narrow enough to feel intentional rather than merely wide. Cards carry the lightest possible shadow (`{colors.shadow-soft}` at just 9% opacity), barely lifting off the page — more a texture cue than a depth statement. The result is a publication that feels curated, unhurried, and built for people who take interior design seriously.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with warm-black ink (`{colors.ink}` at `#2d2d2d`) — editorially clean, never clinical
- Single indigo accent (`{colors.primary}`) deployed on interactions only — links, CTAs, focus states, selected tags
- Noe Text serif at negative tracking (`-.02em` to `-.03em`) for all editorial display sizes — compact, authoritative
- Theinhardt geometric sans for all UI chrome at Medium/500 weight — precise, never heavy
- Two-weight tag system: `{colors.primary-container}` fills at rest, `{colors.primary}` fill on selected/hover — pill shape only
- Feather-light card shadows (`0 1px 2px`) — elevation implied, not declared
- Responsive display type: article titles scale from `40px` mobile to `64px` desktop — fluid editorial
- `4px` and `6px` radius as the working defaults for interactive elements — softened but not rounded
- Inputs with a clean `1px solid {colors.border-strong}` border at rest, `{colors.primary}` border on focus — no glow ring
- Navigation sits at `60–80px` height, sticky on desktop, with subtle spacing that signals the header without imposing
- Open tracking (`0.1em`) on uppercase label text — scannable category taxonomy
- Secondary teal (`{colors.secondary}`) used for editorial section markers and specialty tags — never for primary CTAs

## Colors

### Primary (Canvas & Ink)
- **Page White** (`{colors.background}`): The editorial canvas. Absolute — every content surface starts here. No warm tint, no cool wash.
- **Warm Dark** (`{colors.ink}`): All primary text, headlines at body scale, navigation labels. The slight warmth (`#2d2d2d` rather than pure black) prevents harshness over long reading sessions.

### Brand Accent
- **Dwell Indigo** (`{colors.primary}`): The single chromatic accent across the system. Active on link text, CTA fills, tag selected states, input focus borders, and focus rings. Never decorative — only interactive.
- **Indigo Hover** (`{colors.primary-hover}`): Deeper indigo (`#122aff`) for hover and active states on the primary accent. Applied as `transition: color 0.4s` throughout.
- **Indigo Tint** (`{colors.primary-container}`): Soft background for tag pills at rest and selected-option fills in multi-choice UIs. Was `rgba(69,88,255,0.06)` — flattened to hex per Google format.

### Text States
- **Secondary Text** (`{colors.ink-secondary}`): Bylines, timestamps, photo captions, metadata. Never for headlines.
- **Muted Text** (`{colors.ink-muted}`): Disabled states, placeholder labels.
- **Subtle Text** (`{colors.ink-subtle}`): Form instruction labels, sidebar secondary links.

### Semantic & Editorial
- **Secondary Teal** (`{colors.secondary}`): Editorial accent for section category markers. A warmer counterpoint to the cool indigo primary.
- **Error** (`{colors.error}`): Form validation, destructive action states.

### Borders & Dividers
- **Soft Border** (`{colors.border}`): Section dividers, image separators, article list rules.
- **Form Border** (`{colors.border-strong}`): Input outlines at rest.

## Typography

### Font Family
- **Display / Editorial Serif**: `Noe Text` — a contemporary high-contrast serif with ink-trap detailing. Self-hosted in Regular (400), Semibold (600), and Black (900) weights. Fallback: `Georgia, Cambria, Times New Roman, Times, serif`
- **UI / Navigation Sans**: `Theinhardt` — Swiss geometric sans, self-hosted in Regular (400), Medium (500), and Bold (700). Fallback: `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif`
- The system uses no Google Fonts or Adobe Fonts — both typefaces are served from `assets.dwell.com/fonts/`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px article page titles and hero feature headlines |
| `display` | 48px section hero headlines and feature story leads |
| `heading-section` | 38px section headings, feature grid titles |
| `heading-sub` | 28px sub-section and module headings |
| `article-headline` | 24px standard story card headlines throughout the browse grid |
| `body-large` | 18px article lede paragraphs, pull-quote text |
| `body` | 16px main article body, Noe Text at relaxed reading size |
| `nav-link` | 14px Theinhardt Medium navigation links and tab labels |
| `button-ui` | 14px Theinhardt Medium button labels and CTA text |
| `label` | 12px Theinhardt uppercase category labels with open tracking |
| `caption` | 13px Theinhardt Regular photo credits, timestamps |

### Principles
- **Noe Text carries all editorial weight.** From 64px hero to 16px body copy, the serif never breaks rank — Theinhardt handles the scaffolding around it.
- **Negative tracking scales with size.** Display headlines run at `-.03em`, article cards at `-.02em`, body copy at `0`. Closer set at large sizes reads as editorial authority; open set at body sizes reads as comfort.
- **Theinhardt Medium (500) is the default UI weight.** It appears significantly more often in the codebase than Regular or Bold — this is the everyday weight for labels, navigation, and CTAs.
- **700 is reserved for editorial headlines.** Noe Text at weight 700 signals a headline to be read; Theinhardt at weight 700 is used only for modal headers and emphasis text.
- **No thin or light weights.** Unlike many design publications that use ultralight display type for luxury connotation, Dwell's system is solid throughout. Every display moment is bold.

## Layout

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

Dwell's spacing reads as editorial and measured. Section breaks use 48–64px of vertical air; reading columns sit with comfortable 20–30px lateral padding; the tightest UI elements (tag pills, nav items) pull down to 8–12px. The system is generous but not indulgent — closer to a well-designed newsmagazine than a luxury lifestyle publication with vast whitespace.

### Grid & Container
- Max content width: approximately 1200px for primary layout column
- Article reading column: narrower, approximately 700px at desktop for comfortable long-form reading
- Navigation bar height: 60px mobile, 80px desktop (sticky, white background)
- Sidebar panel: 460px width at 1440px+ breakpoint; 33% width between 1025px and 1440px
- Column structure: primarily 2–3 columns for card grids; single column for article reading

### Whitespace Philosophy
- Section dividers breathe with `{spacing.2xl}` (48px) or `{spacing.3xl}` (64px) between major page sections
- Card grids use 16–24px gutters — close enough to feel curated, open enough to let photography register
- Reading columns maintain narrow width deliberately — resist stretching the measure beyond comfortable line length

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Article cards at rest, navigation, image tiles |
| Card (Level 1) | `0 1px 2px {colors.shadow-soft}, 0 2px 6px {colors.shadow-soft}` | Featured story cards, interactive content blocks |
| Notification (Level 2) | `0 2px 4px {colors.shadow-soft}, 0 6px 24px {colors.shadow-soft}` | Toast notifications, slide-up comment drawers |
| Modal (Level 3) | `0 6px 20px rgba(0,0,0,0.10), 0 2px 6px {colors.shadow-soft}` | Inline modals, photo lightbox, content drawers |
| Focus Ring | `1px solid {colors.primary}` border on input | Keyboard navigation, form focus states |

**Shadow Philosophy**: Dwell's shadows are restrained to a near-invisible presence. The primary card shadow at Level 1 uses `rgba(0,0,0,0.09)` and `rgba(0,0,0,0.15)` — barely a suggestion of lift. This keeps the editorial grid looking flat and print-like while providing enough surface cue for interactive elements. The most dramatic shadow in the system is still subtle: notification drawers that slide up from the bottom use a double shadow with a maximum opacity of `0.24`. Nothing here competes with the photography.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Article card images, section dividers, flush content blocks |
| `sm` | 4px | Inputs, secondary buttons, thumbnail overlays, small badges |
| `md` | 6px | Navigation popovers, dropdown menus, small modals |
| `lg` | 12px | Large slide-up drawers, content panels, expanded modals |
| `pill` | 9999px | Tag pills, category filters, the signature content taxonomy UI |

The shape vocabulary is notably warmer than editorial peers like Dezeen or Kinfolk. The combination of 4px and 6px radii on interactive elements produces a slightly approachable, modern-consumer tone — modern architecture magazine, not brutalist design journal. The pill-shaped tag system is the design's most distinctive form: a row of `{colors.primary-container}` filled pill tags that light up to solid `{colors.primary}` on selection creates a visual language unique to Dwell's browse experience.

## Components

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

### Button variants
- **`button-primary`** — Full `{colors.primary}` fill, white Theinhardt Medium label, no radius. Used for "Save", "Follow", "Subscribe" CTAs. Transitions to `{colors.primary-hover}` on hover in `0.4s`.
- **`button-secondary`** — White fill, `{colors.primary}` text, `1px solid {colors.border-strong}` border. Used alongside primary for secondary actions. Hover shifts to `{colors.primary-container}` fill.
- **`button-primary-hover` / `button-secondary-hover`** — Deeper indigo or tinted fill. 0.4s ease transition throughout.

### Cards
- **`card`** — Flat editorial tile with no chrome. Article image flush to top, headline in `{typography.article-headline}` below. No background, no radius on image.
- **`card-featured`** — Light shadow variant for promoted content. `0 1px 2px` + `0 2px 6px` double-layer shadow, `{rounded.sm}` radius.
- **`article-card-headline-hover`** — Headline text color transitions to `{colors.primary}` on card hover.

### Tags
- **`tag`** — Pill shape (`{rounded.pill}`), `{colors.primary-container}` fill, `{colors.primary}` text, `{typography.label}` font with `0.1em` uppercase tracking. The browse taxonomy UI.
- **`tag-selected`** — Same pill, solid `{colors.primary}` fill, white text. Selected filter state.

### Inputs
- **`input`** — White fill, `1px solid {colors.border-strong}`, `{rounded.sm}`, generous `10px 12px` padding. Clean minimal form style.
- **`input-focus`** — Border flips to `{colors.primary}`. No glow ring, no shadow — straightforward focus signal.

### Navigation
- **`nav-primary`** — Sticky white header, 60px mobile / 80px desktop. Theinhardt Medium 14px navigation links in `{colors.ink-secondary}` at rest, `{colors.ink}` on hover. Brand wordmark centered or left.
- Navigation scroll shadow: `0 -1px 10px rgba(172,171,171,0.3)` on sticky state — upward casting, nearly invisible.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for interactive elements — links, selected states, CTAs, focus borders. The indigo's force comes from its exclusivity.
- Set headlines in Noe Text at `{typography.article-headline}` or larger with negative letter-spacing — allow the serif to compress into editorial blocks.
- Use `{rounded.pill}` for tag and category filter components — it is the system's signature shape and visual fingerprint.
- Maintain the `{colors.ink}` / `{colors.ink-secondary}` two-tier text hierarchy: primary body in `#2d2d2d`, metadata/captions in `#767676`.
- Apply `transition: color 0.4s` on all interactive color changes — the `0.4s` ease is explicit in the CSS and creates the system's characteristic unhurried response.
- Use `{colors.primary-container}` for tag pills at rest and selected-option chip backgrounds — keep the indigo fill reserved for active/selected states.
- Let Noe Text carry display hierarchy to 64px — resist supplementing with Theinhardt at headline sizes.

### Don't
- Don't introduce `{colors.primary}` as a decorative fill on backgrounds, headers, or non-interactive elements — it belongs only to things users can act on.
- Don't use Theinhardt for article body copy or editorial prose — Noe Text is the reading voice; Theinhardt is the scaffolding.
- Don't add heavy shadows to article card tiles — the `0 1px 2px` card shadow is the maximum for editorial surfaces. Deeper shadows read as consumer-app, not editorial.
- Don't use open or neutral letter-spacing on Noe Text headlines — the `-.02em` to `-.03em` compression is definitional at display sizes.
- Don't replace the pill-shaped tag system with rectangular or barely-rounded chips — the pill is the browse taxonomy fingerprint.
- Don't add a third typeface — Noe Text and Theinhardt cover every register the system needs.
- Don't set `{colors.secondary}` (teal `#0b8482`) as a CTA color — it is an editorial accent for section color-coding, not a primary interaction color.
- Don't use border-radius larger than `{rounded.lg}` (12px) except on pill tags — the system's interaction vocabulary is softened-but-not-bubbly.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, 16px lateral padding, hero scales to 32px |
| Mobile | 375px–639px | Single column, nav collapses to hamburger, article titles 40px |
| Tablet | 640px–767px | 2-column card grid begins, 40–48px display type |
| Tablet Large | 768px–1024px | Full 2-column grid, sticky nav at 80px, article titles 48px |
| Desktop | 1025px–1439px | 3-column card grid, sidebar panel 33%, article titles 64px |
| Wide Desktop | 1440px+ | Sidebar fixed 460px, content max 1200px, full editorial layout |

### Touch Targets
- CTA buttons: minimum 44px height via generous vertical padding
- Tag pills: 32–36px height — borderline; acceptable for browse filter UI
- Navigation links: 60px nav height provides ample touch area
- Article card link targets: entire image + headline block forms the tap target

### Collapsing Strategy
- Navigation hamburger below 1025px; above 1025px full horizontal nav with right-side sidebar expansion
- Display headline scale: 64px → 48px → 40px from desktop to mobile, maintaining Noe Text serif throughout
- 3-column article grid collapses: 3 → 2 at 1025px → 2 at 768px → 1 at 640px
- Sidebar panel transitions from fixed 460px column to sliding overlay panel below 1025px
- Tag filter row: horizontally scrollable at mobile, wraps at tablet and above

### Image Behavior
- Article hero images: full-width of their container at all breakpoints, `object-fit: cover`
- Card thumbnails: fixed aspect ratios (16:9 and 3:2) maintained via CSS aspect-ratio
- Image captions: Theinhardt Regular 13px, `{colors.ink-secondary}`, below image at all breakpoints
- No border-radius on editorial photography — all images flush-edge to their container

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent (interactive only): `{colors.primary}`
- Accent hover: `{colors.primary-hover}`
- Accent tint (chip backgrounds): `{colors.primary-container}`
- Border: `{colors.border}`
- CTA fill: `{colors.primary}`

### Example Component Prompts

- "Build a Dwell-style article card grid. White canvas (`{colors.background}`), 3-column layout with `{spacing.lg}` gap. Each card: full-width image at top (no border-radius, 16:9 aspect ratio), category label below in `{typography.label}` uppercase Theinhardt 12px color `{colors.ink-secondary}`, article headline in `{typography.article-headline}` Noe Text 24px 700 `{colors.ink}` letter-spacing `-.02em`. On card hover: headline transitions to `{colors.primary}` via `transition: color 0.4s ease`. Author and date below in `{typography.caption}` `{colors.ink-secondary}`."

- "Create a Dwell tag filter row. Pill-shaped tags (`{rounded.pill}`) with `{colors.primary-container}` background and `{colors.primary}` text for unselected, solid `{colors.primary}` background with white text for selected. Font: `{typography.label}` (Theinhardt 12px 500 uppercase, `letter-spacing: 0.1em`). Padding: `6px 12px`. Gap between pills: `{spacing.sm}`. On hover: unselected tags flip to selected appearance via `transition: background-color 0.4s, color 0.4s`."

- "Design a Dwell primary CTA button: `{colors.primary}` background, `{colors.on-primary}` Theinhardt 14px 500 label, `{rounded.none}` corners (no border-radius), `14px 20px` padding, no border. Hover state: background becomes `{colors.primary-hover}` with `transition: background-color 0.4s`. For a secondary variant: white background, `{colors.primary}` text, `1px solid {colors.border-strong}` border, `{rounded.sm}` corners, same padding."

- "Build a Dwell article hero section. White canvas, max-width 1200px centered. Full-bleed hero image at top (no radius, 16:9). Below the image: category label in `{typography.label}` `{colors.ink-secondary}` uppercase 12px; main headline in `{typography.display-hero}` Noe Text 64px weight 700 `letter-spacing: -.03em` `line-height: 1.1` color `{colors.ink}`; lede paragraph in `{typography.body-large}` Noe Text 18px 400 `line-height: 1.6` `{colors.ink}`; author byline in `{typography.caption}` Theinhardt 13px `{colors.ink-secondary}`."

- "Create a Dwell navigation bar: white (`{colors.background}`) background, height 80px, sticky. Brand wordmark (SVG) centered or left. Nav links in `{typography.nav-link}` Theinhardt 14px Medium (500), `{colors.ink-secondary}` at rest, `{colors.ink}` on hover, `transition: color 0.4s`. On scroll: add `box-shadow: 0 -1px 10px rgba(172,171,171,0.3)` (upward-casting scroll shadow). Right side: `{components.button-primary}` 'Subscribe' CTA."

- "Design a Dwell search input: white fill, `1px solid {colors.border-strong}` border, `{rounded.sm}` corners, `10px 12px` padding, `{typography.body}` placeholder text in `{colors.ink-muted}`. On focus: border color transitions to `{colors.primary}` with no box-shadow or glow. Submit button: `{components.button-primary}` directly attached to the right of the input field."

### Iteration Guide

1. **Canvas first.** Set `background-color: {colors.background}` globally. Dwell's editorial clarity lives or dies on pure white — no warm tints, no gray surfaces behind reading content.
2. **Reserve the indigo.** Every element at rest is monochrome (`{colors.ink}`, `{colors.ink-secondary}`, `{colors.border}`). The `{colors.primary}` indigo appears only when an element can be interacted with — links, buttons, focus states, selected tags. The color difference between a resting state and an active state IS the indigo.
3. **Noe Text for everything editorial.** If it's read, it's Noe Text. If it's navigated or clicked, it's Theinhardt. The split is clean and non-negotiable.
4. **Compress headlines with negative tracking.** Display sizes need `-.03em`, mid-sizes `-.02em`. Headlines that let their letters breathe at large scale feel like desktop publishing, not print editorial.
5. **Use the pill for taxonomy.** The `{rounded.pill}` tag shape is Dwell's most distinctive UI element — the browse filter row is the system's personality moment. Stay faithful to it.
6. **Shadow economy.** Only one shadow level for article surfaces (`0 1px 2px`). Deeper shadows belong to popovers, drawers, and modals — not editorial cards.
7. **Theinhardt Medium (500) as the UI baseline.** Not Regular, not Bold. The Medium weight is the system's default sans weight across navigation, labels, and CTAs.

---

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