---
version: alpha
name: "Atlas Obscura"
description: "Adventure-editorial design system for a hidden-wonders travel publication — warm parchment canvas, deep teal brand presence, and a proprietary serif-display pair that turns every story into a field note."

colors:
  # Canvas
  background: "#f5f2ee"          # warm parchment — the page's defining character; dembrandt palette[0] #e7e5e4 warmed
  surface: "#ffffff"             # card and panel white, inset within the parchment canvas
  surface-dark: "#1c3a35"        # deep forest teal — inverted hero panels and footer; estimated from teal banner

  # Text / ink
  ink: "#292624"                 # warm near-black — dembrandt palette[2] #292624; body text, headlines
  ink-secondary: "#78726c"       # warm mid-gray — dembrandt palette[3]; bylines, metadata, captions
  on-background: "#292624"
  on-surface: "#292624"
  on-primary: "#ffffff"          # white text on teal CTAs and dark panels

  # Brand accent
  primary: "#1c3a35"             # deep forest teal — the Atlas Obscura signature; estimated from banner screenshot
  primary-hover: "#2a5248"       # lightened teal on hover; estimated
  primary-container: "#e0ede9"   # tinted teal wash for badges and category pills; estimated

  # Warm accent
  accent-warm: "#a16a3a"         # earthy amber — dembrandt semantic.primary; link hover, "Join" and "Sign In" hover color
  accent-warm-dark: "#895a31"    # deepened amber on hover; dembrandt hover value

  # CSS variable
  primary-color: "#ad8f68"       # --primary-color from CSS; warm tan used on interactive underlines and links

  # States
  text-hover: "#a16a3a"          # dembrandt interactiveDeltas color.to for links; was rgb(161,106,58)
  focus-ring: "#1c3a35"          # teal focus ring — brand consistent
  focus-tint: "#e0ede9"          # light teal wash behind focused inputs; estimated

  # Borders
  border: "#d9d5cf"              # warm gray — was rgba(0,0,0,0.11) estimated /* estimated */
  border-soft: "#e8e4de"         # hairline between cards and feed items; estimated

  # Shadows
  shadow-soft: "#c7c5c7"         # dembrandt shadow rgb(199,197,199); card drop shadow tint

  # Semantic
  error: "#d93b3b"               # /* estimated */

typography:
  display-hero:
    fontFamily: "atlasobscura, Georgia, 'Times New Roman', Times, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.5px
    fontFeature: '"kern", "liga"'
  display:
    fontFamily: "atlasobscura, Georgia, 'Times New Roman', Times, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
    fontFeature: '"kern", "liga"'
  heading-section:
    fontFamily: "'Platform Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 42px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.5px
    fontFeature: '"kern", "liga"'
  heading-sub:
    fontFamily: "'Platform Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.84px
    fontFeature: '"kern", "liga"'
  body-large:
    fontFamily: "'Platform Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body:
    fontFamily: "'Platform Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  nav-link:
    fontFamily: "'Platform Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.6px
  button-ui:
    fontFamily: "'Platform Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1.8px
  caption:
    fontFamily: "'Platform Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label-category:
    fontFamily: "'Platform Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1.5px

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

rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.border-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  card-featured:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  badge-category:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-category}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-place-of-day:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-category}"
    rounded: "{rounded.none}"
    padding: 4px 12px
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 12px 24px
  nav-link-hover:
    textColor: "{colors.accent-warm}"
    typography: "{typography.nav-link}"
    padding: 12px 24px
---

# Atlas Obscura Design System

## Overview

Atlas Obscura's visual identity feels like the inside cover of a weathered travel journal. The canvas is not white but warm parchment (`{colors.background}`) — a deliberate departure from the clinical brightness of most editorial sites. Against that field, the deep forest teal (`{colors.primary}`) functions less like a brand color and more like ink pressed into aged paper: serious, earthy, and inseparable from a sense of geographic mystery. The combination conjures the aesthetics of cartographic societies and natural-history museums more than it does tech-media outlets, and that friction is entirely intentional. Atlas Obscura covers the world's hidden wonders, and the design insists that discovery should feel tactile.

The typography system marries two contrasting voices. The proprietary `atlasobscura` serif — a warm, slightly condensed face with old-world ligature behavior — handles all display and article-headline work. It reads like the byline of an explorer's field note. Beneath it, Platform Web (a geometric sans-serif with modern tracking) manages hierarchy in UI contexts: navigation, section labels, button copy, and category badges. The contrast between these two is Atlas Obscura's typographic signature: at 45px the serif headlines breathe and curve; at 14px the sans-serif labels snap to attention with wide letter-spacing (up to 1.8px on buttons). Neither face encroaches on the other's domain.

