---
version: alpha
name: "Quanta Magazine"
description: "Editorial design system for science's most design-forward publication — deep cosmic backgrounds, bold serif display type, and a single solar-orange accent anchoring a near-monochromatic ink palette."

colors:
  # Canvas / surface
  background: "#ffffff"
  surface: "#f5f5f5"          # tinted panel — newsletter blocks, related-article rails
  surface-dark: "#08003d"     # deep navy hero — dembrandt gradient stop rgb(8,0,61); cosmic hero panels
  surface-dark-mid: "#0d0038" # intermediate navy used on section-dark backgrounds /* estimated */

  # Ink
  ink: "#1a1a1a"              # dembrandt semantic.primary — near-black, slightly warmer than pure black
  ink-secondary: "#6b6b6b"    # dembrandt palette role neutral — bylines, timestamps, metadata
  ink-tertiary: "#999999"     # dembrandt palette — captions, icon UI, tertiary elements
  on-background: "#1a1a1a"
  on-surface: "#1a1a1a"
  on-primary: "#000000"       # dark text on orange CTA for contrast

  # Brand accent
  primary: "#ff8600"          # dembrandt palette accent rgb(255,134,0) — Quanta orange; CTAs, active state, underlines
  primary-hover: "#d97200"    # dembrandt hover value for primary

  # Navigation & borders
  border: "#999999"           # left-border accent on list items; dembrandt borders
  border-soft: "#cccccc"      # was rgb(204,204,204) — input and structural dividers
  divider: "#4d4d4d"          # was rgb(77,77,77) — section dividers and dark-context rules

  # Semantic
  focus-ring: "#ff8600"       # orange focus — matches brand accent; dembrandt input.focus.borderColor
  error: "#ea4235"            # was rgb(234,66,53) — error button state from dembrandt borders

  # Shadow / depth
  shadow-soft: "#000000"      # was rgba(0,0,0,0.2) 0px 5px 5px — Google format requires hex /* estimated */
  shadow-deep: "#000000"      # was rgba(0,0,0,0.9) 0px 0px 20px — dark vignette on hero media /* estimated */

typography:
  display-hero:
    fontFamily: "Noe Display, Merriweather, Georgia, serif"
    fontSize: 45px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Noe Display, Merriweather, Georgia, serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Pangram, Avenir, Helvetica, sans-serif"
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.40
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Noe Display, Merriweather, Georgia, serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.40
    letterSpacing: 0px
  body-large:
    fontFamily: "Merriweather, Georgia, serif"
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.70
    letterSpacing: 0px
  body:
    fontFamily: "Merriweather, Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.70
    letterSpacing: 0px
  nav-link:
    fontFamily: "Pangram, Avenir, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: 0px
  button-ui:
    fontFamily: "Pangram, Avenir, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  label-overline:
    fontFamily: "Pangram, Avenir, Helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 800
    lineHeight: 1.40
    letterSpacing: 3.5px
  caption:
    fontFamily: "Pangram, Avenir, Helvetica, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.65
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 2px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: 2px solid {colors.primary}
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: 2px solid {colors.primary-hover}
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: 2px solid {colors.border-soft}
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: 2px solid {colors.ink}
  button-ghost-dark:
    backgroundColor: "transparent"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: 2px solid {colors.background}
  button-ghost-dark-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: 2px solid {colors.background}
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    border: 1px solid {colors.surface}
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.background}"
    rounded: "{rounded.none}"
    padding: 32px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 19px
    border: 2px solid {colors.border-soft}
  input-focus:
    backgroundColor: "{colors.border-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 19px
    border: 2px solid {colors.primary}
    outlineColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-overline}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-topic:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-overline}"
    rounded: "{rounded.none}"
    padding: 4px 0px
---

# Quanta Magazine Design System

## Overview

