# Design System: Linear Dark-mode-native product design system. Near-black canvas (`#08090a`), Inter Variable with OpenType features, single brand accent (indigo-violet), semi-transparent white borders throughout. ## Chapters | File | Contents | |------|----------| | [01-visual-theme.md](01-visual-theme.md) | Visual theme & atmosphere, key characteristics | | [02-colour-palette.md](02-colour-palette.md) | Full colour palette with roles — backgrounds, text, brand, status, borders, overlays | | [03-typography.md](03-typography.md) | Font families, full type hierarchy table, principles | | [04-components.md](04-components.md) | Buttons, cards, inputs, badges, navigation, image treatment | | [05-layout.md](05-layout.md) | Spacing system, grid, whitespace philosophy, border radius scale | | [06-depth-elevation.md](06-depth-elevation.md) | Elevation levels, shadow philosophy, luminance stacking | | [07-dos-and-donts.md](07-dos-and-donts.md) | Do's and don'ts — the rules that define the system | | [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, collapsing strategy, image behavior | | [09-agent-prompts.md](09-agent-prompts.md) | Quick color reference, example component prompts, iteration guide | ## Quick Reference **Backgrounds:** `#08090a` (marketing) · `#0f1011` (panel) · `#191a1b` (elevated) · `#28282c` (hover) **Text:** `#f7f8f8` (primary) · `#d0d6e0` (secondary) · `#8a8f98` (tertiary) · `#62666d` (quaternary) **Brand:** `#5e6ad2` (indigo bg) · `#7170ff` (accent) · `#828fff` (hover) **Borders:** `rgba(255,255,255,0.05)` (subtle) · `rgba(255,255,255,0.08)` (standard) **Typography:** Inter Variable `"cv01", "ss03"` · weights 400/510/590 · Berkeley Mono for code **Key rule:** Weight 510 is the signature emphasis weight. Brand indigo is the only chromatic color. Borders are always semi-transparent white, never solid dark.