Photography is the primary narrative device. Full-bleed images introduce destinations, stories, and place-of-the-day features with cinematic authority. The dark panel variant (`{colors.surface-dark}`) appears beneath and around these images — the teal pulls the warmth of the canvas tone into a richer, deeper register rather than inverting to a neutral black. Warm amber (`{colors.accent-warm}`) surfaces on hover states for links, echoing the copper-and-leather quality of antique maps and signaling interactivity without disrupting the editorial calm.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) instead of white — the editorial equivalent of aged paper stock
- Proprietary `atlasobscura` serif for all display headlines; Platform Web geometric sans for UI chrome and labels
- Deep forest teal (`{colors.primary}`) as the singular brand anchor — CTAs, banners, the logo, focus states
- Earthy amber (`{colors.accent-warm}`) reserved for link hover and interactive state feedback only
- Full-bleed photography as the primary spatial element; images break container boundaries in feature contexts
- "Place of the Day" badge in solid teal with square corners (`{rounded.none}`) — the most urgent editorial stamp
- Minimal border-radius: `{rounded.sm}` (2px) on micro-elements, `{rounded.md}` (4px) on buttons, `{rounded.pill}` on search inputs and category tags
- Wide letter-spacing on UI labels and button text (up to 1.8px) — a cartographic-label convention carried into interactive UI
- Warm-gray secondary ink (`{colors.ink-secondary}`) for metadata, bylines, and secondary copy
- Soft parchment card chrome — article tiles sit on `{colors.surface}` white against the off-white background, creating a subtle lift without shadows

## Colors

### Primary
- **Warm Parchment** (`{colors.background}`): The editorial canvas. Off-white with warm undertones, giving the overall page a handcrafted, analog quality — nothing clinical or digital about it.
- **Near-Black Ink** (`{colors.ink}`): A warm dark brown-black for all headlines and body text. Avoids the harshness of pure `#000000`; feels printed rather than displayed.
- **Panel White** (`{colors.surface}`): Pure white for cards, article tiles, and inset panels. Creates a subtle tier above the parchment background.

### Brand Accent
- **Deep Forest Teal** (`{colors.primary}`): The Atlas Obscura signature. Applied to the masthead banner, primary CTAs (Join, Newsletter), the logo wordmark, and focus states. Not a trendy digital accent — it reads like verdigris on old brass.
- **Teal Hover** (`{colors.primary-hover}`): A lighter teal step used when the primary button surface is hovered. Lightens rather than darkens, keeping the interaction warm.
- **Teal Wash** (`{colors.primary-container}`): A diluted teal surface for category pills and badge backgrounds. Holds the brand hue without overpowering editorial content.

### Warm Accent
- **Earthy Amber** (`{colors.accent-warm}`): Applied exclusively to link hover states and interactive delta transitions (Sign In, Join). The color bridges the warm-parchment canvas and the cool teal brand, acting as a thermal transition between the two.

### Secondary Text
- **Warm Mid-Gray** (`{colors.ink-secondary}`): Bylines, timestamps, location credits, caption text. Warm enough to stay on-palette but subordinate to the near-black editorial ink.

### Borders & Dividers
- **Hairline Warm** (`{colors.border-soft}`): Feed-item separators and card edges. The warmth of the off-white canvas bleeds into the dividers.
- **Warm Gray** (`{colors.border}`): Input chrome, panel outlines, and heavier dividers.

## Typography

### Font Family
- **Display**: `atlasobscura` (proprietary), fallbacks: `Georgia, 'Times New Roman', Times, serif` — a purpose-made serif with warm curves, modest contrast, and old-world ligature settings (`"kern", "liga"`). Used for all story headlines and the wordmark.
- **UI / Body**: `Platform Web` (proprietary geometric sans), fallbacks: `ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` — a clean, slightly wide-tracked sans for navigation, labels, body text, buttons, and UI chrome.
- **OpenType Features**: `"kern", "liga"` enabled on the atlasobscura serif; standard kerning on Platform Web. The ligature setting matters — the serif's `fi`, `fl`, and `ff` combinations visibly tie together at display sizes.

