# Plain Design System

> Plain is the Office for the AI era. Its visual language is **editorial, not
> corporate** — warm paper, a serif voice, and a single coral accent. Where most
> AI tools default to cold white-and-blue, Plain reads like a well-set magazine:
> calm, legible, with human warmth. This document is the single source of truth
> for that language. Token values match `globals.css` exactly.

## Design philosophy

- **Editorial over corporate.** A serif display face (Newsreader) carries
  headings; the page feels typeset, not templated.
- **Warm, not sterile.** The canvas is warm paper (#f7f1e8), never pure white.
  Even dark mode is a warm near-black, never #000.
- **One accent, used sparingly.** Coral red (#f0533a) marks the single most
  important thing on a surface — a CTA, a highlight, an active state. Never
  decoration.
- **Legibility and contrast first.** Body text holds WCAG AA (4.5:1). Color
  encodes hierarchy or state, never mood.
- **Calm motion.** Animation clarifies a change; it is never ornament.

## Color

Plain runs a warm palette in two themes (light default, dark available). Colors
are semantic tokens — components reference roles, not raw hex.

### Core semantic tokens (light)

| Token | Value | Role |
|---|---|---|
| `--color-landing-paper` | #f7f1e8 | Page background — warm cream |
| `--color-landing-paper-warm` | #fbf6ee | Card / panel surface |
| `--color-landing-ink` | #211c18 | Primary text — warm near-black (15:1) |
| `--color-landing-mute` | #736b60 | Secondary text (4.67:1) |
| `--color-landing-rule` | #ddd2c2 | Hairline / divider |
| `--color-landing-red` | #f0533a | Coral accent — CTAs, highlights, active |
| `--color-landing-red-strong` | #d84326 | Deep coral — small-text emphasis, links |

### 10-step warm gray scale

Like Geist, each non-background step encodes *intent*, not just lightness. The
scale is warm (tinted toward paper), keeping Plain's voice while giving every
hover / border / fill / text role a defined value.

| Step | Light | Role |
|---|---|---|
| gray-100 | #f7f1e8 | Default background |
| gray-200 | #f1e9da | Hover background |
| gray-300 | #ebe2d0 | Active background |
| gray-400 | #ddd2c2 | Default border |
| gray-500 | #cdbfab | Hover border |
| gray-600 | #b3a591 | Active border |
| gray-700 | #8c8275 | Subtle fill / disabled text |
| gray-800 | #736b60 | Secondary text |
| gray-900 | #4a443c | Strong secondary text |
| gray-1000 | #211c18 | Primary text |

Step semantics mirror Geist: 100 default → 200 hover → 300 active; 400–600
borders; 700–800 fills; 900–1000 text.

## Typography

Two faces do all the work; a mono face handles code and data.

- **Newsreader** (serif) — display and headings. The editorial voice.
- **Geist** (sans) — UI, body, controls.
- **Geist Mono** — code, data, kickers, metadata.

### Type scale

A layered scale (display → label), each level with a defined use. Components use
tokens, not raw px.

| Token | Size | Use |
|---|---|---|
| `--text-display` | 72px | Hero headline (responsive) |
| `--text-h1` | 48px | Page title |
| `--text-h2` | 36px | Section title |
| `--text-h3` | 24px | Subsection |
| `--text-h4` | 20px | Card title |
| `--text-copy-lg` | 18px | Lead paragraph / subtitle |
| `--text-copy` | 16px | Body |
| `--text-copy-sm` | 14px | Small body |
| `--text-label` | 13px | Labels / meta |
| `--text-label-sm` | 11px | Mono kicker / badge |

Display and headings use Newsreader with tight tracking (around -0.02em at large
sizes). Kickers and metadata use Geist Mono, uppercase, wide tracking (~0.2em).

## Spacing

A 4px base grid. Common steps: 4, 8, 12, 16, 24, 32, 40, 64, 96.

- 8px within a group
- 16px between groups
- 32–40px between sections

## Radius

| Context | Radius |
|---|---|
| Everyday controls (button, input, card) | 6–8px |
| Menus / popovers / modals | 12px |
| Full-bleed surfaces | 16px |
| Pills / avatars | 9999px |

## Motion

Animation must clarify a change, never decorate.

- State changes: ~150ms
- Popovers: ~200ms
- Modals: ~300ms
- Easing: ease-out for entrances; a gentle overshoot for playful moments.

## Shadow

Soft, low, warm-tinted shadows — depth without drama.

```
--plain-shadow: 0 1px 2px rgba(33,28,24,0.04),
                0 8px 20px -12px rgba(33,28,24,0.18);
```

## Components

- **Buttons** — primary (ink fill, coral on hover), secondary (paper + border),
  tertiary (transparent). One primary action per surface.
- **Inputs** — paper-warm fill, hairline border, coral focus ring.
- **Cards** — paper-warm surface, hairline border, soft shadow on hover.

## Voice & writing

- Precise and concise. No filler.
- Titles in sentence case; the brand wordmark is "Plain" with a coral period.
- Actions are verb + noun ("Create a deck", "Share link").
- Errors say what happened and what to do next.
- In-progress states use present continuous + ellipsis ("Generating…").

## Don'ts

- Don't use pure white (#fff) or pure black (#000) — Plain is always warm.
- Don't add a second accent color. Coral is the only one.
- Don't mix more than two font weights in one block.
- Don't use the accent for decoration — reserve it for the single key action.
- Don't remove focus outlines without a visible replacement.

---

*Dark theme: /design.dark.md · Live site: https://inplain.app*