Skip to content
shadcn.io

Linear Design System

Linear's design system as a DESIGN.md file. Lavender-blue #5e6ad2, Linear Display sans, 23 colors, 21 components. For React, Next.js, and AI tools.

Get ProDownload DESIGN.md

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP
Primary
#5e6ad2
Typeface
Linear Display
Shape
Mixed
Base radius
8px
Colors
23
Type tokens
13
Components
21
Spacing values
8

About

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

  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

linear.app

Live at linear.app

A snapshot of the brand in production. Scroll the frame to see the whole page.

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

Colors

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

Typography

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

Layout

Radii and spacing

8 corner radii and 8 spacing values. Shape language: mixed.

Radii

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

Spacing

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

Components

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

In use

The system, in use

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

Build something people actually use.

A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.

Get startedLearn more
Marketing heroHeadline, sub-copy, primary CTA — the universal homepage opener.

FAQ

Linear design system FAQ

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

Read next

Related reading

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

Use it

Use Linear in your project

One machine-readable file. Drop it into Claude, Cursor, 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.

Project Management

More systems like this

More DESIGN.md files in Project Management.

All 9 in Project Management

Pricing

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.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
  • Complete multi-page sites you can ship as they are.Templates: All 14 templates
  • React icons from every major library, installable with one command.React icons: 294k+ icons
  • Presets that restyle every block, in light and dark.Themes: All 59 themes
  • Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Lets your AI editor search, preview and install blocks for you.MCP server: High usage
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

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