Quanta Magazine is science journalism with the visual ambition of a gallery. The homepage opens with a full-bleed painting — a deep-navy cosmic field (`{colors.surface-dark}`) populated by scientific illustrations that sit somewhere between vector art and Renaissance engraving. Against that starfield, a single solar-orange (`{colors.primary}`) functions as the mark of a live story: it underlines article links, frames the play button on video, and lights up the CTA border on subscription prompts. Everything else retreats to near-black and white, making the orange feel like a signal rather than decoration. The design communicates that rigorous science can be beautiful, and that beauty is itself a form of precision.

The type system is a deliberate pairing of two proprietary-feeling faces: **Noe Display** (a heavy, high-contrast serif with an editorial-magazine presence) for all headlines and article titles, and **Merriweather** for the reading column. Above them sits **Pangram** — a geometric sans used exclusively for UI chrome, section labels, and the tracking-heavy uppercase overlines that announce content categories at 10px / 3.5px letter-spacing. This three-voice system creates the same separation as the best broadsheet editorial design: the face that sells the story, the face that tells it, and the face that navigates you around it.

The canvas is nearly flat. Quanta's surface and shadow system is minimal by deliberate choice: a single drop shadow at 5px / 20% black handles card hover lift, and the dark hero panels achieve their drama through tonal inversion rather than atmospheric blur. The result is a publication that looks as at home in a research library as it does on a tablet: authoritative, dense with information, and lit from within by a single orange star.

**Key Characteristics:**
- Deep navy hero panels (`{colors.surface-dark}`) with full-bleed scientific illustration — the site's signature visual mode
- Solar orange (`{colors.primary}`) as the sole chromatic accent: link underlines, play buttons, input focus, active navigation state
- Noe Display at 40–45px / weight 700 for all editorial display — magazine-tight 1.05 line-height compresses headlines into dense visual blocks
- Merriweather at 16–19px for body reading — weight 400–600 with 1.70 line-height for long-form comfort
- Pangram overlines at 10px / 800 / 3.5px letter-spacing / uppercase — the primary taxonomy device (MATHEMATICS, PHYSICS, BIOLOGY labels)
- Orange underline decoration on inline article links — `text-decoration: underline {colors.primary}` — hovering removes it, inverting the expected pattern
- Near-binary radius system: `{rounded.none}` (0px) for cards, buttons, inputs; 50% for circular icon badges
- 8px base spacing unit with heavy use at 32px (cards), 40px (section breaks), and 64–96px (hero breathing room)
- Scientific illustration as editorial voice — custom vector art per major feature rather than stock photography
- Subtle drop shadow on card hover (`0px 5px 5px rgba(0,0,0,0.2)`) — the only elevation motion in an otherwise flat system

## Colors

### Primary Canvas
- **Background** (`{colors.background}`): Pure white reading surface — article pages and section fronts
- **Surface** (`{colors.surface}`): Light gray panel for newsletter sign-ups, sidebar modules, and tinted content blocks
- **Cosmic Dark** (`{colors.surface-dark}`): The deep navy (`#08003d`) that anchors full-bleed hero panels and dark-mode editorial features. Not a UI shade — a content atmosphere

### Ink
- **Primary Text** (`{colors.ink}`): Near-black `#1a1a1a` — a shade warmer than pure black, consistent with the slight warmth in Noe Display at weight 700
- **Secondary / Metadata** (`{colors.ink-secondary}`): `#6b6b6b` — bylines, timestamps, related-article labels, podcast episode numbers
- **Tertiary / Iconography** (`{colors.ink-tertiary}`): `#999999` — comments icon, bookmark button, utility UI chrome

### Brand Accent
- **Quanta Orange** (`{colors.primary}`): `#ff8600`. The publication's full visual identity lives in this one chromatic decision. Applied as: link underline color, play-button fill, input focus indicator, active nav tab, CTA button border and fill. Appears warm against the navy hero and energetic against white. Hover state dims to `{colors.primary-hover}` (`#d97200`)

### Borders & Structural
- **Border** (`{colors.border}`): `#999999` — used as left-border accent on list items and nav dividers
- **Border Soft** (`{colors.border-soft}`): `#cccccc` — input default border and subdued structural dividers
- **Divider** (`{colors.divider}`): `#4d4d4d` — dark-context section rules within navy panels

