Design System Analysis

Design System
Analysis of Linear

A near-black canvas, crisp off-white Inter, and a single electric indigo — a design system built on restraint, precision, and hairline-thin separation.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Inter (shipped as the variable "Inter Variable") carries the entire system. Hierarchy is built from size and hard-negative tracking rather than weight — the 64px and 48px heads share a single interpolated 510 weight and run line-height at a flat 1.0. Body settles unambiguously at 16px / 400.

03 — Components

Button Variants

button-primary
Solid indigo #5E6AD2 with a faint inset top highlight. The product-UI primary action.
button-contrast
The high-emphasis light pill (#E5E5E6 on #08090A) used for the top marketing CTA.
button-secondary
Transparent with a 1px white-alpha hairline border. Recedes against the dark canvas.
button-pill
Sunken white-alpha fill at full radius for utility chips and tags.
04 — Components

Cards & Surfaces

Cards sit on a barely-lifted #101113 surface, separated from the canvas by a 1px white-alpha hairline rather than a hard shadow. Depth stays shallow and editorial.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base unit, stepping 4 / 8 / 12 / 16 / 24 / 32 / 48, with 64–72px of vertical rhythm between marketing sections.

07 — Foundations

Border Radius

Small and consistent: a 6px control radius and 8–12px cards, with a 2px micro-radius on the tiniest chips and full pills on nav buttons and avatars.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. Most "elevation" in the system is just a white-alpha border; surfaces stay flush.
Level 1 — 0 2px 4px rgba(0,0,0,.4). A soft, dark lift for raised cards and menus.
Level 2 — 0 4px 32px rgba(8,9,10,.6). A deep, diffuse shadow reserved for popovers and modals.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; display ramps to ~40px; gutters tighten to 22px.
Tablet768–1023pxFour-up grids collapse to two columns; pricing & auth stack.
Laptop1024–1279pxFull four-column grids return; hero display at 48px.
Desktop≥ 1280px1200px centred column, 40px gutters, hero display at 64px.

Pattern: a centred max-width column with generous negative space and strong left alignment; full-bleed dark bands are punctuated by the occasional low-opacity indigo gradient glow.

Pricing Tiers

Plan cards demonstrate the surface, hairline, and featured-state patterns — the highlighted tier is marked with an indigo ring rather than a colour-flooded band.

Free
$0 /user/mo
For individuals and small teams getting started.
  • Unlimited members
  • 2 teams
  • 250 issues
  • Slack & GitHub
Business● Most popular
$14 /user/mo
For growing companies that need more control.
  • Unlimited teams
  • Linear Insights
  • Private teams & guests
  • SAML & SCIM
Enterprise
Custom
For organizations with advanced needs.
  • Advanced security
  • Dedicated support
  • Custom contracts
  • SOC 2 report

Data Table

A dense issue list — the surface the product is best known for. Monospace IDs, hairline row separators, and pill status tags.

IDIssueAssigneeStatusWhen
LIN-2381Refactor real-time sync engineA. RaoDone2h ago
LIN-2382Keyboard navigation for InboxJ. KimIn Progress5h ago
LIN-2383Fix OAuth redirect on SafariM. SinghDone1d ago
LIN-2384Cycle analytics panelL. ChenIn Progress1d ago
LIN-2385Slack unfurl previewsD. ParkDone2d ago
1–5 of 412
123

Auth Forms

Auth cards lean on the same surface, hairline inputs, indigo focus ring, and a neutral SSO ghost button.

Sign in

Welcome back

OR
Create account

Create your workspace

OR
Extracted from linear.app · live computed styles · Design System Extractor