---
version: alpha
name: Extraordinary Things
description: Gallery-grade editorial minimalism — Lyyra Standard display serif set large via fluid clamp scaling, a strict black-and-white duotone that inverts whole sections (black canvas ↔ white canvas), generous pill radii (100px) on tags and big 24px card corners, and an art-direction-first layout where imagery does the talking.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  ink: "#000000"
  ink-soft: "#0e0e0e"

  # Inverted (dark) section
  background-invert: "#000000"
  surface-invert: "#0e0e0e"
  ink-invert: "#ffffff"

  # Neutral approximations (flattened over white)
  border: "#e6e6e6"
  ink-secondary: "#555555"

  # On-color
  on-ink: "#ffffff"
  on-background: "#000000"

typography:
  display-hero:
    fontFamily: "Lyyra Standard, Georgia, Times New Roman, serif"
    fontSize: 50px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Lyyra Standard, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.3px
  heading:
    fontFamily: "Lyyra Standard, Georgia, serif"
    fontSize: 25px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  sub-heading:
    fontFamily: "Lyyra Standard, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Lyyra Standard, Georgia, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Lyyra Standard, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Lyyra Standard, Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Lyyra Standard, Georgia, serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  mono-label:
    fontFamily: "monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  micro: 2px
  xs: 3px
  lg: 24px
  pill: 100px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
  button-primary-invert:
    backgroundColor: "{colors.ink-invert}"
    textColor: "{colors.on-background}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
    borderColor: "{colors.ink}"

  tag-pill:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 6px 16px
    borderColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-invert:
    backgroundColor: "{colors.surface-invert}"
    textColor: "{colors.ink-invert}"
    rounded: "{rounded.lg}"
    padding: 24px

  image-frame:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: 24px 40px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
---

# Extraordinary Things Design System

## Overview

Extraordinary Things presents itself the way a gallery presents work — the interface gets out of the way so the imagery and the typography can carry the room. The system is a strict black-and-white duotone with no chromatic accents at all: pure white canvas (`{colors.background}`) with pure black ink (`{colors.ink}`), and a near-black `{colors.ink-soft}` for inverted surfaces. There is no brand blue, no status green, no decorative gradient. Contrast itself is the brand.

The signature move is section inversion. Rather than introduce color, the page flips wholesale between a light canvas (black text on white) and a dark canvas (white text on black `{colors.background-invert}`). This binary rhythm gives the long editorial scroll its cadence — each inversion reads as a new chapter. Because the only two values in play are `#000000` and `#ffffff`, the inversion is total and unambiguous; chrome derived from one mode mirrors exactly into the other.

Typography is the second pillar. The whole site is set in **Lyyra Standard**, a contemporary display serif, and it is set LARGE — headings scale fluidly via `clamp()` so the hero type fills the viewport on wide screens and stays readable on mobile. Weight discipline is tight: `500` for display and emphasis, `400` (normal) for reading. A monospace label voice appears sparingly for meta/tags, the only typographic counterpoint to the serif.

**Key Characteristics:**
- Pure black/white duotone — zero chromatic accents, contrast is the identity
- Whole-section inversion (light canvas ↔ dark canvas) instead of color for rhythm
- Lyyra Standard display serif everywhere, set large via fluid `clamp()` scaling
- Two weights only: 500 (display/emphasis), 400 (body)
- Pill radius `{rounded.pill}` (100px) on tags and buttons; soft 24px corners on cards/images
- Monospace label voice for meta and tags — sparse, deliberate
- Art-direction-first layout: imagery dominates, UI chrome is minimal

## Colors

### Primary
- **Ink Black** (`{colors.ink}`): All primary text, headings, button fills, outlines. Pure `#000000` — uncompromising.
- **Pure White** (`{colors.background}`): Page canvas, card surfaces, text on dark sections.
- **Ink Soft** (`{colors.ink-soft}`): Near-black `#0e0e0e` used for inverted surface panels — a hair off pure black to read as a distinct surface.

### Inverted Mode
- **Background Invert** (`{colors.background-invert}`): Black canvas for inverted sections.
- **Surface Invert** (`{colors.surface-invert}`): Dark card/panel surface in inverted sections.
- **Ink Invert** (`{colors.ink-invert}`): White text on dark sections.

### Neutral
- **Border** (`{colors.border}`): Hairline dividers and image-frame outlines on light canvas (flattened approximation).
- **Ink Secondary** (`{colors.ink-secondary}`): Muted captions and meta text on light canvas.

### On-Color
- **On Ink** (`{colors.on-ink}`): White text/icons on black fills.
- **On Background** (`{colors.on-background}`): Black text/icons on white fills.

## Typography

### Font Family
- **Primary**: `Lyyra Standard`, with fallbacks `Georgia, Times New Roman, serif`
- **Mono**: `monospace, monospace` for tags and meta labels
- Lyyra Standard is a contemporary display serif; the site leans on its large-size personality rather than ornament.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | Hero statements, fluid-scaled to fill the viewport |
| `display` | Large section openers |
| `heading` | Section and card headings |
| `sub-heading` | Lighter sub-sections |
| `body-large` | Lead paragraphs, introductions |
| `body` | Standard reading text |
| `body-small` | Secondary copy, list items |
| `caption` | Button labels, emphasized meta |
| `mono-label` | Tags, meta, technical labels |