### Semantic & Focus
- **Focus Ring** (`{colors.focus-ring}`): Orange — consistent with the brand accent; focus state on inputs swaps the border to `{colors.primary}` with a `2px outline`
- **Error** (`{colors.error}`): `#ea4235` — error state on form elements; a saturated red distinct from the orange system

## Typography

### Font Family
- **Display / Editorial**: `Noe Display`, fallbacks: `Merriweather, Georgia, serif` — a high-contrast serif with tall ascenders and strong ink-trap contrast. Self-hosted (`noe-display-bold.woff2`). Not available on Google Fonts; closest approximation: Playfair Display at weight 700 or Libre Baskerville Bold
- **Body / Reading**: `Merriweather`, fallbacks: `Georgia, serif` — the workhorse reading serif. Self-hosted alongside Google Fonts canonical. Comfortable at 16–19px / 1.70 line-height for science article depth
- **UI / Navigation / Labels**: `Pangram`, fallbacks: `Avenir, Helvetica, sans-serif` — a geometric sans used for all non-editorial text: nav links, section labels, category overlines, button text. Self-hosted (`pangram-regular-webfont.woff2`, `pangram-bold-webfont.woff2`, `pangram-extrabold-webfont.woff2`, `pangram-medium-webfont.woff2`)

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Homepage hero article headline, section-front lead story — 45px Noe Display, weight 700 |
| `display` | Standard article card headlines in the feed — 40px Noe Display, weight 700 |
| `heading-section` | Section titles, pull headings within article layouts — 22px Pangram, weight 800 |
| `heading-sub` | Article dek / sub-headline, secondary card titles — 22px Noe Display, weight 700 |
| `body-large` | Article lede / opening paragraph — 19px Merriweather, weight 600, lh 1.70 |
| `body` | Standard reading column — 16px Merriweather, weight 400, lh 1.70 |
| `nav-link` | Navigation links, sidebar section names — 16px Pangram, weight 600 |
| `button-ui` | CTA buttons, form submit labels — 14px Pangram, weight 600 |
| `label-overline` | Category taxonomy labels (MATHEMATICS, PHYSICS) — 10px Pangram, weight 800, 3.5px spacing, uppercase |
| `caption` | Image captions, podcast metadata, article footnotes — 11px Pangram, weight 600 |

### Principles
- **Noe Display is the voice of discovery**: its high-contrast strokes and sharp serifs read as urgent at 40–45px, but stay legible at 18px. Never use it for body copy or UI
- **Merriweather earns its weight**: body text at weight 600 for the lede, dropping to weight 400 for the column — the shift signals the reading shift from "attention" to "immersion"
- **Pangram handles the infrastructure**: navigation, labels, buttons, and taxonomy. Its geometric neutrality makes Noe Display feel more expressive by contrast
- **Overlines are loud by design**: 10px at 3.5px letter-spacing and weight 800 punches above its size — the overline shouts the discipline before the headline earns attention
- **Orange underlines, not blue**: link underlines in `{colors.primary}` rather than the convention blue signal that Quanta's editorial voice extends to its interaction design

## Layout

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

Quanta's spacing is editorial-generous at the large end and UI-tight at the small end. Hero sections breathe at 64–96px; card grids pack at 32px card padding with 16–24px gutters. The most-used value across the codebase is 8px (for inline gaps and icon-text spacing) and 32px (card internal padding and section-header spacing).

### Grid & Container
- Max content width: approximately 1200px for homepage / section fronts
- Article reading column: ~720–760px — slightly wider than magazine convention, accounting for Merriweather's slightly condensed character width
- Homepage: editorial mosaic grid — a large hero span (full-width or ⅔) beside a vertical feed column
- Section fronts: 3-column card grid at desktop, collapsing to 2-column at 768px and single-column below 600px
- Hero panels: full viewport width, no container constraint — the illustration bleeds to the edge