*Note: `atlasobscura` and `Platform Web` are proprietary. For external implementations, Lora or Playfair Display approximate the display serif's warmth; Inter or DM Sans substitute cleanly for Platform Web.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 48px story headline over full-bleed photography; Place of the Day feature |
| `display` | 36px section lead headlines and featured article titles |
| `heading-section` | 42px Platform Web 600 — homepage section titles ("PLACE OF THE DAY") |
| `heading-sub` | 28px Platform Web 600 with 0.84px tracking — article feed headlines |
| `body-large` | 24px Platform Web for article decks and lead paragraphs |
| `body` | 18px Platform Web for standard reading body copy |
| `nav-link` | 14px Platform Web 600 with 0.6px tracking — top navigation items |
| `button-ui` | 14px Platform Web 600 with 1.8px tracking — CTAs, "Join", "Start Your Map" |
| `caption` | 13px Platform Web 400 — photo credits, author names, location subtitles |
| `label-category` | 11px Platform Web 600 with 1.5px tracking — category and tag pills |

### Principles
- **Serif for story, sans for structure.** The `atlasobscura` face touches only display-scale editorial content — headlines and the logotype. Platform Web runs everything else. The boundary is never blurred.
- **Wide tracking on UI labels is the cartographic tell.** Button copy at 1.8px tracking, nav links at 0.6px, category labels at 1.5px — the convention comes from map annotation and engraved signage.
- **Weight is used at two poles.** Platform Web appears at 400 for body and 600 for every UI and heading context — no intermediate weights. The atlasobscura serif stays at 400 always; its character lives in the letterform, not the weight.
- **Generous line-height in body.** At 1.55 for 18px body, the reading rhythm is unhurried — befitting a brand whose editorial stance is "slow down and look carefully."

## Layout

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

The system uses generous vertical spacing between editorial zones: 48–64px between page sections, 24–32px between article cards in feed grids, and 8–16px within a card's internal type stack. The parchment canvas means that negative space itself carries warmth — empty areas feel like breathing room on a field-notes page rather than digital emptiness.

### Grid & Container
- Max content width: ~1280px on large desktop
- Article reading column: ~680–720px max — comfortable measure for long-form storytelling
- Homepage: 12-column grid resolving into 3-column article feed with an editorial hero column
- Place of the Day: asymmetric layout — large image right, editorial stack left, spanning ~60/40 split
- Full-bleed: photography heroes break container to full viewport width on feature stories

