Skip to content

Linear Design System

Linear's craft look: the deepest near-black canvas, light gray text, one lavender-blue accent and Linear's own display sans. For React and AI tools.

Get ProDownload DESIGN.md
Primary color
#5e6ad2
Typeface
Linear Display
Shape
Mixed
Base radius
8px
Colors
23
Type tokens
13
Components
21
Spacing values
8

About Linear DESIGN.md

Curated by Dov Azencot, updated May 12, 2026. Source linear.app (opens in a new tab).

Linear's marketing site is the strictest dark-canvas system in this directory. The page floor is "#010102" — essentially pure black with a faint blue cast, never the unfortunate "#000000" true black that most dark sites default to. On top sits a four-step surface ladder: charcoal panels at "#0f1011", "#141516", "#18191a", and "#191a1b" carrying every card, hovered tile, and lifted dropdown. Hairlines run from "#23252a" up through "#34343a" and "#3e3e44". The single chromatic accent is Linear's lavender-blue "#5e6ad2", deployed scarcely on the brand mark, focus rings, and one primary CTA per section. There is no second chromatic color, no atmospheric gradient, no spotlight card. Linear trusts surface lift and hairline borders to carry every bit of hierarchy.

This page packages the entire spec into one DESIGN.md file written to the Google Labs spec. Inside: 23 colors tokens grouped into brand, surface, hairline, text, and semantic families; 13 type tokens running Linear Display, Linear Text, and Linear Mono with negative tracking scaling from -3.0px at 80px down to 0 at body; an 8-step rounded scale (4px through 24px plus pill and full); a 9-step spacing scale on a 4px base unit ending at 96px section padding; and 21 components definitions covering buttons, pricing cards, product screenshot panels, testimonial cards, changelog rows, and the dark top-nav and footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Linear's discipline — dark canvas, single lavender accent, surface ladder over shadows — rather than a generic dark theme. Or reference the tokens directly: every hex, font, radius, and spacing value is a quoted scalar you can paste into Tailwind config, CSS variables, or your component library. Linear is worth studying because it proves how far restraint scales: a single accent color, one negative-tracking display family, and four surface lifts produce a marketing page that reads as software-craft documentation.

What makes it distinct

5 highlights

  1. Deepest dark canvas in the directory#010102 with a faint blue tint, never pure #000000 true black
  2. Single chromatic accentLavender-blue #5e6ad2 reserved for brand mark, focus ring, and primary CTA only
  3. Four-step surface ladder carries hierarchy without drop shadowsCanvas to surface-4 with hairline borders
  4. Aggressive negative letter-spacing on display-3.0px at 80px, scaling to -0.05px at 16px body
  5. Product UI screenshots are the protagonistMarketing chrome is a dark frame for high-fidelity app captures

Live at linear.app

Linear in production, as captured. Scroll the window to see the whole page.

Visit linear.app (opens in a new tab)
Linear's website at linear.app

23 colors

Linear's system runs on #5e6ad2 as its primary voltage, used in 1 of 21 components. Type is set in Linear Display across 13 tokens from 12px to 80px, weights 400–600. Shape language is mixed across 21 components, blending pills, soft rounds, and squarer corners.

Brand & Accent

Sparing, CTA-only voltage · 4

Surface

Page and card backgrounds · 5

Text

Headlines, body, captions · 6

Borders & Hairlines

Dividers, outlines, rules · 3

Semantic

Status, errors, success, links · 1

Other

Specialty colors · 4

13 type tokens

Set in Linear Display across 13 tokens, from 12px to 80px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • display-xl80px · weight 600 · lh 1.05 · tracking -3.0pxThe quick brown fox jumps over the lazy dog
  • display-lg56px · weight 600 · lh 1.1 · tracking -1.8pxThe quick brown fox jumps over the lazy dog
  • display-md40px · weight 600 · lh 1.15 · tracking -1.0pxThe quick brown fox jumps over the lazy dog
  • headline28px · weight 600 · lh 1.2 · tracking -0.6pxThe quick brown fox jumps over the lazy dog
  • card-title22px · weight 500 · lh 1.25 · tracking -0.4pxThe quick brown fox jumps over the lazy dog
  • subhead20px · weight 400 · lh 1.4 · tracking -0.2pxThe quick brown fox jumps over the lazy dog
  • body-lg18px · weight 400 · lh 1.5 · tracking -0.1pxThe quick brown fox jumps over the lazy dog
  • body16px · weight 400 · lh 1.5 · tracking -0.05pxThe quick brown fox jumps over the lazy dog
  • body-sm14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • caption12px · weight 400 · lh 1.4The quick brown fox jumps over the lazy dog
  • button14px · weight 500 · lh 1.2The quick brown fox jumps over the lazy dog
  • eyebrow13px · weight 500 · lh 1.3 · tracking 0.4pxThe quick brown fox jumps over the lazy dog
  • mono13px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog

Radii and spacing

8 corner radii and 8 spacing values. Shape language: mixed, on a 8px base radius.

Radii8

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • xxl24px
  • pill9999px
  • full9999px