### Whitespace Philosophy
- Hero panels have no internal padding at the edges — the illustration fills to frame
- Article cards use 24px padding internally with 32px vertical gap between siblings
- The reading column maintains ~80px side margin at desktop — narrower than expected for a wide viewport, keeping the line measure short enough for science-density text

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Standard article cards, nav bar, reading column |
| Subtle (Level 1) | `0px 5px 5px rgba(0,0,0,0.2)` | Card hover lift — the only motion-triggered shadow in the system |
| Vignette (Level 2) | `0px 0px 20px rgba(0,0,0,0.9)` | Media overlay on hero image hover — darkens photo to reveal text |
| Deep Depth (Level 3) | `{colors.surface-dark}` background panel | Cosmic hero — depth via tonal inversion, not shadow |
| Focus Ring | `2px solid {colors.primary}` outline, `0px` offset | Keyboard accessibility on inputs; orange rather than the generic blue |

**Shadow Philosophy**: Quanta is near-flat with one kinetic exception. Card hover triggers a single 5px drop shadow — brief and subtle, confirming the pointer is on content. Everywhere else, depth is achieved through the dark navy panels that serve as chapter breaks and feature heroes. The system trusts the illustration to carry visual weight rather than reaching for atmospheric blur or multi-layer shadow stacks.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, buttons, inputs, image containers — the dominant radius in the system |
| `sm` | 2px | Privacy consent UI (not brand-canonical) |
| `md` | 6px | Modal and dialog overlays |
| `pill` | 9999px | Circular icon badges; social share circles |

Quanta is architecturally sharp. Cards, CTA buttons, input fields, and image crops are all hard-edged. The design equates precision with geometry. The only soft edges in the canonical UI are dialog overlays (6px) and circular icon elements (50%). This binary approach — `{rounded.none}` for everything editorial, circle for UI badges — reads as scientific exactness rather than austerity.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — Orange fill, dark text, no radius. `{colors.primary}` background with matching 2px border. The standard CTA: "Subscribe," "Get the newsletter," "Watch." Sharp rectangle reads as print-media credibility
- **`button-primary-hover`** — Dims to `{colors.primary-hover}` on both fill and border — consistent deepening rather than color shift
- **`button-secondary`** — White fill, 2px `{colors.border-soft}` border, dark ink text. Used for secondary actions adjacent to primary CTAs
- **`button-secondary-hover`** — Inverts to ink fill with white text — a confident swap that mirrors the dark/light tonal system
- **`button-ghost-dark`** — White 2px border on transparent background. Used within dark (`{colors.surface-dark}`) hero panels where a filled button would break the cosmic atmosphere

### Cards

**Article Card** (`{components.card}`): white background, no shadow at rest, 24px padding. Contains: Pangram overline label, Noe Display headline, Merriweather dek, Pangram byline/timestamp. Hover: `0px 5px 5px rgba(0,0,0,0.2)` drop shadow.

**Dark Feature Card** (`{components.card-dark}`): `{colors.surface-dark}` background with 32px padding. White Noe Display headline, secondary text in `{colors.ink-tertiary}`. Used for featured series and long-form hero placements within a section grid.

### Inputs

`{components.input}`: transparent background, 2px `{colors.border-soft}` bottom-only or full border, `{rounded.none}`, Merriweather body type, 14–18px padding. Focus swaps border to `{colors.primary}` with a `2px solid` outline — the orange focus ring is the accent's most functional use. Fills to `{colors.border-soft}` on focus as a subtle readability cue.

### Badges / Tags

**Topic Label** (`{components.badge-topic}`): Pangram 10px / weight 800 / 3.5px letter-spacing / uppercase in `{colors.primary}`. No background, no border — pure typographic. These are the taxonomy anchors that identify discipline (MATHEMATICS, PHYSICS, COMPUTER SCIENCE) and precede every article headline.

**UI Badge** (`{components.badge}`): `{colors.surface}` tinted background, `{colors.ink-secondary}` text, Pangram label-overline scale, sharp corners.

### Navigation

Top navigation bar: white background at scroll-start, transitions to white with `box-shadow` on scroll-lock. Pangram 16px weight 600 links in `{colors.ink}`. Active section link gains `{colors.primary}` border-bottom or text color. Mobile: collapses to hamburger at 768px revealing a full-screen overlay with stacked Noe Display section names.

