# Atlas Obscura · Design system migration spec

> Source: https://www.atlasobscura.com  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of modern editorial design that balances classic typography with clean digital interfaces.

## 1. Identity DNA

Atlas Obscura's design system is a digital analogue of a vintage explorer's journal, where every element serves the act of discovery. It pairs the authoritative weight of classic editorial print with the clean functionality of modern digital interfaces, creating a platform that feels both timeless and immediately usable.

**One-liner:** A beautifully curated editorial guide to the world's most extraordinary hidden places.
**Keywords:** curation · travel · hidden wonders · atlas · discovery
**Analogy:** A vintage explorer's journal meets modern digital discovery

## 2. Color

The palette is built on a stark, high-contrast foundation of black ink on white paper, a direct translation of the printed page to the screen. A single, vibrant red accent provides a precise tool for emphasis and brand recognition, applied with restraint.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f7f7f7` | card background |
| `--bg-quiet` | `#f1f1f1` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#383434` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--accent` | `#E21F26` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High contrast black-on-white editorial base with a single vibrant red accent for brand recognition and emphasis

The principle is disciplined contrast: a dominant neutral canvas with one strategic punctuation of color.

## 3. Typography

The typographic voice is deliberately split: a transitional serif for headlines carries the evocative, classic authority of a travelogue, while Open Sans provides a humanist, highly readable sans-serif for body text and interface elements. This duality mirrors the system's core tension between archival curation and digital utility.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 700 | -1px | Main hero headline |
| subtitle | 14px | 1.4 | 700 | 2px | Kicker text above headline |
| body | 16px | 1.5 | 400 | 0px | General paragraph and description text |
| caption | 14px | 1.4 | 400 | 0px | Form labels and smaller supporting text |

**Type rules:**
- Headlines use a serif typeface for a classic editorial feel
- Body text and UI elements use Open Sans for readability
- Kicker text uses uppercase letters with tracking for emphasis

## 4. Spacing

A standard 4px base grid establishes a predictable spatial rhythm, with generous whitespace in editorial sections allowing content to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with generous whitespace in editorial sections

## 5. Surfaces

Depth is communicated through minimal, precise means. Shadows are subtle and functional, while borders are fine and consistent, used to define interactive containers without visual noise.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.24) 0px 0px 5px 0px
- **Borders:** 1px solid rgba(0,0,0,0.1) for cards and inputs

## 6. Layout

The skeleton is a clean, centered editorial column. A full-width navigation bar gives way to a prominent hero section designed for search and discovery, establishing a clear hierarchy from the first moment.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Clean top navigation bar followed by a full-width centered hero section with search functionality

## 7. Motion & Interaction

Motion is strictly functional, designed to guide attention and confirm interaction without distraction. All transitions are smooth and measured, reinforcing the system's composed, deliberate character.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions for hover states
  - Smooth scrolling for page navigation

- **Hover:** Subtle color transitions on interactive elements
- **Click:** Immediate response with visual feedback
- **Transition:** all 0.7s for smooth page transitions
- **Keyboard:** Standard focus management for search and navigation

## 8. Voice & Don'ts

The editorial voice is authoritative yet inviting, matching the grandeur of the serif headlines with clear, action-oriented calls to action. The tone is one of knowledgeable curiosity, avoiding cliché in favor of specificity.

- **Tone:** Authoritative yet inviting and curious
- **Headline style:** Grand, evocative serif headlines that spark curiosity
- **CTA style:** Clear, action-oriented buttons with descriptive labels
- **Avoid:** Overly casual language / Excessive exclamation marks / Generic travel clichés

### Don'ts
- ❌ don't use dark mode or dark backgrounds — screenshot shows a predominantly white (#ffffff) background
- ❌ don't use playful rounded corners on containers — screenshot shows sharp rectangular edges on the hero section
- ❌ don't use multiple competing accent colors — screenshot shows a single dominant red (#E21F26) accent
- ❌ don't use thin, light sans-serif fonts for headlines — screenshot shows bold, weighted serif typography for the main title
- ❌ don't clutter the interface with excessive shadows — screenshot shows a very clean, flat design with minimal drop shadows
- ❌ don't use small, cramped text — screenshot shows generous line-height and padding for comfortable reading

The system deliberately rejects dark mode, playful ornamentation, and competing accent colors to maintain its focused, print-heritage clarity.

## System Prompt (paste into AI tool)

```
This is a premium editorial travel and curation platform focused on discovering hidden wonders. The visual identity relies on a stark black-and-white base (#000000 ink on #ffffff background) with a single vibrant red accent (#E21F26) for brand marks and emphasis. Typography combines classic transitional-serif for headlines with humanist-sans (Open Sans) for body text. The layout is a clean, full-width editorial grid with generous whitespace. Key features include rounded pill-shaped inputs, sharp-edged containers, and bold uppercase kicker text. Don't use dark mode, don't add unnecessary shadows or borders, and don't clutter the interface with multiple accent colors.
```