### Whitespace Philosophy
- **Parchment space is active.** The warm canvas means that unoccupied areas register as paper, not absence. Wide margins feel intentional rather than empty.
- **Article cards breathe.** 16–24px between card tiles; no cramped grid layouts — each destination gets room to exist before the next one crowds it.
- **Section intros push down.** 48–64px before major section headings establishes editorial chapter breaks, like turning a page.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Editorial canvas, feed background, article body |
| Card Lift (Level 1) | `{colors.surface}` on `{colors.background}` | Article cards create depth by tonal contrast alone — white on parchment |
| Soft Shadow (Level 2) | `0px 2px 10px -3px {colors.shadow-soft}` | Featured cards and hover states — dembrandt detected value |
| Modal (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.3)` | Dialogs, preference centers, overlays; was rgba — Google format requires hex approximation |
| Dark Panel (Level 4) | `{colors.surface-dark}` fill | Cinematic teal-dark hero for Place of the Day and footer |
| Focus Ring | `2px solid {colors.focus-ring}` outline | Keyboard navigation on all interactive elements |

**Shadow Philosophy**: Atlas Obscura uses shadow sparingly. The primary depth mechanism is tonal contrast — parchment background against white card surfaces — which produces an analog feel closer to cards laid on a table than to floating UI panels. When shadows do appear (Level 2), they are warm-neutral rather than pure-black, keeping the page tone consistent. The teal dark panel (`{colors.surface-dark}`) is the boldest depth statement: a plunge into the brand color that frames the most important daily content.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Place of the Day badge, editorial category labels in banner contexts, all image containers |
| `sm` | 2px | Micro UI elements — toggles, close buttons, small interactive chips |
| `md` | 4px | Buttons (primary, secondary, ghost) — a slight softening that keeps them approachable |
| `lg` | 8px | Alert dialogs, modal containers; detected at low confidence from dembrandt |
| `pill` | 9999px | Search input, category tag pills — the search bar's pill shape is Atlas Obscura's most distinctive interactive motif |

The system is mixed rather than dogmatic: the search input and category pills are fully rounded (pill), while article containers and editorial badges remain square. This contrast maps to a sensible semantic rule — content containers are rectilinear and editorial; interactive controls are softened and approachable.

## Components

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

### Button Variants

- **`button-primary`** — Deep teal background, white Platform Web 600 label with 1.8px tracking. Used for "Join", "Start Your Map", newsletter CTAs. The teal grounds these buttons in the brand before the label is read.
- **`button-primary-hover`** — Lighter teal step on hover; shape and tracking unchanged.
- **`button-secondary`** — White surface, teal text. Lower-priority conversions and "View More" contexts.
- **`button-ghost`** — Parchment background, near-black text. Tertiary actions and inline article links.

### Cards

- **`card`** — White surface on parchment canvas. No border-radius on the outer container. Article image top-aligned, category pill below, headline in display or heading-sub, caption-size byline and date. Separation by spacing rather than shadow.
- **`card-featured`** — Same structure, wider padding (24px), larger headline size (`{typography.display}`), used for Place of the Day and lead story slots.

### Inputs

- **`input`** — Pill-shaped search input — the most distinctive UI form. White background, Platform Web body type, no visible border in resting state. The rounded form signals that this is an interactive discovery tool, not a form field.
- **`input-focus`** — Teal border on focus, shape unchanged. The brand color names the focused state without any other decoration.

### Badges

- **`badge-category`** — Teal-washed background, teal text, pill radius, Platform Web 11px with 1.5px tracking. Category taxonomy labels: "Places", "Foods", "Stories".
- **`badge-place-of-day`** — Solid teal, white text, square corners. The editorial stamp that identifies today's featured destination — urgency signaled by the hard corners and full brand color.

### Navigation

The nav bar sits on a white `{colors.surface}` strip: the Atlas Obscura logotype left-aligned, main section links (PLACES, FOODS, STORIES, NEWSLETTERS) center-right in Platform Web 600 with tracking, and profile/search icons right-aligned. Below the standard nav, the full-width teal banner carries promotional content. On mobile the main links collapse to a hamburger drawer; the teal banner persists as the most prominent above-fold element.

## Do's and Don'ts

### Do
- Use the parchment canvas (`{colors.background}`) as the base layer — never swap it for pure white on editorial layouts
- Set all story headlines and display text in `atlasobscura` serif at weight 400 — the face does the atmospheric work
- Reserve `{colors.primary}` teal for the logo, primary CTAs, the Place of the Day badge, and focus rings
- Apply wide letter-spacing (1.5–1.8px) to all uppercase category labels and button copy — the cartographic-label convention is structural
- Use `{rounded.pill}` for the search input and category tag pills; keep all image containers and article tiles at `{rounded.none}`
- Let photography be full-bleed on feature contexts — the image should press against or break the grid, not be boxed
- Use `{colors.accent-warm}` only for link hover color transitions — it should appear as a response to interaction, not as a static design element
- Pair the teal dark panel (`{colors.surface-dark}`) with white `{colors.on-primary}` serif headlines for hero moments

### Don't
- Don't use a pure white (`#ffffff`) canvas for editorial pages — the parchment tone is Atlas Obscura's most immediately recognizable characteristic
- Don't set UI chrome, navigation, or button labels in the `atlasobscura` serif — Platform Web handles all interactive and UI contexts
- Don't apply the earthy amber (`{colors.accent-warm}`) as a static color on buttons or surface fills — it is a hover-state color only
- Don't introduce mid-range border-radius (8–16px) on article cards or image wrappers — the card system is rectilinear; only the search pill and category tags are rounded
- Don't use tracking below 0.5px on any uppercase label — the wide-tracked label convention is non-negotiable
- Don't introduce a second brand color — the teal + amber + parchment palette is complete; additional hues break the cartographic restraint
- Don't use `box-shadow` on article cards in static state — depth comes from the white surface on the parchment canvas
- Don't reduce the `atlasobscura` serif below 28px — its warmth and ligature behavior are legible at display scale only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column, wordmark scales, hero headline drops to 28px serif, navigation collapses fully |
| Mobile | 400–599px | Single column, Place of Day stacks vertically, teal banner goes single-line |
| Tablet | 600–895px | 2-column article grid, nav links visible or partially visible, hero shrinks to ~50vh |
| Desktop | 896–1279px | 3-column feed grid, full navigation visible, Place of Day asymmetric layout active |
| Large Desktop | ≥1280px | Max container ~1280px with expanding side margins; full editorial hierarchy |

### Touch Targets
- Primary CTA buttons (Join, Start Your Map): minimum 44px tap height
- Navigation links: 44px row height in mobile drawer
- Search input: pill shape, minimum 40px height, full-width on mobile
- Category pill tags: 32px minimum height with adequate horizontal padding

### Collapsing Strategy
- **Masthead**: Logo stays left at all widths; navigation links collapse to hamburger below 640px; teal banner persists across all breakpoints
- **Place of the Day**: Asymmetric 60/40 split on desktop; image stacks above editorial copy on mobile
- **Article Feed**: 3-column → 2-column → single column; card structure (image + pill + headline + byline) maintained at every width
- **Reading Column**: Capped at ~720px on desktop; expands to full width on mobile with 16–24px horizontal padding