## Do's and Don'ts

### Do
- Use Noe Display for every editorial headline — its high-contrast strokes create the visual authority that makes science feel urgent
- Reserve `{colors.primary}` for interactive signals: link underlines, play buttons, input focus, active navigation, CTAs
- Set article category overlines in Pangram 10px / weight 800 / 3.5px letter-spacing / uppercase — this is the site's primary navigation within a reading context
- Use `{colors.surface-dark}` panels for feature-level editorial moments — hero sections that introduce long-form investigations or special series
- Apply the orange underline link pattern (`text-decoration: underline {colors.primary}`) for body links, and remove it on hover
- Keep all cards and buttons at `{rounded.none}` — sharpness is precision, and precision is on-brand
- Pair Noe Display and Merriweather in article layouts: Noe for the hed/dek, Merriweather for the column
- Let scientific illustrations carry chromatic richness — the UI stays near-monochromatic so artwork pops
- Use Merriweather weight 600 for the lede paragraph and weight 400 for the reading column — the weight shift marks the reading shift

### Don't
- Don't use Noe Display for body text, UI labels, or navigation — it loses legibility below 18px and the face's authority is diluted by overuse
- Don't introduce additional accent colors — one orange, one navy, one near-black. Extra hues fight the illustration
- Don't apply border-radius to editorial elements — cards with rounded corners read as product UI, not editorial magazine
- Don't use the orange `{colors.primary}` as a background fill except on CTA buttons — large orange panels clash with the illustration-first system
- Don't use generic blue for focus rings or link text — `{colors.focus-ring}` is orange; blue contradicts the brand's chromatic commitment
- Don't soften the dark hero panels with gradients to white — the hard transition from white to `{colors.surface-dark}` is the compositional statement
- Don't substitute stock photography for the signature scientific illustration — the bespoke vector art is load-bearing for the brand's authority signal
- Don't use Merriweather below 13px — the face was designed for comfortable reading, not micro-labels; use Pangram at small sizes

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <352px | Single column, headline 28px Noe Display, body 15px |
| Mobile | 352–599px | Single column, hero image constrained, nav collapses to hamburger |
| Mobile Large | 600–767px | Single column, card grid begins showing as 1.5-column peek |
| Tablet | 768–1023px | 2-column card grid, hero panel maintained at full bleed, nav reveals section labels |
| Desktop | 1024px+ | 3-column feed grid, full editorial mosaic layout, hover states active |

### Touch Targets
- CTA buttons: minimum 44px tap height, full-width on mobile below 480px
- Nav links: 44px minimum row height in mobile drawer overlay
- Article card: full row tappable with no nested interactive regions at mobile widths
- Play button circles: 48px minimum diameter

### Collapsing Strategy
- **Hero**: Full-bleed illustration stays full-bleed at all widths; headline drops from 45px → 28px; padding compresses 96px → 32px
- **Navigation**: Horizontal section nav collapses to hamburger at 768px; mobile overlay reveals Noe Display section names stacked vertically
- **Card Grid**: 3-column → 2-column at 768px → single column below 600px; card shadows remain on touch devices
- **Article Column**: Reading column caps at 760px on desktop; fills viewport minus margins on mobile
- **Orange Underlines**: Link underline decoration persists on touch (no hover to remove it); this is correct behavior for touch — the underline serves as the visual affordance

### Image Behavior
- Scientific illustrations: always full-bleed within their container, never cropped by the grid system
- Article thumbnail photos: 16:9 or 3:2 crop, full-width within card, no border-radius applied
- Hero illustrations: viewport-width, may exceed standard container for cinematic impact
- Image captions in Pangram 11px weight 600, `{colors.ink-secondary}`

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Secondary text (bylines, metadata): `{colors.ink-secondary}`
- Brand accent (links, CTAs, focus): `{colors.primary}`
- Accent hover: `{colors.primary-hover}`
- Dark hero background: `{colors.surface-dark}`
- Border / input default: `{colors.border-soft}`
- Surface tint (panels): `{colors.surface}`