### Principles
- **Set it large**: Display type uses fluid `clamp()` so headlines fill wide viewports — the serif is the hero, not a supporting element.
- **Two weights, strict roles**: 500 for display/emphasis, 400 for reading. No heavier bold.
- **Serif for everything, mono for asides**: Lyyra carries the whole experience; monospace appears only for tags/meta as a deliberate counterpoint.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, opening into very large section gaps (`{spacing.3xl}`–`{spacing.4xl}`) to give imagery breathing room.

### Grid & Container
- Wide, near-full-bleed image rows alternating with centered text columns
- Hero: large fluid serif over generous whitespace
- Editorial single-column reading measure for prose sections
- Image galleries in flexible multi-column grids

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical gaps between sections; whitespace frames the work
- **Inversion as rhythm**: Light and dark sections alternate to chapter the scroll
- **No decorative chrome**: Separation comes from inversion and spacing, not borders or shadows

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default — text, image rows, most sections |
| Hairline (Level 1) | 1px `{colors.border}` | Image frames, dividers on light canvas |
| Inversion (Level 2) | Full black/white flip | Section-level depth via contrast, not shadow |

**Depth Philosophy**: The system avoids shadows almost entirely. Depth and separation are achieved through wholesale tonal inversion and generous spacing rather than elevation cues. When a boundary is needed on light canvas, it is a single hairline at `{colors.border}`.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery, hard edges |
| `micro` | 2px | Tiny inline elements |
| `xs` | 3px | Small controls |
| `lg` | 24px | Cards, image frames, soft panels |
| `pill` | 100px | Buttons, tags |

## Components

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

### Buttons
- **`button-primary`** — Black fill, white text, full pill (`{rounded.pill}`). The default CTA on light canvas.
- **`button-primary-invert`** — White fill, black text. The mirrored CTA on dark sections.
- **`button-outline`** — White surface, black 1px outline, pill radius. Secondary action.

### Tags & Pills
- **`tag-pill`** — White surface, black outline, monospace label, pill radius. Meta/category markers.

### Cards
- **`card`** — White surface, 24px corners, hairline border. Holds editorial blocks.
- **`card-invert`** — Dark `{colors.surface-invert}` surface, white text, for inverted sections.

### Imagery
- **`image-frame`** — 24px-rounded image container, optional hairline border. Imagery is the dominant content; frames are minimal.

### Navigation
- **`nav-bar`** — White (or inverted) header, serif/caption links, minimal chrome.

### Links
- **`link`** — Black serif text; emphasis via underline or weight, never color.

## Do's and Don'ts

### Do
- Keep the palette strictly black and white — `#000000` and `#ffffff` only
- Use whole-section inversion to create rhythm instead of reaching for color
- Set Lyyra Standard large via fluid `clamp()` — the serif is the hero
- Use only two weights: 500 (display/emphasis) and 400 (body)
- Use pill radius on buttons and tags; 24px corners on cards and image frames
- Let imagery dominate; keep UI chrome minimal
- Use monospace only for tags and meta labels

### Don't
- Don't introduce chromatic accent colors — there are none in this system
- Don't add shadows for depth — use inversion and spacing
- Don't set headings small — large fluid display type is the identity
- Don't mix in extra font weights beyond 400/500
- Don't put heavy borders on imagery — a single hairline at most
- Don't use the monospace face for reading copy

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, image rows stack, display type at clamp minimum |
| Tablet | 600–1024px | 2-column image grids, expanded padding |
| Desktop | 1024–1400px | Full multi-column galleries, fluid display type scaling up |
| Large Desktop | >1400px | Display type reaches clamp maximum, generous margins |

### Touch Targets
- Pill buttons use comfortable 12px×28px padding
- Tags use 6px×16px padding
- Navigation links have ample spacing

### Collapsing Strategy
- Hero display type scales down via `clamp()`, never wraps awkwardly
- Image grids: multi-column → 2-column → single column
- Inverted sections preserve their black/white flip at all sizes
- Section spacing: 96px+ → tighter on mobile

### Image Behavior
- Imagery is the dominant content and remains edge-aware at all sizes
- Rounded image frames keep 24px corners; full-bleed rows go to 0px
- Aspect ratios preserved across breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Black `{colors.ink}` fill, white text, pill radius
- Background: Pure White `{colors.background}` (or Black `{colors.background-invert}` for inverted sections)
- Heading text: Black `{colors.ink}` (white `{colors.ink-invert}` on dark)
- Body text: Black `{colors.ink}`
- Border: hairline `{colors.border}`

### Example Component Prompts
- "Create a hero on white background. Headline in Lyyra Standard serif, fluid `clamp(50px, 5vw, 90px)`, weight 500, color `{colors.ink}`. Black pill CTA (`{colors.ink}` fill, white text, 100px radius, 12px 28px padding)."
- "Design an inverted section: black background `{colors.background-invert}`, white serif heading `{colors.ink-invert}`, white pill CTA with black text."
- "Build a tag: white surface, 1px black outline, monospace label, 100px pill radius, 6px 16px padding."
- "Create an image card: 24px rounded frame, hairline `{colors.border}` border, serif caption below in `{colors.ink}`."

### Iteration Guide
1. Stay strictly black and white — no chromatic accents ever
2. Use section inversion, not color, for visual rhythm
3. Set Lyyra Standard large via `clamp()` — the serif is the star
4. Two weights only: 500 (display) and 400 (body)
5. Pills for buttons/tags, 24px for cards/images, hairlines over shadows

---

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