# Design Reference - Linear
> Layered dark workspace with disciplined borders, keyboard-first hierarchy, and violet-blue focus states.

Theme: dark
Industry: productivity
Captured: 2026-04-18T16:22:10.000Z

## Source
- Source: Public source
- Source URL: https://linear.app
- Original site: https://linear.app
- License note: Publicly visible design reference metadata. Use as inspiration and token guidance, not as copied brand assets.

## Technical Summary
A dark SaaS control surface with low-chroma panels, sparse accent use, tight row heights, and crisp focus affordances. Useful for issue tracking, command centers, and agent timelines.

## Tags
- productivity
- dark
- keyboard
- workspace
- crisp

## Colors
| Name | Value | Token | Group | Role |
| --- | --- | --- | --- | --- |
| Void | `#0b0b0f` | `--color-void` | surface | App background. |
| Panel | `#141419` | `--color-panel` | surface | Primary panel surface. |
| Line | `#2a2a33` | `--color-line` | neutral | Hairline border. |
| Text | `#f4f4f5` | `--color-text` | neutral | Primary text. |
| Muted | `#8f8f9d` | `--color-muted` | neutral | Secondary text. |
| Focus Violet | `#7c5cff` | `--color-focus-violet` | accent | Focus, selected item, and active tab. |

## Typography
### Inter - `--font-inter`
Single family for dense product UI, labels, tables, and command surfaces.
- Family: `Inter, ui-sans-serif, system-ui, sans-serif`
- Weights: 400, 500, 600
- Sizes: 12px, 13px, 14px, 16px, 20px, 40px
- Line heights: 1.2, 1.4, 1.5

## Spacing
- Base unit: 4px
- Density: compact

| Name | Value | Token |
| --- | --- | --- |
| 4 | `4px` | `--spacing-4` |
| 8 | `8px` | `--spacing-8` |
| 12 | `12px` | `--spacing-12` |
| 16 | `16px` | `--spacing-16` |
| 24 | `24px` | `--spacing-24` |
| 32 | `32px` | `--spacing-32` |
| 48 | `48px` | `--spacing-48` |
| 64 | `64px` | `--spacing-64` |

## Radius
- Default: 6px
- Controls: 6px
- Panels: 8px

## Components
### Command row
Role: Navigation
- 24-28px row height
- left icon
- right shortcut hint

### Issue panel
Role: Content
- Dark raised surface
- single-pixel border
- muted metadata line

## Do
- Use one accent at a time.
- Let borders carry hierarchy.
- Keep rows compact and keyboard scannable.

## Dont
- Do not use decorative gradients.
- Do not over-round controls.
- Do not brighten inactive text.