### Example Component Prompts

- "Create a Quanta Magazine article card on `{colors.background}`. Overline: Pangram 10px weight 800 letter-spacing 3.5px uppercase in `{colors.primary}` — e.g. 'MATHEMATICS'. Headline: Noe Display 40px weight 700 line-height 1.15 in `{colors.ink}`. Dek: Merriweather 16px weight 400 line-height 1.70 in `{colors.ink-secondary}`. Byline: Pangram 13px weight 500 in `{colors.ink-secondary}`. No shadow at rest; on hover add `box-shadow: 0px 5px 5px rgba(0,0,0,0.2)`. Sharp corners (`{rounded.none}`), 24px internal padding."

- "Build a Quanta-style cosmic hero panel: `{colors.surface-dark}` (`#08003d`) full-bleed background with a scientific vector illustration bleeding to all edges. Headline in Noe Display 45px weight 700 line-height 1.05 in white. Dek in Merriweather 19px weight 600 line-height 1.70 in white at 80% opacity. CTA button: transparent background, 2px white border, Pangram 14px weight 600 white text, sharp corners, 12px 24px padding. On hover: fill white, text `{colors.ink}`."

- "Design a Quanta subscription CTA block on `{colors.surface}` (`#f5f5f5`). Overline: Pangram 10px weight 800 3.5px letter-spacing uppercase in `{colors.primary}`. Headline: Noe Display 28px weight 700 in `{colors.ink}`. Body: Merriweather 16px weight 400 line-height 1.70 in `{colors.ink-secondary}`. Email input: transparent bg, 2px `{colors.border-soft}` border, sharp corners (`{rounded.none}`), Merriweather 16px, 14px 19px padding. On focus: border swaps to 2px `{colors.primary}`, fill `{colors.border-soft}`. Adjacent submit button: `{colors.primary}` fill, dark text, Pangram 14px weight 600, sharp, 12px 24px padding."

- "Create a Quanta navigation bar: white background, `box-shadow: 0px 2px 5px rgba(0,0,0,0.2)` on scroll-lock. Logo left-aligned in Noe Display or as SVG. Horizontal nav links in Pangram 16px weight 600 `{colors.ink}` with 24px gaps. Active section: `{colors.primary}` 2px border-bottom. 'Subscribe' CTA in top-right: `{colors.primary}` fill, sharp rectangle, Pangram 14px weight 600 dark text, 10px 20px padding."

- "Build a Quanta article body layout: 760px max-width centered column on `{colors.background}`. Topic overline in Pangram 10px weight 800 3.5px letter-spacing uppercase `{colors.primary}`. Headline Noe Display 40px weight 700 lh 1.15. Sub-headline / dek Merriweather 19px weight 600 lh 1.70. Byline Pangram 13px weight 500 `{colors.ink-secondary}`. Body: Merriweather 16px weight 400 lh 1.70 in `{colors.ink}`. Inline links: `{colors.ink}` color with `text-decoration: underline {colors.primary}`; hover removes underline. Pull-quote: Noe Display 22px weight 700 lh 1.40, left-border 3px `{colors.primary}`, 16px padding-left."

### Iteration Guide

1. Start with the canvas: `{colors.background}` for article pages, `{colors.surface-dark}` for hero panels and dark features — choose one and commit per section
2. Place the overline first: Pangram 10px / weight 800 / uppercase / letter-spacing 3.5px in `{colors.primary}` anchors every editorial content block
3. Let Noe Display set the scale: use 45px for hero, 40px for standard display, 22px for section headings — never stretch below 18px
4. Constrain orange to signals only: links, inputs on focus, CTAs, active nav state — if orange appears on a non-interactive element, reconsider
5. Body type needs breathing room: Merriweather 16px / lh 1.70 / weight 400 — don't tighten the line-height for science-depth copy
6. Keep all radii at `{rounded.none}` unless the element is circular — never introduce 4–12px corner radius in editorial layouts
7. Illustration carries the atmosphere: don't compensate for missing artwork with color fills or gradients — leave space and let the editorial art team fill it

---

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