Spacing8

  • xxs4px
  • xs8px
  • sm12px
  • md16px
  • lg24px
  • xl32px
  • xxl48px
  • section96px

21 components

Each rendered from its tokens (color, type, radius, padding) on Linear's own canvas.

  • Button Primary
    Button Primarybutton-primary
  • Button Primary Pressed
    Button Primary Pressedbutton-primary-pressed
  • Button Primary Hover
    Button Primary Hoverbutton-primary-hover
  • Button Secondary
    Button Secondarybutton-secondary
  • Button Tertiary
    Button Tertiarybutton-tertiary
  • Button Inverse
    Button Inversebutton-inverse
  • Pricing Card
    Pricing Cardpricing-card
  • Pricing Card Featured
    Pricing Card Featuredpricing-card-featured
  • Feature Card
    Feature Cardfeature-card
  • Product Screenshot Card
    Product Screenshot Cardproduct-screenshot-card
  • Testimonial Card
    Testimonial Cardtestimonial-card
  • Customer Logo Tile
    Customer Logo Tilecustomer-logo-tile
  • Type here…
    Text Inputtext-input
  • Type here…
    Text Input Focusedtext-input-focused
  • Pricing Tab Default
    Pricing Tab Defaultpricing-tab-default
  • Pricing Tab Selected
    Pricing Tab Selectedpricing-tab-selected
  • Cta Banner
    Cta Bannercta-banner
  • Changelog Row
    Changelog Rowchangelog-row
  • Status Badge
    Status Badgestatus-badge
  • Top Nav
    Top Navtop-nav
  • Footer
    Footerfooter

The system, in use

Linear's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.
Linear
Get started

Plan, build and ship in one place

Bring your team's work together, from the first idea to the final release.

Get startedBook a demo
LinearA
Active users12,489
Projects342
Tasks done8,921
Avg. response1.8h
ActivityLast 30 days

Linear design system FAQ

Linear's tokens, its components and how to use this DESIGN.md in your project.

Related reading

Specs, directories and component libraries that pair with this design system.

Use Linear in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Linear.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Linear's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

Overview

Linear's marketing canvas is the deepest dark surface in this collection — {colors.canvas} is "#010102", essentially pure black with a faint blue tint. On top sits a four-step surface ladder ({colors.surface-1} through {colors.surface-4}) for cards, panels, and lifted tiles, with hairline borders running from {colors.hairline} ("#23252a") up through {colors.hairline-strong} and {colors.hairline-tertiary}. Light gray text ({colors.ink} "#f7f8f8") carries the body and headlines.

The single chromatic accent is Linear lavender-blue {colors.primary} ("#5e6ad2") — used on the brand mark, focus rings, and the primary CTA button. A lighter hover state ({colors.primary-hover} "#828fff") and a focus-tinted variant ({colors.primary-focus} "#5e69d1") extend the same hue. Linear avoids saturated greens, oranges, reds, etc. on the marketing canvas — the only semantic color is {colors.semantic-success} ("#27a644") for status pills and the rare success indicator.

Display type runs Linear's custom sans (with SF Pro Display fallback) at weight 500-700 with negative letter-spacing scaling from -3.0px at 80px down to 0 at body. The body family is Linear's text cut, and a Linear Mono is reserved for code snippets in product screenshots.

The page rhythm is dense product screenshots — Linear's marketing leads with high-fidelity captures of the product UI (issue list, project view, dashboard) framed in {colors.surface-1} panels with {rounded.xl} 16px corners. The chrome is intentionally minimal so the app screenshots can do the heavy lifting.

Key Characteristics:

  • Dark-canvas marketing system — {colors.canvas} ("#010102") is the deepest dark in this collection.
  • Lavender-blue brand accent ({colors.primary} "#5e6ad2") — used scarcely on brand mark, focus, and the primary CTA.
  • Four-step surface ladder (canvas → surface-1 → surface-2 → surface-3 → surface-4) carries hierarchy without shadow.
  • Display tracking pulls aggressively negative (-3.0px at 80px); body holds at -0.05px.
  • Cards use {rounded.lg} 12px corners with 1px hairline borders — never pill, rarely 16px.
  • Product UI screenshots dominate the page. The marketing chrome is a dark frame for the app.
  • No second chromatic color. No atmospheric gradients. No spotlight cards.

Known Gaps

  • The four-step surface ladder values are extracted directly from Linear's --color-bg-level-3, --color-line-tint, etc. CSS variables; they are Linear's canonical surface spec.
  • Form-field error and validation styling is not visible on the inspected pages.
  • Light mode is not documented because the marketing site does not ship a light theme.
  • Linear's actual product UI uses a richer color-tag palette (red, orange, yellow, green, blue, purple) for issue priorities and project labels — those colors live in the in-product surfaces shown in mockups.
  • The custom display, text, and mono families are proprietary; an open-source substitute is acceptable.

More systems like this

Asana, Atlassian, ClickUp and 5 more in Project Management: each brand's colors, type and components in one file your AI agent builds from.

All 9 in Project Management

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro