Linear

# Linear Design System

## Visual Theme & Atmosphere
Ultra-minimal, precise, developer-focused. Every pixel is intentional. The dark theme with purple accents creates a focused, professional environment. Typography is compact (14px base) to maximize information density without sacrificing readability. Feels like a precision tool, not a toy.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #8B5CF6 | Brand, active states, links |
| Background | #0F1117 | Main canvas (void black) |
| Surface | #151922 | Panels, cards, sidebar |
| Text | #F7F8F8 | Primary text |
| Muted | #8B8D98 | Secondary text, labels |
| Border | #262830 | Subtle dividers |
| Success | #4ADE80 | Green states |
| Warning | #FBBF24 | Yellow states |
| Error | #F87171 | Red states |

## Typography Rules
- **Heading Font**: Inter, -apple-system
- **Body Font**: Inter, -apple-system
- **Mono Font**: JetBrains Mono
- **Base Size**: 14px (compact for density)
- **H1**: 1.75rem / weight 600
- **H2**: 1.375rem / weight 600
- **H3**: 1.125rem / weight 500
- **Body**: 0.875rem / weight 400 / line-height 1.5

## Component Stylings
- **Buttons**: Ghost or subtle fill, 4px radius, compact padding
- **Cards**: Surface background, 1px border, 6px radius, no visible shadow
- **Inputs**: Surface background, 1px border, focus with primary ring
- **Navigation**: Left sidebar, icon + text, collapsed to icons

## Layout Principles
- 4px base grid
- Maximum information density
- 20px left/right content padding
- Tight vertical rhythm (4px increments)

## Depth & Elevation
- No visible shadows (dark theme)
- Elevation via surface color lightness: #0F1117 → #151922 → #1E2028
- Hover: slightly lighter surface
- Active: primary tint

## Responsive Behavior
- Desktop-first (target: engineers at desks)
- Sidebar collapsible
- Keyboard shortcuts for everything
- Command palette (Cmd+K) for navigation