# DESIGN.md · Anime Atlas

Design system for https://anime-atlas-7fg.pages.dev — an anime & manga explorer on the Jikan API v4.

## Choice and rationale
Source: Mark's design library (https://design-library-byt.pages.dev).
- **WR-001 Linear** — near-black monochrome canvas (#09090A), stepped surfaces (#121213 / #1A1A1B), light palette (#F9F9FA / #EFEFF0 / #E1E1E2). All ESTIMATED from the library's captures. Gives a quiet, high-density frame so colourful poster art carries the page.
- **WR-005 Raycast** — one warm red accent and a search-first command palette (press `/` or Ctrl/Cmd+K).
- Rejected: Material 3 (tonal surfaces and rounded FAB-heavy look compete with posters; best for app UIs), Vercel/Geist (too stark for media), Apple (hard to reproduce well without SF fonts).
- Linear's indigo (#5E6AD2) was swapped for red so the site doesn't drift into the generic purple look.

## Tokens (CSS variables, see tokens.css)
| Token | Dark | Light |
|---|---|---|
| --bg | #09090A | #F9F9FA |
| --surface | #121213 | #FFFFFF |
| --surface-2 | #1A1A1B | #EFEFF0 |
| --line / --line-2 | #27282B / #3A3B3F | #E1E1E2 / #CFCFD2 |
| --text / -2 / -3 | #F4F4F5 / #A1A1A8 / #8A8A92 | #1B1B1D / #55555C / #6A6A72 |
| --accent | #FF5A4E (ink #1A0605) | #C8281C (ink #FFFFFF) |
| --ok / --warn / --err | #4CC38A / #F2B84B / #FF6B6B | #1E7F52 / #8A5A00 / #B42318 |

Type: Bricolage Grotesque (display, 600–800), IBM Plex Sans (body), JetBrains Mono (numbers, meta, eyebrows). All SIL OFL, from Google Fonts.
Scale: xs .75 · sm .875 · md 1 · lg 1.25 · xl 1.75 · 2xl clamp(2rem, 4vw+1rem, 3.5rem) rem. Line height 1.1 for headings, 1.55 for body.
Spacing (4-based): 4, 8, 12, 16, 24, 32, 48, 72 px. Radii: 6 / 10 / 16 / pill.
Shadows: shadow-1 (inset hairline + 1-2px), shadow-2 (overlay: 32px blur + 1px line ring). Focus: 2px bg gap + 2px accent ring.
Motion: 160ms cubic-bezier(.2,.7,.2,1); disabled under prefers-reduced-motion.

## Components
Buttons (primary / secondary / ghost / icon / disabled), segmented control, chips (link + selected), inputs/selects with mono uppercase labels, poster tile (rank badge, score badge), stat strip (1px-gap grid), facts list, character row, genre table, command palette dialog, toast, skeletons, empty and error states (with retry).

## Rules
- Keep chrome monochrome and use the accent once per view (the primary CTA or selected state).
- Use mono for numbers so scores and ranks line up.
- No emoji icons; use Lucide stroke icons at 18px, 2px stroke.
- Contrast: body text ≥ 7:1, muted text ≥ 4.5:1 on --bg in both themes.