Linear

Plan and build products with your team and AI agents

The style

A calm, dark product language. A near-black canvas with soft white text, headlines in medium-weight Inter set just slightly tight, and quiet grey supporting copy. Light pill buttons stand out against the dark, a muted indigo marks the brand, and panels float on faint hairline edges with a blurred, see-through navigation bar. It feels precise, fast and focused.

Colours

Brand#5e77d2
Buttons#e2e2e2
Highlight#53ac80
Background#090b0c
Text#f7f8f8

Click a colour to copy it.

Fonts

Inter

For headings

Inter

For everything else

Buttons

Get startedContinueCancel

44px pills: a light fill with dark label for the main action, a see-through pill with a hairline edge for the second.

Use this style in your project

Pick the way that suits you. The first one needs no design or coding knowledge.

With an AI tool

Your AI tool builds the page for you, in Linear’s style.

1. What are you making? (optional)

2. Open it in

For developers

Ready-made CSS variables, a Tailwind theme and design tokens, with light and dark modes.

See the code

Make it your own

Change the colours, fonts and shapes, and see the result straight away before you use it.

Customise

Files

The code, ready to copy

Every file says where the style came from.

tokens.css — Colours, fonts and sizes as CSS variables, with light and dark modes.

/* Indigo Night — design tokens generated by Markdown */
/* Derived from an analysis of linear.app; how different from the source: a little different (30/100). */
/* Inspired by, not a copy of, the source. Adapt before commercial use; no logos, imagery, copy or proprietary fonts are included. */

:root {
  color-scheme: dark;
  --color-background: #090b0c;
  --color-surface: #141516;
  --color-surface-muted: #1c1e1f;
  --color-text: #f7f8f8;
  --color-text-muted: #9d9e9e;
  --color-border: #23252a;
  --color-primary: #e2e2e2;
  --color-on-primary: #141210;
  --color-brand: #5e77d2;
  --color-on-brand: #141210;
  --color-accent: #53ac80;
  --color-success: #72ca9b;
  --color-warning: #e0a752;
  --color-danger: #cd7f7a;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-display: 4.5rem;
  --text-display-line-height: 1.1;
  --text-display-weight: 500;
  --text-display-tracking: -0.019em;
  --text-h1: 3.3125rem;
  --text-h1-line-height: 1.13;
  --text-h1-weight: 500;
  --text-h1-tracking: -0.015em;
  --text-h2: 2.5rem;
  --text-h2-line-height: 1.16;
  --text-h2-weight: 500;
  --text-h2-tracking: -0.012em;
  --text-h3: 1.8125rem;
  --text-h3-line-height: 1.22;
  --text-h3-weight: 500;
  --text-h3-tracking: -0.008em;
  --text-lead: 1.375rem;
  --text-lead-line-height: 1.5;
  --text-lead-weight: 400;
  --text-lead-tracking: -0.005em;
  --text-body: 1rem;
  --text-body-line-height: 1.6;
  --text-body-weight: 400;
  --text-body-tracking: 0em;
  --text-small: 0.75rem;
  --text-small-line-height: 1.5;
  --text-small-weight: 400;
  --text-small-tracking: 0.005em;
  --text-caption: 0.6875rem;
  --text-caption-line-height: 1.4;
  --text-caption-weight: 400;
  --text-caption-tracking: 0.01em;
  --text-label: 0.8125rem;
  --text-label-line-height: 1.3;
  --text-label-weight: 600;
  --text-label-tracking: 0.01em;
  --text-code: 0.875rem;
  --text-code-line-height: 1.55;
  --text-code-weight: 400;
  --text-code-tracking: 0em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-none: 0px;
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-xl: 23px;
  --radius-full: 9999px;
  --border-width: 1px;
  --shadow-sm: 0 1px 0 rgb(0 0 0 / 0.08);
  --shadow-md: 0 0 0 1px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 0 0 1px rgb(0 0 0 / 0.06), 0 10px 24px -6px rgb(0 0 0 / 0.2);
  --duration-fast: 90ms;
  --duration-base: 150ms;
  --duration-slow: 250ms;
  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --container: 1376px;
  --gutter: 24px;
  --button-radius: 9999px;
  --button-padding: 12px 20px;
  --input-radius: 8px;
  --input-height: 40px;
  --card-radius: 12px;
  --card-padding: 24px;
  --badge-radius: 9999px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-background: #f8f9fa;
    --color-surface: #fcfdfd;
    --color-surface-muted: #edeeef;
    --color-text: #161d1d;
    --color-text-muted: #676c6c;
    --color-border: #d8dadb;
    --color-primary: #737373;
    --color-on-primary: #ffffff;
    --color-brand: #5e77d2;
    --color-on-brand: #ffffff;
    --color-accent: #4c9e76;
    --color-success: #2f7e54;
    --color-warning: #93631a;
    --color-danger: #a3443e;
  }
}

