Design System Analysis of Linear

A near-black product-focused marketing canvas built around #010102 (the deepest dark surface of any tool in this collection), light gray text, and the signature Linear lavender-blue (#5e6ad2) used as the single chromatic accent. The system reads as software-craft documentation: dense, technical, and quietly luxurious.

01 — Color Palette

Palette

Brand & Accent
Lavender-Blue
#5e6ad2
Primary CTA, brand mark, link emphasis.
Lavender Hover
#828fff
Hovered state of the primary CTA.
Lavender Focus
#5e69d1
Focus-ring tint for inputs and buttons.
Brand Secure
#7a7fad
Muted lavender-gray for security surfaces.
Surface (4-step ladder)
Canvas
#010102
Default — near-pure black with faint blue tint.
Surface 1
#0f1011
Feature cards, pricing cards, product panels.
Surface 2
#141516
Featured pricing card, hovered cards.
Surface 3
#18191a
Sub-nav, dropdown menus.
Surface 4
#191a1b
Deepest lifted surface (bg-level-3).
Hairline
#23252a
1px borders on cards and dividers.
Hairline Strong
#34343a
Stronger 1px borders — input focus.
Hairline Tertiary
#3e3e44
Tertiary borders for nested surfaces.
Text
Ink
#f7f8f8
Headlines and emphasized body type.
Ink Muted
#d0d6e0
Secondary type — meta info on hero panels.
Ink Subtle
#8a8f98
Tertiary type — deselected pricing tabs, footer.
Ink Tertiary
#62666d
Quaternary — disabled, footnotes.
Semantic
Success Green
#27a644
Status pills, success indicators. The only semantic color on marketing.
02 — Typography Scale

Typography

display-xl80px · 600 · 1.05 · -3.0px · Linear Display
Linear is a purpose-built tool
display-lg56px · 600 · 1.10 · -1.8px
Plan in cycles
display-md40px · 600 · 1.15 · -1.0px
Customer requests
headline28px · 600 · 1.20 · -0.6px
Pricing tier title
card-title22px · 500 · 1.25 · -0.4px
Feature card title
subhead20px · 400 · 1.40 · -0.2px
Lead body next to display headlines
body-lg18px · 400 · 1.50 · -0.1px
Hero subhead and lead paragraphs.
body16px · 400 · 1.50 · -0.05px
Default body — Linear Text reads as quietly editorial against the dark canvas.
body-sm14px · 400 · 1.50
Card body, footer columns.
caption12px · 400 · 1.40
Captions and meta
button14px · 500 · 1.20
Get started
eyebrow13px · 500 · 1.30 · 0.4px
Section eyebrow
mono13px · 400 · 1.50 · Linear Mono
LIN-1234 · Cmd+K · status:in-progress
03 — Button Variants

Buttons

button-primary
button-primary-hover
button-primary-pressed
button-secondary
button-tertiary
button-inverse
pricing-tab-default + pricing-tab-selected
status-badge
● In progress ● Done
04 — Cards & Containers

Cards

pricing-card · Free
Free
$0
  • Up to 250 issues
  • Unlimited members
  • Slack & GitHub integrations
pricing-card-featured · Standard
Standard
$XX
  • Unlimited issues
  • Cycles & projects
  • Custom workflows
pricing-card · Plus
Plus
$XX
  • Linear Insights
  • Triage
  • SAML SSO
feature-card

Built for performance

Real-time collaboration. Offline-first. Sub-100ms keystroke response.

product-screenshot-card
// Linear app UI mockup frame
testimonial-card
"Linear gives our team the right structure to ship better software, faster."
— Customer, Engineering
cta-banner

Get started

Sign up for Linear in seconds.

CASH APP
RAMP
VERCEL
RUNWAY
RETOOL
PERPLEXITY
changelog-row (build page)
2026.4.30 — Released today
Sub-issues, improved triage, dark mode tweaks.
2026.4.20 — 10 days ago
New keyboard shortcuts, faster issue creation.
05 — Form Elements

Forms

06 — Spacing & Radius

Spacing

xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px

Radius

xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 16px
xxl · 24px
pill · 9999
07 — Elevation & Depth

Elevation

Level 0 — flat
Level 1 — surface-1
Level 2 — surface-2
Level 3 — surface-3
Level 4 — focus ring
08 — Responsive Behavior

Responsive

NameWidthKey Changes
Desktop-XL1440pxDefault desktop layout
Desktop1280pxCard grid 3-up maintained
Tablet1024pxCard grid 3-up → 2-up
Mobile-Lg768pxPricing comparison becomes accordion; nav hamburger
Mobile480pxSingle-column; display-xl scales 80px → ~36px
375
768
1024
1280
1440
Touch Targets
  • CTAs hold ≥40px tap height across viewports.
  • Pricing tab pills hold ≥36px → ≥44px on touch.
  • Form inputs hold ≥44px tap target on touch.
Collapsing Strategy
  • Top nav: links collapse to hamburger below 768px.
  • Card grids: 3-up → 2-up at 1024px → 1-up below 768px.
  • Pricing comparison: per-tier accordion below 768px.
  • Display type scales 80px → 40px while preserving negative tracking.