---
name: Aeon
description: "Aeon is an excellent reference for premium digital publishing, demonstrating how to balance high-end serif typography with a modern, clean grid layout."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#666666"
  tertiary: "#0C776D"
  neutral: "#999999"
  bg-soft: "#F5F5F5"
  muted-soft: "#CCCCCC"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 42px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "0"
  h2:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 13.5px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.35px"

rounded:
  sm: 4px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

A premium digital publication for longform essays on ideas, science, and culture.

*A prestigious academic journal reborn as a modern digital publication.*

## Colors

Clean, high-contrast black on white with a subtle teal accent.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Accent (`#0C776D`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Navigation and labels use monospace font
- Article titles use didone-serif font
- Body and sans-serif elements use humanist-sans font

## Layout

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

*Rhythm:* Standard 4px base grid with consistent padding and gaps.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimal, often text-based links with subtle hover transitions.
- **card:** Image-heavy article cards with strict typography hierarchy below.
- **chip:** None visible, uses simple text labels for categories.
- **input:** Minimal search or newsletter inputs.
- **hero:** Full-width cinematic image with large overlaid serif text.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```