[data-theme="light"] {
  color-scheme: light;
  --color-background: #f8f9fa;
  --color-surface: #fcfdfd;
  --color-surface-muted: #edeeef;
  --color-text: #161d1d;
  --color-text-muted: #676c6c;
  --color-border: #d8dadb;
  --color-primary: #737373;
  --color-on-primary: #ffffff;
  --color-brand: #5e77d2;
  --color-on-brand: #ffffff;
  --color-accent: #4c9e76;
  --color-success: #2f7e54;
  --color-warning: #93631a;
  --color-danger: #a3443e;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}

See every detail

Buttons

Inputs

Email address

Badges

New ActivePendingOverdue

Project

Quarterly field notes

Draft

A card groups one idea: a title, one line of support and a clear next step.

Updated 2h agoOpen project

Weekly digest is ready

Three new comments and one approval.

npm i @brandless/ui

Colour

Semantic roles for dark mode. Contrast is checked against WCAG AA as you edit.

Background
Surface
Surface muted
AA 18.5:1
Text
AA 7.3:1
Text muted
Border
AA 15.2:1
Primary
AA 14.4:1
On primary
Brand
Low 4.5:1
On brand
AA 7.1:1
Accent
AA 10.0:1
Success
AA 9.2:1
Warning
AA 6.5:1
Danger

Typography

Base 16px on a 1.352 modular scale. Only open-licence fonts are recommended.

display

Inter

Detected · open licence

body

Inter

Detected · open licence

mono

Ag
IBM Plex Mono

Open alternative to Berkeley Mono

display · 72px / 1.1 · 500 · -0.019em
The quiet grammar of form
h1 · 53px / 1.13 · 500 · -0.015em
The quiet grammar of form
h2 · 40px / 1.16 · 500 · -0.012em
The quiet grammar of form
h3 · 29px / 1.22 · 500 · -0.008em
The quiet grammar of form
lead · 22px / 1.5 · 400 · -0.005em
Readable text sets the pace of an interface.
body · 16px / 1.6 · 400 · 0em
Readable text sets the pace of an interface.
small · 12px / 1.5 · 400 · 0.005em
Readable text sets the pace of an interface.
caption · 11px / 1.4 · 400 · 0.01em
Readable text sets the pace of an interface.
label · 13px / 1.3 · 600 · 0.01em
Readable text sets the pace of an interface.
code · 14px / 1.55 · 400 · 0em
const tokens = await load();

Spacing

A 4px base unit. Use the scale for padding, gaps and section rhythm.

4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

Shape & surface

Floating chrome uses a blurred, semi-opaque surface over content; body surfaces stay opaque.

Radii

none
0px
sm
5px
md
9px
lg
14px
xl
23px
full
pill

Shadows & borders

shadow-sm

0 1px 0 rgb(0 0 0 / 0.08)

shadow-md

0 0 0 1px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.08)

shadow-lg

0 0 0 1px rgb(0 0 0 / 0.06), 0 10px 24px -6px rgb(0 0 0 / 0.2)

Borders: 1px hairline · Surfaces: translucent

Layout

1376px container · 12 columns · 24px gutters

Patterns

Split hero: message left, supporting visual or product frame right.
Twelve-column grid; content blocks usually span 4, 6 or 8 columns.
Full-bleed bands for feature sections, inner content capped at the container.
Reading text limited to roughly 65–72 characters per line.

Responsive principles

Below md, grids collapse to a single column and side gutters drop to 16px.
Type steps above h2 scale down one step on small screens.
Navigation collapses to a disclosure menu below lg.
Touch targets stay at least 44×44px on every breakpoint.

Motion

Durations and easing curves. Previews respect your reduced-motion setting.

fast
90ms
base
150ms
slow
250ms

ease-standard
ease-enter
ease-exit

Principles

Motion is brisk and functional — it confirms, it doesn't perform.
Animate opacity and transform only; avoid animating layout.
Respect prefers-reduced-motion by replacing movement with instant state changes or fades.

Linear, its logo and trademarks belong to their owner and are shown only to say where this style comes from. This is our own study of their public website — not made or endorsed by Linear. Use your own words and images.

New
Collect Vercel
Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.
Vercel
A cloud platform for building and shipping websites
New
Collect Granola
Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.
Granola
An AI notepad for back-to-back meetings
New
Collect Mercury
Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.
Mercury
Business banking for startups and growing companies

The style

Colours

Fonts

Buttons

Use this style in your project

With an AI tool

For developers

Make it your own

Quarterly field notes

Radii

Shadows & borders

Patterns

Responsive principles

Principles

More like Linear

Vercel

Granola

Mercury