### Image Behavior
- Feature photography is full-bleed at every breakpoint — the container expands with viewport, not constrained by the content grid
- Article card images use fixed aspect ratios (16:9 for features, 3:2 for standard tiles) maintained via CSS aspect-ratio
- Lazy loading below fold; no loading placeholder color detected (images appear to fade in)

---

## Agent Prompt Guide

### Quick Color Reference
- Background (parchment): `{colors.background}`
- Primary text: `{colors.ink}`
- Secondary text / metadata: `{colors.ink-secondary}`
- Brand teal: `{colors.primary}`
- Warm amber (link hover only): `{colors.accent-warm}`
- Card surface: `{colors.surface}`
- Dark hero panel: `{colors.surface-dark}`
- Category pill background: `{colors.primary-container}`
- Hairline divider: `{colors.border-soft}`

### Example Component Prompts

- "Build an Atlas Obscura article feed card on `{colors.background}`. Use a `{colors.surface}` card with no border-radius on the outer container. Top: full-width 16:9 image with square corners. Below: a `{colors.primary-container}` pill badge in Platform Web 11px weight 600 with 1.5px tracking in `{colors.primary}` — category label like 'PLACES'. Below that: the article headline in `atlasobscura` serif 36px weight 400 `{colors.ink}` line-height 1.1. Then a 2-line body excerpt in Platform Web 18px `{colors.ink}` line-height 1.55. Bottom: byline and date in Platform Web 13px `{colors.ink-secondary}`. 16px internal padding on the text zone; 24px gap to the next card."

- "Create an Atlas Obscura Place of the Day hero. Left column (~55% width): parchment background (`{colors.background}`), a solid teal badge 'PLACE OF THE DAY' in Platform Web 11px 600 at 1.5px tracking with `{rounded.none}` corners and `{colors.primary}` fill + `{colors.on-primary}` text, then a `atlasobscura` serif headline 48px weight 400 `{colors.ink}` line-height 1.08, then a 24px Platform Web excerpt in `{colors.ink}`. Right column (~45% width): full-height photography with square corners."

- "Design an Atlas Obscura navigation bar on `{colors.surface}`. Left: the Atlas Obscura wordmark in `atlasobscura` serif. Center: links PLACES, FOODS, STORIES, NEWSLETTERS in Platform Web 14px weight 600 letter-spacing 0.6px `{colors.ink}` — on hover, color transitions to `{colors.accent-warm}` (0.3s linear transition). Right: profile icon + search icon in `{colors.ink}`. Below the nav: full-width teal banner `{colors.primary}` with `{colors.on-primary}` text and a pill-shaped white CTA button."

- "Build an Atlas Obscura search input. Pill-shaped (`{rounded.pill}`), `{colors.surface}` background, `{colors.border}` 1px border, 10px 20px padding. Platform Web 18px `{colors.ink}` for input text. On focus: border becomes 2px `{colors.focus-ring}` teal. Pair with a small search icon in `{colors.ink-secondary}` inside the pill on the right. On mobile: full-width with 16px margin."

- "Create an Atlas Obscura newsletter signup section on `{colors.surface-dark}`. White `atlasobscura` serif headline 36px: 'Explore the World's Hidden Wonders'. Below: Platform Web 18px `{colors.on-primary}` body copy. Then a pill input: `{colors.surface}` background, Platform Web 18px body, 10px 20px padding. Adjacent: primary button `{colors.on-primary}` background with `{colors.primary}` text 'Subscribe', Platform Web 14px 600 1.8px tracking, `{rounded.md}` radius."

### Iteration Guide

1. Start with the parchment canvas (`{colors.background}`) — the warm off-white is the atmosphere; pure white anywhere in the editorial layer breaks the field-note quality
2. Typography split is non-negotiable: `atlasobscura` serif for all headlines above 28px, Platform Web for everything else
3. Teal (`{colors.primary}`) appears on the logo, the banner, primary CTAs, and the Place of the Day badge — treat it as the ink on a wax seal, not wallpaper
4. Wide tracking on UI labels (1.5–1.8px) is the cartographic-label convention that ties navigation, buttons, and category pills together — never omit it
5. Card depth comes from white-on-parchment contrast, not shadows — only add shadow on hover or in featured slots
6. Search and category pills use `{rounded.pill}`; all image containers and article tiles stay at `{rounded.none}` — never mix the two in the same component
7. Link hover color is always amber (`{colors.accent-warm}`) — the warm transition from teal to amber mirrors the site's geography: cool forests → warm desert rock

---

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