Linear · scrub to study layout
Linear
> Linear
midnight precision instrument Linear's design system is a midnight command center built on near-black surfaces (#08090a) with paper-white type and one electric acid-lime accent (#e4f222) that functions as a functional flashlight — small, high-contrast, and used sparingly to signal action. The interface treats darkness as a substrate rather than a theme: text is crisp white at tight tracking (-0.022em), weights sit in a low 400–510 band rather than bold, and borders are hairline-thin (0.5px) to let geometry do the work that shadows usually would. Components feel precision-machined — 6px and 12px radii, compact 8–12px paddings, and almost no decorative ornament — letting the product UI (issue cards, kanban boards, AI agent panels) be the only visual texture in an otherwise quiet system.
↗ https://linear.appColor Palette
BRAND
Acid Lime
#e4f222
Primary action buttons, active nav indicators — electric accent that breaks the monochrome system
ACCENT
Pulse Green
#27a644
Green outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color
Coral Red
#eb5757
Red wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color
Signal Teal
#02b8cc
Decorative accent, informational icon fills
Iris Violet
#6366f1
Tag/badge fills — soft chromatic punctuation on tags and labels
Lavender
#8b5cf6
Secondary tag fills, category indicators
NEUTRALS
Void
#08090a
Page canvas, full-bleed backgrounds — the default everything sits on
Carbon
#0f1011
Card surfaces, nav bars — one step above canvas for contained content
Obsidian
#161718
Elevated surfaces, deeper card panels
Graphite
#23252a
Subtle borders, dividers, ghost button outlines — low-contrast structural edges
Smoke
#383b3f
Hairline borders at higher contrast than graphite — section separators
Ash
#62666d
Muted body text, inactive icons, secondary metadata
Fog
#8a8f98
Tertiary text, placeholder copy, icon fills
Mist
#d0d6e0
Secondary headings, button text on dark surfaces
Bone
#e5e5e6
Near-white surface fills, high-contrast button text
Paper
#ffffff
Primary headings, hero type, max-contrast emphasis text)
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.