# Aeon · Design system migration spec

> Source: https://aeon.co  ·  Curated by OpenDesign  ·  en

> Aeon is an excellent reference for premium digital publishing, demonstrating how to balance high-end serif typography with a modern, clean grid layout.

## 1. Identity DNA

Aeon operates as a prestigious academic journal reborn as a modern digital publication. Its identity is built on the tension between classic editorial authority and the fluid accessibility of digital longform, a system designed not for browsing, but for deep reading.

**One-liner:** A premium digital publication for longform essays on ideas, science, and culture.
**Keywords:** longform · ideas · essays · philosophy · science
**Analogy:** A prestigious academic journal reborn as a modern digital publication.

## 2. Color

The color system is defined by a stark, high-contrast foundation of black on white, ensuring maximal legibility for extended text. A muted teal accent is reserved exclusively for brand identity, functioning as a quiet signature rather than a decorative element.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--muted-soft` | `#CCCCCC` | weak hint |
| `--accent` | `#0C776D` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Clean, high-contrast black on white with a subtle teal accent.

Color is used with institutional restraint, prioritizing content clarity over decorative variation.

## 3. Typography

Typography establishes a clear hierarchy through deliberate category contrast: a didone-serif for authoritative headlines and a humanist-sans for body text. Monospace is employed for functional labels, creating a distinct typographic voice for navigation that does not compete with the editorial content.

- **Display:** didone-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Feature article titles |
| h1 | 42px | 1.1 | 700 | 0 | Main headings |
| h2 | 28px | 1.2 | 700 | 0 | Subheadings |
| body | 16px | 1.4 | 400 | 0 | Body text and paragraphs |
| caption | 13.5px | 1.4 | 400 | 0.35px | Captions and labels |

**Type rules:**
- Navigation and labels use monospace font
- Article titles use didone-serif font
- Body and sans-serif elements use humanist-sans font

## 4. Spacing

A standard 4px grid underpins all spacing, creating a consistent vertical rhythm and measured padding that gives content room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with consistent padding and gaps.

## 5. Surfaces

Surfaces are rendered with extreme minimalism. Depth is suggested only through subtle, standardized shadows, while thin, low-opacity borders define separation without creating visual weight.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0px 4px 6px -4px rgba(0,0,0,0.1)
  - 0px 10px 15px -3px rgba(0,0,0,0.1)
- **Borders:** Thin 1px borders using rgba(0,0,0,0.1)

## 6. Layout

The layout skeleton is a traditional magazine structure adapted for the screen. It pairs full-width cinematic hero images with a clean, multi-column grid for article cards, creating a clear visual path from feature to catalogue.

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

**Skeleton:** Multi-column grid for article cards with full-width hero images.

## 7. Motion & Interaction

Motion is treated as a functional enhancement rather than a decorative layer. All transitions are smooth, predictable, and executed with a consistent cubic-bezier curve, focused on guiding attention through state changes.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on interactive elements.
  - Subtle opacity transitions.

- **Hover:** Subtle color shifts or opacity changes on links and buttons.
- **Click:** Standard pointer cursor with immediate response.
- **Transition:** All transitions use 0.3s cubic-bezier(0.4, 0, 0.2, 1).
- **Keyboard:** Standard focusable elements.

## 8. Voice & Don'ts

The editorial voice is academic, inquisitive, and deliberate, mirroring the intellectual tone of the essays themselves. Visual communication follows suit, avoiding clutter and sensationalism in favor of clean lines and understated interaction.

- **Tone:** Academic, intellectual, and inquisitive.
- **Headline style:** Bold, large serif headlines that state a clear, provocative idea.
- **CTA style:** Understated text links, rarely bold buttons.
- **Avoid:** overly casual language / sensationalist headlines / visual clutter

### Don'ts
- ❌ don't use a dark mode — screenshot shows a light, white-background interface
- ❌ don't use bright, saturated primary colors — screenshot shows a dominant white, black, and muted teal palette
- ❌ don't use sans-serif for headlines — screenshot shows large, bold didone-serif for article titles
- ❌ don't use a dense, multi-column layout for body text — screenshot shows generous whitespace and clear hierarchy
- ❌ don't use heavy borders or shadows for every card — screenshot shows clean, borderless image-to-text transitions
- ❌ don't use playful or rounded UI elements — screenshot shows sharp, clean lines and minimal decoration

The system explicitly rejects dark mode, saturated color, sans-serif headlines, and dense layouts in favor of its focused, minimalist editorial framework.

## System Prompt (paste into AI tool)

```
Aeon is a premium digital publication for longform essays on ideas, science, and culture. The design is a clean, high-contrast editorial layout featuring a white background (#FFFFFF) and black ink (#000000). The primary accent color is a muted teal (#0C776D) used sparingly for the logo. Typography relies on a sophisticated contrast between a didone-serif for headlines and a humanist-sans for body text, with monospace used for navigation labels. Critical constraints: Never use dark mode or heavy background colors; avoid sans-serif for display text; do not clutter the interface with unnecessary UI elements or bright, saturated colors. The layout prioritizes longform reading with generous whitespace.
```