Linear Design Patterns
Apply Linear's design philosophy to web applications. Covers color, typography, layout, keyboard interaction, animation, feedback, and visual polish.
Quick Decision Guide
| Decision | Linear's Answer |
|---|---|
| Light or dark default? | Dark-first |
| Color space? | LCH (perceptually uniform) |
| How many theme variables? | 3: base, accent, contrast |
| Font? | Inter + Inter Display for headings |
| Spacing base unit? | 4px |
| Animation duration? | ~200ms, ease-out |
| Confirm or undo? | Undo (except irreversible) |
| Loading spinners? | No — optimistic updates |
| Feedback location? | Inline, next to the action |
| Keyboard support? | Full app control, mouse optional |
| Command palette? | Yes, Cmd+K, fuzzy search, context-aware |
| Navigation shortcuts? | g then letter (vim-style) |
| Information density? | High density, low clutter |
| Chrome/decoration? | Minimal — content over chrome |
| Content surface shape? | Sharp edges — no border-radius on data panels |
| Panel separation? | 1px border lines, not gaps or shadows |
| When to elevate? | Only floating overlays (modals, dropdowns, popovers) |
Core Principles
- Keyboard-first, mouse-optional — every click action has a key equivalent
- Dark-first — dark mode is default, light mode is the variant
- Speed is a feature — 100ms interaction target, optimistic updates, no spinners
- Color restraint — near-monochrome, color only for status/accent
- High density, low clutter — pack information in through alignment, not cramming
- Be gentle — everything comfortable, natural, expected, no surprises
Implementation
For full design system details covering color, typography, layout, navigation, interaction, animation, feedback, and visual polish patterns, see references/linear-design-system.md.
Key sections:
- A. Color & Theming — LCH color space, 3-variable themes, dark-first
- B. Typography — Inter family, hierarchy through weight/size only
- C. Layout & Navigation — inverted-L, list/detail split, collapsible sidebar
- D. Surface Architecture — flush tiled grids, sharp edges on data, border hierarchy, elevation only for overlays
- E. Information Density — in-place editing, contextual menus
- F. Interaction & Speed — optimistic updates, command palette, keyboard shortcuts
- G. Motion & Animation — 200ms, purposeful micro-interactions only
- H. Feedback — inline over toasts, undo over confirmation
- I. Visual Polish — tight alignment, subtle gradients, "be gentle"
- J. Progressive Disclosure — works out of the box, natural language filters, universal URLs