Linear

graphite instrument panel after midnight

Productivity Dark dark minimal precise technical monochrome cool Built with Next.js, React

Linear feels like a precision tool shown in a dark room: near-black surfaces, cool off-white type and almost no colour, so the product UI does most of the talking. What sets it apart is restraint. Big, tightly tracked medium-weight headlines sit over dim grey copy, and a real app screenshot takes the place of illustration. Colour only shows up where it means something: an indigo toggle, a status dot, a single acid-lime testimonial card.

Technically it runs on Inter Variable at in-between weights (510 for headings, 590 for strong titles, 400 for body), with negative letter-spacing that grows with size (-1.584px at 72px). Surfaces step from #08090a to #0f1011 to #161718, and edges are hairlines of rgba(255,255,255,0.05–0.08) rather than solid greys. Buttons are 32–44px pills. Cards are flat with 8–12px corners and faint inset highlights. Layout is a wide 1436px frame with thin vertical column rules, generous section breaks, Berkeley Mono for code, and small 13–15px text throughout.

https://linear.app

Colors

Click a swatch to copy

Typography

display

Inter

510 · 590 · falls back to Inter Variable, SF Pro Display, -apple-system, system-ui, sans-serif

The variable font is set to 510 for all large headlines, never a round 500 or 600. Tracking tightens with size to about -0.022em; line-height is 1.0 on display sizes.
body

Inter

300 · 400 · 450 · 510 · 590 · falls back to Inter Variable, SF Pro Text, -apple-system, system-ui, sans-serif

Body copy defaults to 15px/1.6 with -0.165px tracking. UI labels use 510, not bold. The 300 weight appears only in chat-message mockups.
mono

Berkeley Mono

400 · falls back to JetBrains Mono, IBM Plex Mono, ui-monospace, monospace

Used for code diffs, inline code tokens (vehicle_state) and technical identifiers, at 14px/1.71.

Display

72px / 1

510 · -1.584px

Linear

H1 / Hero

64px / 1

510 · -1.408px

Linear

H2 / Section

48px / 1

510 · -1.056px

Linear

H3 / Card title

24px / 1.33

590 · -0.288px

Graphite instrument panel after midnight

Title

20px / 1.33

510 · -0.24px

The quick brown fox jumps over the lazy dog

Lead

18px / 1.6

400 · -0.165px

The quick brown fox jumps over the lazy dog

Body

15px / 1.6

400 · -0.165px

The quick brown fox jumps over the lazy dog

Small

14px / 1.5

400 · -0.182px

The quick brown fox jumps over the lazy dog

Caption / Button

13px / 1.5

510 · normal

The quick brown fox jumps over the lazy dog

Mono

14px / 1.71

400 · normal

The quick brown fox jumps over the lazy dog

Spacing & Shape

Spacing

Base unit: 4px
Density: comfortable
Container: 1436px (content column ≈1245px with ~77px side gutters at 1440)
Section gap: 96–112px vertical between major sections
Card padding: 16px (compact cards) to 24px (feature/testimonial cards); 32px inside large panels

2

4

6

8

12

16

20

24

32

48

64

96

Radius

Buttons, nav CTAs, toggles 9999px
Cards, docs tiles, testimonial blocks 8px
Product app frame / large panels 12px
Inner app cards and menus 9px
Label chips (Performance, iOS) 16px
Inline code, kbd, small icons 4px
Avatars and status dots 50%

Shadows

Glass edge Translucent secondary pill buttons ('Contact sales'): an inner top highlight plus a black outer ring

rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px

Pill lift Light primary pill buttons: a barely visible layered drop

rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px

Hairline ring Panel cards on #0f1011, paired with a 1px rgba(255,255,255,0.08) border

rgba(0, 0, 0, 0.2) 0px 0px 0px 1px

Inset well Recessed areas inside product mockups and inputs

rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset

Float Floating overlays such as the agent chat window over the app screenshot

rgba(0, 0, 0, 0.25) 0px 2px 32px 0px

Components

Live previews rendered from recipes

Linear ProductPricingChangelogDocs Get started

Buttons

Tags

New Productivity dark

Ghost nav link

Ghost nav link

Card

Everything in one ledger

Reconcile every account overnight and close the month in an afternoon instead of a fortnight.

Get started

Primary pill button — The only light-filled element in the nav, and the sole high-contrast CTA on each view. Pair it with a ghost 'Log in' link.
Secondary glass button — 44px tall. Sits beside a primary pill in closing CTAs ('Get started' / 'Contact sales').
Ghost nav link — 32px hit area. The active page is shown in #f7f8f8 with no underline or background.
Panel card — Used for app mockups and docs tiles. Docs tiles lighten to #161718 and split an icon area from a title and description block with a hairline.
Quiet card — Nearly invisible containers for secondary content. Pricing and customer grids often drop the box entirely and use 1px vertical column rules instead.
Highlight testimonial card — A single burst of colour on an otherwise monochrome page. Place it next to a #f8f8f9 light card of the same size.
Label chip — 24px tall. Often led by a 6–8px coloured status dot. Small tags like 'Opus 5' use a 4px radius with a hairline border.
Top navigation — Fixed. Logo on the left; links right-aligned with a thin vertical divider before 'Log in' and the primary pill.

Do / Don't

Set headlines in Inter at weight 510 with negative tracking that scales with size (-1.056px at 48px, -1.408px at 64px) and line-height 1.
Build depth with surface steps (#08090a → #0f1011 → #161718) and 1px rgba(255,255,255,0.05–0.08) hairlines, not drop shadows.
Make every button a 9999px pill; use #e5e5e6 with #08090a text for the one primary action per view.
Keep most copy small and muted: 15px/1.6 body in #8a8f98, with #f7f8f8 saved for titles and active states.
Show real product UI in dark panels as the main visual, cropped and overlapping.
Divide grid columns with thin vertical rules and let content float without boxes.
Use Berkeley Mono only for code and identifiers.

Don't add brand-colour gradients, glows or coloured backgrounds to page chrome; the page stays monochrome.
Don't use bold 700 weights or plain 500/600. Stick to the variable in-between weights 510 and 590.
Don't use pure black #000000 or pure white #ffffff for large surfaces or body text.
Don't use more than one saturated highlight per page; the lime #e4f222 card is a one-off accent, not a theme colour.
Don't centre marketing headlines. Left-align them to the content edge.
Don't give cards large radii (over 12px) or heavy shadows; corners stay at 8–12px and elevation stays subtle.

Screens

Linear – The system for product development — Linear – The system for product development /

Linear Customers — Linear Customers /customers

Pricing – Linear — Pricing – Linear /pricing

Linear Docs — Linear Docs /docs

Linear — Linear /login

Mobile view — Mobile 390×844

Mobile navigation open — Mobile navigation menu open

Linear — Design Reference

graphite instrument panel after midnight

Source: https://linear.app
Theme: dark
Category: Productivity
Mood: dark, minimal, precise, technical, monochrome, cool
Captured: 2026-09-13

Overview

Linear feels like a precision tool shown in a dark room: near-black surfaces, cool off-white type and almost no colour, so the product UI does most of the talking. What sets it apart is restraint. Big, tightly tracked medium-weight headlines sit over dim grey copy, and a real app screenshot takes the place of illustration. Colour only shows up where it means something: an indigo toggle, a status dot, a single acid-lime testimonial card.

Technically it runs on Inter Variable at in-between weights (510 for headings, 590 for strong titles, 400 for body), with negative letter-spacing that grows with size (-1.584px at 72px). Surfaces step from #08090a to #0f1011 to #161718, and edges are hairlines of rgba(255,255,255,0.05–0.08) rather than solid greys. Buttons are 32–44px pills. Cards are flat with 8–12px corners and faint inset highlights. Layout is a wide 1436px frame with thin vertical column rules, generous section breaks, Berkeley Mono for code, and small 13–15px text throughout.

Tokens — Colors

Name	Value	Token	Role
Void	`#08090a`	`--color-bg`	Page background on every marketing and docs page; also the text colour on the light primary button
Graphite Panel	`#0f1011`	`--color-surface`	App-frame and card surfaces, and the product screenshot shell; one step above the page
Slate Lift	`#161718`	`--color-surface-raised`	Raised elements inside panels: docs cards, selected sidebar rows, popovers
Frost	`#f7f8f8`	`--color-text`	Headlines, active nav items and primary body text
Mist	`#d0d6e0`	`--color-text-secondary`	Secondary text, card titles, chip labels and emphasised supporting copy
Pewter	`#8a8f98`	`--color-text-muted`	Default muted copy: hero subheads, nav links, feature descriptions, 'Watch video →' links
Ash	`#62666d`	`--color-text-subtle`	Tertiary labels: sidebar section headers (Workspace, Favorites), timestamps, footer fine print
Porcelain	`#e5e5e6`	`--color-primary`	Primary CTA pill fill ('Sign up', 'Get started') with #08090a text
Linear Indigo	`#6d78d5`	`--color-accent`	The only interactive accent: billing toggles, 'Continue with Google', agent badges; focus ring variant #5e69d1
Signal Lime	`#e4f222`	`--color-highlight`	Rare full-bleed highlight card (testimonial block) with dark text; used once per page at most
Merge Green	`#27a644`	`--color-success`	Success/completed status icons and added-line diff markers
Revert Red	`#f34e52`	`--color-danger`	Error/urgent status dots and removed-line diff markers

Semantic roles

Role	Value
background	`#08090a`
surface	`#0f1011`
surface raised	`#161718`
border	`rgba(255, 255, 255, 0.08)`
text	`#f7f8f8`
text muted	`#8a8f98`
primary	`#e5e5e6`
primary text	`#08090a`
accent	`#6d78d5`
success	`#27a644`
danger	`#f34e52`

Tokens — Typography

Display: Inter (510, 590) — fallbacks: Inter Variable, SF Pro Display, -apple-system, system-ui, sans-serif. The variable font is set to 510 for all large headlines, never a round 500 or 600. Tracking tightens with size to about -0.022em; line-height is 1.0 on display sizes.
Body: Inter (300, 400, 450, 510, 590) — fallbacks: Inter Variable, SF Pro Text, -apple-system, system-ui, sans-serif. Body copy defaults to 15px/1.6 with -0.165px tracking. UI labels use 510, not bold. The 300 weight appears only in chat-message mockups.
Mono: Berkeley Mono (400) — fallbacks: JetBrains Mono, IBM Plex Mono, ui-monospace, monospace. Used for code diffs, inline code tokens (vehicle_state) and technical identifiers, at 14px/1.71.

Role	Size	Line height	Weight	Letter spacing	Family
Display	72px	1	510	-1.584px	display
H1 / Hero	64px	1	510	-1.408px	display
H2 / Section	48px	1	510	-1.056px	display
H3 / Card title	24px	1.33	590	-0.288px	display
Title	20px	1.33	510	-0.24px	body
Lead	18px	1.6	400	-0.165px	body
Body	15px	1.6	400	-0.165px	body
Small	14px	1.5	400	-0.182px	body
Caption / Button	13px	1.5	510	normal	body
Mono	14px	1.71	400	normal	mono

Tokens — Spacing & Layout

Base unit: 4px
Density: comfortable
Container max width: 1436px (content column ≈1245px with ~77px side gutters at 1440)
Section gap: 96–112px vertical between major sections
Card padding: 16px (compact cards) to 24px (feature/testimonial cards); 32px inside large panels
Scale: 2px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px

Tokens — Radius

Element	Value
Buttons, nav CTAs, toggles	9999px
Cards, docs tiles, testimonial blocks	8px
Product app frame / large panels	12px
Inner app cards and menus	9px
Label chips (Performance, iOS)	16px
Inline code, kbd, small icons	4px
Avatars and status dots	50%

Tokens — Shadows

Name	Value	Usage
Glass edge	`rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px`	Translucent secondary pill buttons ('Contact sales'): an inner top highlight plus a black outer ring
Pill lift	`rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px`	Light primary pill buttons: a barely visible layered drop
Hairline ring	`rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`	Panel cards on #0f1011, paired with a 1px rgba(255,255,255,0.08) border
Inset well	`rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset`	Recessed areas inside product mockups and inputs
Float	`rgba(0, 0, 0, 0.25) 0px 2px 32px 0px`	Floating overlays such as the agent chat window over the app screenshot

Components

Primary pill button (button)

Property	Value
background	`#e5e5e6`
color	`#08090a`
border	`1px solid #e5e5e6`
radius	`9999px`
padding	`0 12px (height 32px); 0 20px at 44px height in page CTAs`
font size	`13px`
font weight	`510`
shadow	`Pill lift (layered 0–8px rgba(0,0,0,.01–.08))`
hover	`background #ffffff; border #ffffff`

The only light-filled element in the nav, and the sole high-contrast CTA on each view. Pair it with a ghost 'Log in' link.

Secondary glass button (button)

Property	Value
background	`rgba(255, 255, 255, 0.05)`
color	`#f7f8f8`
border	`none`
radius	`9999px`
padding	`0 20px`
font size	`16px`
font weight	`510`
shadow	`Glass edge (inset white 3–4% + 1px black 60% ring + 0 4px 4px rgba(0,0,0,.1))`
hover	`background rgba(255, 255, 255, 0.08)`

44px tall. Sits beside a primary pill in closing CTAs ('Get started' / 'Contact sales').

Ghost nav link (link)

Property	Value
background	`transparent`
color	`#8a8f98`
border	`none`
radius	`9999px`
padding	`0 12px`
font size	`13px`
font weight	`400`
shadow	`none`
hover	`color #f7f8f8`

32px hit area. The active page is shown in #f7f8f8 with no underline or background.

Panel card (card)

Property	Value
background	`#0f1011`
color	`#f7f8f8`
border	`1px solid rgba(255, 255, 255, 0.08)`
radius	`9px`
padding	`12px`
font size	`15px`
font weight	`400`
shadow	`rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
hover	`border-color rgba(255, 255, 255, 0.12)`

Used for app mockups and docs tiles. Docs tiles lighten to #161718 and split an icon area from a title and description block with a hairline.

Quiet card (card)

Property	Value
background	`rgba(255, 255, 255, 0.02)`
color	`#d0d6e0`
border	`1px solid rgba(255, 255, 255, 0.05)`
radius	`8px`
padding	`16px`
font size	`15px`
font weight	`400`
shadow	`none`
hover	`background rgba(255, 255, 255, 0.04)`

Nearly invisible containers for secondary content. Pricing and customer grids often drop the box entirely and use 1px vertical column rules instead.

Highlight testimonial card (card)

Property	Value
background	`#e4f222`
color	`#08090a`
border	`none`
radius	`8px`
padding	`24px`
font size	`24px`
font weight	`510`
shadow	`none`
hover	`none`

A single burst of colour on an otherwise monochrome page. Place it next to a #f8f8f9 light card of the same size.

Label chip (badge)

Property	Value
background	`transparent`
color	`#d0d6e0`
border	`1px solid #2e2e32`
radius	`16px`
padding	`0 11px`
font size	`12px`
font weight	`400`
shadow	`none`
hover	`border-color #3e3e44`

24px tall. Often led by a 6–8px coloured status dot. Small tags like 'Opus 5' use a 4px radius with a hairline border.

Top navigation (nav)

Property	Value
background	`rgba(0, 0, 0, 0) with backdrop-filter: blur(20px)`
color	`#8a8f98`
border	`border-bottom 1px solid rgba(255, 255, 255, 0.08)`
radius	`0`
padding	`0 ~77px, height 73px`
font size	`13px`
font weight	`400`
shadow	`none`
hover	`link color #f7f8f8`

Fixed. Logo on the left; links right-aligned with a thin vertical divider before 'Log in' and the primary pill.

Layout

A wide centred frame (1436px max, content ≈1245px) with left-aligned headlines rather than centred heroes. The hero is a two-line 64px headline, a muted one-line subhead with a right-aligned 'New · Loops →' link on the same baseline, then a full-width product screenshot in a 12px-radius panel. Feature sections use a split header: 48px title on the left, 15–18px muted paragraph on the right. Below that sits a wide mockup, then a row of small labelled feature links separated by hairline rules. Grids (customers, pricing) use 3–4 columns divided by 1px vertical rules instead of boxed cards. Docs uses a 232px left sidebar with chevron rows and a 4-up card grid.

Imagery

Mostly real product UI rendered in the dark theme: issue views, sidebars, diffs and agent chat panels, cropped and overlapped for depth. Supporting art is thin-line isometric wireframe drawings in grey on black. Customer stories use desaturated black-and-white photography or flat brand-colour panels (#4736fe, #8cc3f2 to lavender gradient) with white logos. There are no illustrations of people, no gradients on the page chrome and no stock imagery.

Motion

Understated and quick. Links and buttons change colour and background over about 150ms. Product mockups animate state changes such as agent typing, status moves and diff reveals, rather than decorative parallax. Sections fade and rise gently on scroll. The nav blurs content behind it rather than changing colour.

Responsive

On phones the nav keeps the logo, a muted 'Log in', the light 'Sign up' pill and a two-line hamburger; everything else collapses. The open menu is a full-screen dark overlay under the fixed header with a soft radial glow. It groups links under small #8a8f98 labels (System, Product, Resources) and sets each link large, about 28px at weight 510 in #f7f8f8, in a single left-aligned column; the hamburger becomes an X. The hero headline stays left-aligned and wraps to four lines at roughly 48px with tight leading. The subhead grows to about 20px, and the 'New · Loops →' link drops below it. The product screenshot is not scaled down: it bleeds off the right edge and is cropped. Side gutters shrink to about 18px, and multi-column grids stack to one column.

Do

Set headlines in Inter at weight 510 with negative tracking that scales with size (-1.056px at 48px, -1.408px at 64px) and line-height 1.
Build depth with surface steps (#08090a → #0f1011 → #161718) and 1px rgba(255,255,255,0.05–0.08) hairlines, not drop shadows.
Make every button a 9999px pill; use #e5e5e6 with #08090a text for the one primary action per view.
Keep most copy small and muted: 15px/1.6 body in #8a8f98, with #f7f8f8 saved for titles and active states.
Show real product UI in dark panels as the main visual, cropped and overlapping.
Divide grid columns with thin vertical rules and let content float without boxes.
Use Berkeley Mono only for code and identifiers.

Don't

Don't add brand-colour gradients, glows or coloured backgrounds to page chrome; the page stays monochrome.
Don't use bold 700 weights or plain 500/600. Stick to the variable in-between weights 510 and 590.
Don't use pure black #000000 or pure white #ffffff for large surfaces or body text.
Don't use more than one saturated highlight per page; the lime #e4f222 card is a one-off accent, not a theme colour.
Don't centre marketing headlines. Left-align them to the content edge.
Don't give cards large radii (over 12px) or heavy shadows; corners stay at 8–12px and elevation stays subtle.

Agent prompt

Build a dark, monochrome, precision-tool marketing UI in the style of Linear. Page background #08090a, panels #0f1011, raised tiles #161718, all edged with 1px rgba(255,255,255,0.08) hairlines instead of shadows. Text: #f7f8f8 for headings, #d0d6e0 secondary, #8a8f98 muted body and nav, #62666d tertiary labels. Type is Inter (variable) at weight 510 for headlines: 72px/1 with -1.584px tracking for display, 64px/1 with -1.408px for the hero, 48px/1 with -1.056px for sections. Titles use 590 at 24px/1.33, body 400 at 15px/1.6 with -0.165px tracking, buttons 13px at 510. Code uses Berkeley Mono 14px. Every button is a 9999px pill: primary #e5e5e6 fill with #08090a text at 32–44px tall; secondary rgba(255,255,255,0.05) with an inset white highlight and a black 1px ring. The nav is fixed, 73px tall, transparent with 20px backdrop blur and a hairline bottom border, with muted 13px links on the right. Cards use 8px radius (12px for the product app frame) and 12–24px padding. Grids are divided by thin vertical rules rather than boxes. Layout is a 1436px frame with left-aligned headlines, split title/paragraph section headers, 96–112px section gaps and a 4px spacing base. The hero visual is a real dark product screenshot that crops off-edge on mobile. Use #6d78d5 indigo only for toggles and focus, #27a644 and #f34e52 only for status, and at most one acid-lime #e4f222 highlight card per page. The tone is quiet, dense, exact and confident.

CSS custom properties

/* Linear — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #08090a; /* Page background on every marketing and docs page; also the text colour on the light primary button */
  --color-surface: #0f1011; /* App-frame and card surfaces, and the product screenshot shell; one step above the page */
  --color-surface-raised: #161718; /* Raised elements inside panels: docs cards, selected sidebar rows, popovers */
  --color-text: #f7f8f8; /* Headlines, active nav items and primary body text */
  --color-text-secondary: #d0d6e0; /* Secondary text, card titles, chip labels and emphasised supporting copy */
  --color-text-muted: #8a8f98; /* Default muted copy: hero subheads, nav links, feature descriptions, 'Watch video →' links */
  --color-text-subtle: #62666d; /* Tertiary labels: sidebar section headers (Workspace, Favorites), timestamps, footer fine print */
  --color-primary: #e5e5e6; /* Primary CTA pill fill ('Sign up', 'Get started') with #08090a text */
  --color-accent: #6d78d5; /* The only interactive accent: billing toggles, 'Continue with Google', agent badges; focus ring variant #5e69d1 */
  --color-highlight: #e4f222; /* Rare full-bleed highlight card (testimonial block) with dark text; used once per page at most */
  --color-success: #27a644; /* Success/completed status icons and added-line diff markers */
  --color-danger: #f34e52; /* Error/urgent status dots and removed-line diff markers */

  /* Semantic roles */
  --background: #08090a;
  --surface: #0f1011;
  --surface-raised: #161718;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f7f8f8;
  --text-muted: #8a8f98;
  --primary: #e5e5e6;
  --primary-text: #08090a;
  --accent: #6d78d5;
  --success: #27a644;
  --danger: #f34e52;

  /* Typography */
  --font-display: Inter, 'Inter Variable', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  --font-body: Inter, 'Inter Variable', 'SF Pro Text', -apple-system, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --text-display: 72px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.584px;
  --text-display--font-weight: 510;
  --text-h1-hero: 64px;
  --text-h1-hero--line-height: 1;
  --text-h1-hero--letter-spacing: -1.408px;
  --text-h1-hero--font-weight: 510;
  --text-h2-section: 48px;
  --text-h2-section--line-height: 1;
  --text-h2-section--letter-spacing: -1.056px;
  --text-h2-section--font-weight: 510;
  --text-h3-card-title: 24px;
  --text-h3-card-title--line-height: 1.33;
  --text-h3-card-title--letter-spacing: -0.288px;
  --text-h3-card-title--font-weight: 590;
  --text-title: 20px;
  --text-title--line-height: 1.33;
  --text-title--letter-spacing: -0.24px;
  --text-title--font-weight: 510;
  --text-lead: 18px;
  --text-lead--line-height: 1.6;
  --text-lead--letter-spacing: -0.165px;
  --text-lead--font-weight: 400;
  --text-body: 15px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: -0.165px;
  --text-body--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: -0.182px;
  --text-small--font-weight: 400;
  --text-caption-button: 13px;
  --text-caption-button--line-height: 1.5;
  --text-caption-button--letter-spacing: normal;
  --text-caption-button--font-weight: 510;
  --text-mono: 14px;
  --text-mono--line-height: 1.71;
  --text-mono--letter-spacing: normal;
  --text-mono--font-weight: 400;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 96px;
  --container: 1436px (content column ≈1245px with ~77px side gutters at 1440);
  --section-gap: 96–112px vertical between major sections;

  /* Radius */
  --radius-buttons-nav-ctas-toggles: 9999px;
  --radius-cards-docs-tiles-testimonial-blocks: 8px;
  --radius-product-app-frame-large-panels: 12px;
  --radius-inner-app-cards-and-menus: 9px;
  --radius-label-chips-performance-ios: 16px;
  --radius-inline-code-kbd-small-icons: 4px;
  --radius-avatars-and-status-dots: 50%;

  /* Shadows */
  --shadow-glass-edge: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;
  --shadow-pill-lift: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  --shadow-hairline-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-inset-well: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-float: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
}

Tailwind v4 theme

/* Linear — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #08090a;
  --color-surface: #0f1011;
  --color-surface-raised: #161718;
  --color-text: #f7f8f8;
  --color-text-secondary: #d0d6e0;
  --color-text-muted: #8a8f98;
  --color-text-subtle: #62666d;
  --color-primary: #e5e5e6;
  --color-accent: #6d78d5;
  --color-highlight: #e4f222;
  --color-success: #27a644;
  --color-danger: #f34e52;
  --color-background: #08090a;
  --color-surface: #0f1011;
  --color-surface-raised: #161718;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-text: #f7f8f8;
  --color-text-muted: #8a8f98;
  --color-primary: #e5e5e6;
  --color-primary-text: #08090a;
  --color-accent: #6d78d5;
  --color-success: #27a644;
  --color-danger: #f34e52;
  --font-display: Inter, 'Inter Variable', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  --font-body: Inter, 'Inter Variable', 'SF Pro Text', -apple-system, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --text-display: 72px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.584px;
  --text-display--font-weight: 510;
  --text-h1-hero: 64px;
  --text-h1-hero--line-height: 1;
  --text-h1-hero--letter-spacing: -1.408px;
  --text-h1-hero--font-weight: 510;
  --text-h2-section: 48px;
  --text-h2-section--line-height: 1;
  --text-h2-section--letter-spacing: -1.056px;
  --text-h2-section--font-weight: 510;
  --text-h3-card-title: 24px;
  --text-h3-card-title--line-height: 1.33;
  --text-h3-card-title--letter-spacing: -0.288px;
  --text-h3-card-title--font-weight: 590;
  --text-title: 20px;
  --text-title--line-height: 1.33;
  --text-title--letter-spacing: -0.24px;
  --text-title--font-weight: 510;
  --text-lead: 18px;
  --text-lead--line-height: 1.6;
  --text-lead--letter-spacing: -0.165px;
  --text-lead--font-weight: 400;
  --text-body: 15px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: -0.165px;
  --text-body--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: -0.182px;
  --text-small--font-weight: 400;
  --text-caption-button: 13px;
  --text-caption-button--line-height: 1.5;
  --text-caption-button--letter-spacing: normal;
  --text-caption-button--font-weight: 510;
  --text-mono: 14px;
  --text-mono--line-height: 1.71;
  --text-mono--letter-spacing: normal;
  --text-mono--font-weight: 400;
  --radius-buttons-nav-ctas-toggles: 9999px;
  --radius-cards-docs-tiles-testimonial-blocks: 8px;
  --radius-product-app-frame-large-panels: 12px;
  --radius-inner-app-cards-and-menus: 9px;
  --radius-label-chips-performance-ios: 16px;
  --radius-inline-code-kbd-small-icons: 4px;
  --radius-avatars-and-status-dots: 50%;
  --shadow-glass-edge: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;
  --shadow-pill-lift: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  --shadow-hairline-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-inset-well: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-float: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
  --container-site: 1436px (content column ≈1245px with ~77px side gutters at 1440);
}

Linear — Style Reference

graphite instrument panel after midnight

Theme: dark · Mood: dark, minimal, precise, technical, monochrome, cool

Linear feels like a precision tool shown in a dark room: near-black surfaces, cool off-white type and almost no colour, so the product UI does most of the talking. What sets it apart is restraint. Big, tightly tracked medium-weight headlines sit over dim grey copy, and a real app screenshot takes the place of illustration. Colour only shows up where it means something: an indigo toggle, a status dot, a single acid-lime testimonial card.

Tokens — Colors

Name	Value	Token	Role
Void	`#08090a`	`--color-bg`	Page background on every marketing and docs page; also the text colour on the light primary button
Graphite Panel	`#0f1011`	`--color-surface`	App-frame and card surfaces, and the product screenshot shell; one step above the page
Slate Lift	`#161718`	`--color-surface-raised`	Raised elements inside panels: docs cards, selected sidebar rows, popovers
Frost	`#f7f8f8`	`--color-text`	Headlines, active nav items and primary body text
Mist	`#d0d6e0`	`--color-text-secondary`	Secondary text, card titles, chip labels and emphasised supporting copy
Pewter	`#8a8f98`	`--color-text-muted`	Default muted copy: hero subheads, nav links, feature descriptions, 'Watch video →' links
Ash	`#62666d`	`--color-text-subtle`	Tertiary labels: sidebar section headers (Workspace, Favorites), timestamps, footer fine print
Porcelain	`#e5e5e6`	`--color-primary`	Primary CTA pill fill ('Sign up', 'Get started') with #08090a text
Linear Indigo	`#6d78d5`	`--color-accent`	The only interactive accent: billing toggles, 'Continue with Google', agent badges; focus ring variant #5e69d1
Signal Lime	`#e4f222`	`--color-highlight`	Rare full-bleed highlight card (testimonial block) with dark text; used once per page at most
Merge Green	`#27a644`	`--color-success`	Success/completed status icons and added-line diff markers
Revert Red	`#f34e52`	`--color-danger`	Error/urgent status dots and removed-line diff markers

Tokens — Typography

Display: Inter (Inter Variable, SF Pro Display, -apple-system, system-ui, sans-serif) — weights 510/590
Body: Inter (Inter Variable, SF Pro Text, -apple-system, system-ui, sans-serif) — weights 300/400/450/510/590
Mono: Berkeley Mono (JetBrains Mono, IBM Plex Mono, ui-monospace, monospace) — weights 400

Tokens — Radius

Element	Value
Buttons, nav CTAs, toggles	`9999px`
Cards, docs tiles, testimonial blocks	`8px`
Product app frame / large panels	`12px`
Inner app cards and menus	`9px`
Label chips (Performance, iOS)	`16px`
Inline code, kbd, small icons	`4px`
Avatars and status dots	`50%`

Do

Set headlines in Inter at weight 510 with negative tracking that scales with size (-1.056px at 48px, -1.408px at 64px) and line-height 1.
Build depth with surface steps (#08090a → #0f1011 → #161718) and 1px rgba(255,255,255,0.05–0.08) hairlines, not drop shadows.
Make every button a 9999px pill; use #e5e5e6 with #08090a text for the one primary action per view.
Keep most copy small and muted: 15px/1.6 body in #8a8f98, with #f7f8f8 saved for titles and active states.
Show real product UI in dark panels as the main visual, cropped and overlapping.
Divide grid columns with thin vertical rules and let content float without boxes.
Use Berkeley Mono only for code and identifiers.

Don't

Don't add brand-colour gradients, glows or coloured backgrounds to page chrome; the page stays monochrome.
Don't use bold 700 weights or plain 500/600. Stick to the variable in-between weights 510 and 590.
Don't use pure black #000000 or pure white #ffffff for large surfaces or body text.
Don't use more than one saturated highlight per page; the lime #e4f222 card is a one-off accent, not a theme colour.
Don't centre marketing headlines. Left-align them to the content edge.
Don't give cards large radii (over 12px) or heavy shadows; corners stay at 8–12px and elevation stays subtle.

/* Linear — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #08090a;
  --color-surface: #0f1011;
  --color-surface-raised: #161718;
  --color-text: #f7f8f8;
  --color-text-secondary: #d0d6e0;
  --color-text-muted: #8a8f98;
  --color-text-subtle: #62666d;
  --color-primary: #e5e5e6;
  --color-accent: #6d78d5;
  --color-highlight: #e4f222;
  --color-success: #27a644;
  --color-danger: #f34e52;
  --color-background: #08090a;
  --color-surface: #0f1011;
  --color-surface-raised: #161718;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-text: #f7f8f8;
  --color-text-muted: #8a8f98;
  --color-primary: #e5e5e6;
  --color-primary-text: #08090a;
  --color-accent: #6d78d5;
  --color-success: #27a644;
  --color-danger: #f34e52;
  --font-display: Inter, 'Inter Variable', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  --font-body: Inter, 'Inter Variable', 'SF Pro Text', -apple-system, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --text-display: 72px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.584px;
  --text-display--font-weight: 510;
  --text-h1-hero: 64px;
  --text-h1-hero--line-height: 1;
  --text-h1-hero--letter-spacing: -1.408px;
  --text-h1-hero--font-weight: 510;
  --text-h2-section: 48px;
  --text-h2-section--line-height: 1;
  --text-h2-section--letter-spacing: -1.056px;
  --text-h2-section--font-weight: 510;
  --text-h3-card-title: 24px;
  --text-h3-card-title--line-height: 1.33;
  --text-h3-card-title--letter-spacing: -0.288px;
  --text-h3-card-title--font-weight: 590;
  --text-title: 20px;
  --text-title--line-height: 1.33;
  --text-title--letter-spacing: -0.24px;
  --text-title--font-weight: 510;
  --text-lead: 18px;
  --text-lead--line-height: 1.6;
  --text-lead--letter-spacing: -0.165px;
  --text-lead--font-weight: 400;
  --text-body: 15px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: -0.165px;
  --text-body--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: -0.182px;
  --text-small--font-weight: 400;
  --text-caption-button: 13px;
  --text-caption-button--line-height: 1.5;
  --text-caption-button--letter-spacing: normal;
  --text-caption-button--font-weight: 510;
  --text-mono: 14px;
  --text-mono--line-height: 1.71;
  --text-mono--letter-spacing: normal;
  --text-mono--font-weight: 400;
  --radius-buttons-nav-ctas-toggles: 9999px;
  --radius-cards-docs-tiles-testimonial-blocks: 8px;
  --radius-product-app-frame-large-panels: 12px;
  --radius-inner-app-cards-and-menus: 9px;
  --radius-label-chips-performance-ios: 16px;
  --radius-inline-code-kbd-small-icons: 4px;
  --radius-avatars-and-status-dots: 50%;
  --shadow-glass-edge: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;
  --shadow-pill-lift: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  --shadow-hairline-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-inset-well: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-float: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
  --container-site: 1436px (content column ≈1245px with ~77px side gutters at 1440);
}

/* Linear — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #08090a; /* Page background on every marketing and docs page; also the text colour on the light primary button */
  --color-surface: #0f1011; /* App-frame and card surfaces, and the product screenshot shell; one step above the page */
  --color-surface-raised: #161718; /* Raised elements inside panels: docs cards, selected sidebar rows, popovers */
  --color-text: #f7f8f8; /* Headlines, active nav items and primary body text */
  --color-text-secondary: #d0d6e0; /* Secondary text, card titles, chip labels and emphasised supporting copy */
  --color-text-muted: #8a8f98; /* Default muted copy: hero subheads, nav links, feature descriptions, 'Watch video →' links */
  --color-text-subtle: #62666d; /* Tertiary labels: sidebar section headers (Workspace, Favorites), timestamps, footer fine print */
  --color-primary: #e5e5e6; /* Primary CTA pill fill ('Sign up', 'Get started') with #08090a text */
  --color-accent: #6d78d5; /* The only interactive accent: billing toggles, 'Continue with Google', agent badges; focus ring variant #5e69d1 */
  --color-highlight: #e4f222; /* Rare full-bleed highlight card (testimonial block) with dark text; used once per page at most */
  --color-success: #27a644; /* Success/completed status icons and added-line diff markers */
  --color-danger: #f34e52; /* Error/urgent status dots and removed-line diff markers */

  /* Semantic roles */
  --background: #08090a;
  --surface: #0f1011;
  --surface-raised: #161718;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f7f8f8;
  --text-muted: #8a8f98;
  --primary: #e5e5e6;
  --primary-text: #08090a;
  --accent: #6d78d5;
  --success: #27a644;
  --danger: #f34e52;

  /* Typography */
  --font-display: Inter, 'Inter Variable', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  --font-body: Inter, 'Inter Variable', 'SF Pro Text', -apple-system, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --text-display: 72px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.584px;
  --text-display--font-weight: 510;
  --text-h1-hero: 64px;
  --text-h1-hero--line-height: 1;
  --text-h1-hero--letter-spacing: -1.408px;
  --text-h1-hero--font-weight: 510;
  --text-h2-section: 48px;
  --text-h2-section--line-height: 1;
  --text-h2-section--letter-spacing: -1.056px;
  --text-h2-section--font-weight: 510;
  --text-h3-card-title: 24px;
  --text-h3-card-title--line-height: 1.33;
  --text-h3-card-title--letter-spacing: -0.288px;
  --text-h3-card-title--font-weight: 590;
  --text-title: 20px;
  --text-title--line-height: 1.33;
  --text-title--letter-spacing: -0.24px;
  --text-title--font-weight: 510;
  --text-lead: 18px;
  --text-lead--line-height: 1.6;
  --text-lead--letter-spacing: -0.165px;
  --text-lead--font-weight: 400;
  --text-body: 15px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: -0.165px;
  --text-body--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: -0.182px;
  --text-small--font-weight: 400;
  --text-caption-button: 13px;
  --text-caption-button--line-height: 1.5;
  --text-caption-button--letter-spacing: normal;
  --text-caption-button--font-weight: 510;
  --text-mono: 14px;
  --text-mono--line-height: 1.71;
  --text-mono--letter-spacing: normal;
  --text-mono--font-weight: 400;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 96px;
  --container: 1436px (content column ≈1245px with ~77px side gutters at 1440);
  --section-gap: 96–112px vertical between major sections;

  /* Radius */
  --radius-buttons-nav-ctas-toggles: 9999px;
  --radius-cards-docs-tiles-testimonial-blocks: 8px;
  --radius-product-app-frame-large-panels: 12px;
  --radius-inner-app-cards-and-menus: 9px;
  --radius-label-chips-performance-ios: 16px;
  --radius-inline-code-kbd-small-icons: 4px;
  --radius-avatars-and-status-dots: 50%;

  /* Shadows */
  --shadow-glass-edge: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;
  --shadow-pill-lift: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  --shadow-hairline-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-inset-well: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-float: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
}

{
  "$name": "Linear",
  "$source": "https://linear.app",
  "$theme": "dark",
  "$generated": "inspiration library",
  "color": {
    "bg": {
      "$type": "color",
      "$value": "#08090a",
      "$description": "Page background on every marketing and docs page; also the text colour on the light primary button"
    },
    "surface": {
      "$type": "color",
      "$value": "#0f1011",
      "$description": "App-frame and card surfaces, and the product screenshot shell; one step above the page"
    },
    "surface-raised": {
      "$type": "color",
      "$value": "#161718",
      "$description": "Raised elements inside panels: docs cards, selected sidebar rows, popovers"
    },
    "text": {
      "$type": "color",
      "$value": "#f7f8f8",
      "$description": "Headlines, active nav items and primary body text"
    },
    "text-secondary": {
      "$type": "color",
      "$value": "#d0d6e0",
      "$description": "Secondary text, card titles, chip labels and emphasised supporting copy"
    },
    "text-muted": {
      "$type": "color",
      "$value": "#8a8f98",
      "$description": "Default muted copy: hero subheads, nav links, feature descriptions, 'Watch video →' links"
    },
    "text-subtle": {
      "$type": "color",
      "$value": "#62666d",
      "$description": "Tertiary labels: sidebar section headers (Workspace, Favorites), timestamps, footer fine print"
    },
    "primary": {
      "$type": "color",
      "$value": "#e5e5e6",
      "$description": "Primary CTA pill fill ('Sign up', 'Get started') with #08090a text"
    },
    "accent": {
      "$type": "color",
      "$value": "#6d78d5",
      "$description": "The only interactive accent: billing toggles, 'Continue with Google', agent badges; focus ring variant #5e69d1"
    },
    "highlight": {
      "$type": "color",
      "$value": "#e4f222",
      "$description": "Rare full-bleed highlight card (testimonial block) with dark text; used once per page at most"
    },
    "success": {
      "$type": "color",
      "$value": "#27a644",
      "$description": "Success/completed status icons and added-line diff markers"
    },
    "danger": {
      "$type": "color",
      "$value": "#f34e52",
      "$description": "Error/urgent status dots and removed-line diff markers"
    }
  },
  "role": {
    "background": {
      "$type": "color",
      "$value": "#08090a"
    },
    "surface": {
      "$type": "color",
      "$value": "#0f1011"
    },
    "surface_raised": {
      "$type": "color",
      "$value": "#161718"
    },
    "border": {
      "$type": "color",
      "$value": "rgba(255, 255, 255, 0.08)"
    },
    "text": {
      "$type": "color",
      "$value": "#f7f8f8"
    },
    "text_muted": {
      "$type": "color",
      "$value": "#8a8f98"
    },
    "primary": {
      "$type": "color",
      "$value": "#e5e5e6"
    },
    "primary_text": {
      "$type": "color",
      "$value": "#08090a"
    },
    "accent": {
      "$type": "color",
      "$value": "#6d78d5"
    },
    "success": {
      "$type": "color",
      "$value": "#27a644"
    },
    "danger": {
      "$type": "color",
      "$value": "#f34e52"
    }
  },
  "fontFamily": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Inter Variable",
        "SF Pro Display",
        "-apple-system",
        "system-ui",
        "sans-serif"
      ],
      "$description": "The variable font is set to 510 for all large headlines, never a round 500 or 600. Tracking tightens with size to about -0.022em; line-height is 1.0 on display sizes."
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Inter Variable",
        "SF Pro Text",
        "-apple-system",
        "system-ui",
        "sans-serif"
      ],
      "$description": "Body copy defaults to 15px/1.6 with -0.165px tracking. UI labels use 510, not bold. The 300 weight appears only in chat-message mockups."
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Berkeley Mono",
        "JetBrains Mono",
        "IBM Plex Mono",
        "ui-monospace",
        "monospace"
      ],
      "$description": "Used for code diffs, inline code tokens (vehicle_state) and technical identifiers, at 14px/1.71."
    }
  },
  "typography": {
    "display": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "72px",
        "lineHeight": "1",
        "fontWeight": 510,
        "letterSpacing": "-1.584px"
      }
    },
    "h1-hero": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "64px",
        "lineHeight": "1",
        "fontWeight": 510,
        "letterSpacing": "-1.408px"
      }
    },
    "h2-section": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "48px",
        "lineHeight": "1",
        "fontWeight": 510,
        "letterSpacing": "-1.056px"
      }
    },
    "h3-card-title": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "24px",
        "lineHeight": "1.33",
        "fontWeight": 590,
        "letterSpacing": "-0.288px"
      }
    },
    "title": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "20px",
        "lineHeight": "1.33",
        "fontWeight": 510,
        "letterSpacing": "-0.24px"
      }
    },
    "lead": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "18px",
        "lineHeight": "1.6",
        "fontWeight": 400,
        "letterSpacing": "-0.165px"
      }
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "15px",
        "lineHeight": "1.6",
        "fontWeight": 400,
        "letterSpacing": "-0.165px"
      }
    },
    "small": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "14px",
        "lineHeight": "1.5",
        "fontWeight": 400,
        "letterSpacing": "-0.182px"
      }
    },
    "caption-button": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "13px",
        "lineHeight": "1.5",
        "fontWeight": 510,
        "letterSpacing": "normal"
      }
    },
    "mono": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.mono}",
        "fontSize": "14px",
        "lineHeight": "1.71",
        "fontWeight": 400,
        "letterSpacing": "normal"
      }
    }
  },
  "spacing": {
    "1": {
      "$type": "dimension",
      "$value": "2px"
    },
    "2": {
      "$type": "dimension",
      "$value": "4px"
    },
    "3": {
      "$type": "dimension",
      "$value": "6px"
    },
    "4": {
      "$type": "dimension",
      "$value": "8px"
    },
    "5": {
      "$type": "dimension",
      "$value": "12px"
    },
    "6": {
      "$type": "dimension",
      "$value": "16px"
    },
    "7": {
      "$type": "dimension",
      "$value": "20px"
    },
    "8": {
      "$type": "dimension",
      "$value": "24px"
    },
    "9": {
      "$type": "dimension",
      "$value": "32px"
    },
    "10": {
      "$type": "dimension",
      "$value": "48px"
    },
    "11": {
      "$type": "dimension",
      "$value": "64px"
    },
    "12": {
      "$type": "dimension",
      "$value": "96px"
    }
  },
  "radius": {
    "buttons-nav-ctas-toggles": {
      "$type": "dimension",
      "$value": "9999px"
    },
    "cards-docs-tiles-testimonial-blocks": {
      "$type": "dimension",
      "$value": "8px"
    },
    "product-app-frame-large-panels": {
      "$type": "dimension",
      "$value": "12px"
    },
    "inner-app-cards-and-menus": {
      "$type": "dimension",
      "$value": "9px"
    },
    "label-chips-performance-ios": {
      "$type": "dimension",
      "$value": "16px"
    },
    "inline-code-kbd-small-icons": {
      "$type": "dimension",
      "$value": "4px"
    },
    "avatars-and-status-dots": {
      "$type": "dimension",
      "$value": "50%"
    }
  },
  "shadow": {
    "glass-edge": {
      "$type": "shadow",
      "$value": "rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px",
      "$description": "Translucent secondary pill buttons ('Contact sales'): an inner top highlight plus a black outer ring"
    },
    "pill-lift": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px",
      "$description": "Light primary pill buttons: a barely visible layered drop"
    },
    "hairline-ring": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.2) 0px 0px 0px 1px",
      "$description": "Panel cards on #0f1011, paired with a 1px rgba(255,255,255,0.08) border"
    },
    "inset-well": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset",
      "$description": "Recessed areas inside product mockups and inputs"
    },
    "float": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.25) 0px 2px 32px 0px",
      "$description": "Floating overlays such as the agent chat window over the app screenshot"
    }
  },
  "component": {
    "primary-pill-button": {
      "kind": "button",
      "background": "#e5e5e6",
      "color": "#08090a",
      "border": "1px solid #e5e5e6",
      "radius": "9999px",
      "padding": "0 12px (height 32px); 0 20px at 44px height in page CTAs",
      "font_size": "13px",
      "font_weight": 510,
      "shadow": "Pill lift (layered 0–8px rgba(0,0,0,.01–.08))",
      "hover": "background #ffffff; border #ffffff",
      "notes": "The only light-filled element in the nav, and the sole high-contrast CTA on each view. Pair it with a ghost 'Log in' link."
    },
    "secondary-glass-button": {
      "kind": "button",
      "background": "rgba(255, 255, 255, 0.05)",
      "color": "#f7f8f8",
      "border": "none",
      "radius": "9999px",
      "padding": "0 20px",
      "font_size": "16px",
      "font_weight": 510,
      "shadow": "Glass edge (inset white 3–4% + 1px black 60% ring + 0 4px 4px rgba(0,0,0,.1))",
      "hover": "background rgba(255, 255, 255, 0.08)",
      "notes": "44px tall. Sits beside a primary pill in closing CTAs ('Get started' / 'Contact sales')."
    },
    "ghost-nav-link": {
      "kind": "link",
      "background": "transparent",
      "color": "#8a8f98",
      "border": "none",
      "radius": "9999px",
      "padding": "0 12px",
      "font_size": "13px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "color #f7f8f8",
      "notes": "32px hit area. The active page is shown in #f7f8f8 with no underline or background."
    },
    "panel-card": {
      "kind": "card",
      "background": "#0f1011",
      "color": "#f7f8f8",
      "border": "1px solid rgba(255, 255, 255, 0.08)",
      "radius": "9px",
      "padding": "12px",
      "font_size": "15px",
      "font_weight": 400,
      "shadow": "rgba(0, 0, 0, 0.2) 0px 0px 0px 1px",
      "hover": "border-color rgba(255, 255, 255, 0.12)",
      "notes": "Used for app mockups and docs tiles. Docs tiles lighten to #161718 and split an icon area from a title and description block with a hairline."
    },
    "quiet-card": {
      "kind": "card",
      "background": "rgba(255, 255, 255, 0.02)",
      "color": "#d0d6e0",
      "border": "1px solid rgba(255, 255, 255, 0.05)",
      "radius": "8px",
      "padding": "16px",
      "font_size": "15px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "background rgba(255, 255, 255, 0.04)",
      "notes": "Nearly invisible containers for secondary content. Pricing and customer grids often drop the box entirely and use 1px vertical column rules instead."
    },
    "highlight-testimonial-card": {
      "kind": "card",
      "background": "#e4f222",
      "color": "#08090a",
      "border": "none",
      "radius": "8px",
      "padding": "24px",
      "font_size": "24px",
      "font_weight": 510,
      "shadow": "none",
      "hover": "none",
      "notes": "A single burst of colour on an otherwise monochrome page. Place it next to a #f8f8f9 light card of the same size."
    },
    "label-chip": {
      "kind": "badge",
      "background": "transparent",
      "color": "#d0d6e0",
      "border": "1px solid #2e2e32",
      "radius": "16px",
      "padding": "0 11px",
      "font_size": "12px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "border-color #3e3e44",
      "notes": "24px tall. Often led by a 6–8px coloured status dot. Small tags like 'Opus 5' use a 4px radius with a hairline border."
    },
    "top-navigation": {
      "kind": "nav",
      "background": "rgba(0, 0, 0, 0) with backdrop-filter: blur(20px)",
      "color": "#8a8f98",
      "border": "border-bottom 1px solid rgba(255, 255, 255, 0.08)",
      "radius": "0",
      "padding": "0 ~77px, height 73px",
      "font_size": "13px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "link color #f7f8f8",
      "notes": "Fixed. Logo on the left; links right-aligned with a thin vertical divider before 'Log in' and the primary pill."
    }
  }
}

# Linear — Design Reference
> graphite instrument panel after midnight

**Source:** https://linear.app  
**Theme:** dark  
**Category:** Productivity  
**Mood:** dark, minimal, precise, technical, monochrome, cool  
**Captured:** 2026-09-13

## Overview

Linear feels like a precision tool shown in a dark room: near-black surfaces, cool off-white type and almost no colour, so the product UI does most of the talking. What sets it apart is restraint. Big, tightly tracked medium-weight headlines sit over dim grey copy, and a real app screenshot takes the place of illustration. Colour only shows up where it means something: an indigo toggle, a status dot, a single acid-lime testimonial card.

Technically it runs on Inter Variable at in-between weights (510 for headings, 590 for strong titles, 400 for body), with negative letter-spacing that grows with size (-1.584px at 72px). Surfaces step from #08090a to #0f1011 to #161718, and edges are hairlines of rgba(255,255,255,0.05–0.08) rather than solid greys. Buttons are 32–44px pills. Cards are flat with 8–12px corners and faint inset highlights. Layout is a wide 1436px frame with thin vertical column rules, generous section breaks, Berkeley Mono for code, and small 13–15px text throughout.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Void | `#08090a` | `--color-bg` | Page background on every marketing and docs page; also the text colour on the light primary button |
| Graphite Panel | `#0f1011` | `--color-surface` | App-frame and card surfaces, and the product screenshot shell; one step above the page |
| Slate Lift | `#161718` | `--color-surface-raised` | Raised elements inside panels: docs cards, selected sidebar rows, popovers |
| Frost | `#f7f8f8` | `--color-text` | Headlines, active nav items and primary body text |
| Mist | `#d0d6e0` | `--color-text-secondary` | Secondary text, card titles, chip labels and emphasised supporting copy |
| Pewter | `#8a8f98` | `--color-text-muted` | Default muted copy: hero subheads, nav links, feature descriptions, 'Watch video →' links |
| Ash | `#62666d` | `--color-text-subtle` | Tertiary labels: sidebar section headers (Workspace, Favorites), timestamps, footer fine print |
| Porcelain | `#e5e5e6` | `--color-primary` | Primary CTA pill fill ('Sign up', 'Get started') with #08090a text |
| Linear Indigo | `#6d78d5` | `--color-accent` | The only interactive accent: billing toggles, 'Continue with Google', agent badges; focus ring variant #5e69d1 |
| Signal Lime | `#e4f222` | `--color-highlight` | Rare full-bleed highlight card (testimonial block) with dark text; used once per page at most |
| Merge Green | `#27a644` | `--color-success` | Success/completed status icons and added-line diff markers |
| Revert Red | `#f34e52` | `--color-danger` | Error/urgent status dots and removed-line diff markers |

### Semantic roles

| Role | Value |
|---|---|
| background | `#08090a` |
| surface | `#0f1011` |
| surface raised | `#161718` |
| border | `rgba(255, 255, 255, 0.08)` |
| text | `#f7f8f8` |
| text muted | `#8a8f98` |
| primary | `#e5e5e6` |
| primary text | `#08090a` |
| accent | `#6d78d5` |
| success | `#27a644` |
| danger | `#f34e52` |

## Tokens — Typography

- **Display:** Inter (510, 590) — fallbacks: Inter Variable, SF Pro Display, -apple-system, system-ui, sans-serif. The variable font is set to 510 for all large headlines, never a round 500 or 600. Tracking tightens with size to about -0.022em; line-height is 1.0 on display sizes.
- **Body:** Inter (300, 400, 450, 510, 590) — fallbacks: Inter Variable, SF Pro Text, -apple-system, system-ui, sans-serif. Body copy defaults to 15px/1.6 with -0.165px tracking. UI labels use 510, not bold. The 300 weight appears only in chat-message mockups.
- **Mono:** Berkeley Mono (400) — fallbacks: JetBrains Mono, IBM Plex Mono, ui-monospace, monospace. Used for code diffs, inline code tokens (vehicle_state) and technical identifiers, at 14px/1.71.

| Role | Size | Line height | Weight | Letter spacing | Family |
|---|---|---|---|---|---|
| Display | 72px | 1 | 510 | -1.584px | display |
| H1 / Hero | 64px | 1 | 510 | -1.408px | display |
| H2 / Section | 48px | 1 | 510 | -1.056px | display |
| H3 / Card title | 24px | 1.33 | 590 | -0.288px | display |
| Title | 20px | 1.33 | 510 | -0.24px | body |
| Lead | 18px | 1.6 | 400 | -0.165px | body |
| Body | 15px | 1.6 | 400 | -0.165px | body |
| Small | 14px | 1.5 | 400 | -0.182px | body |
| Caption / Button | 13px | 1.5 | 510 | normal | body |
| Mono | 14px | 1.71 | 400 | normal | mono |

## Tokens — Spacing & Layout

- **Base unit:** 4px
- **Density:** comfortable
- **Container max width:** 1436px (content column ≈1245px with ~77px side gutters at 1440)
- **Section gap:** 96–112px vertical between major sections
- **Card padding:** 16px (compact cards) to 24px (feature/testimonial cards); 32px inside large panels
- **Scale:** 2px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px

## Tokens — Radius

| Element | Value |
|---|---|
| Buttons, nav CTAs, toggles | 9999px |
| Cards, docs tiles, testimonial blocks | 8px |
| Product app frame / large panels | 12px |
| Inner app cards and menus | 9px |
| Label chips (Performance, iOS) | 16px |
| Inline code, kbd, small icons | 4px |
| Avatars and status dots | 50% |

## Tokens — Shadows

| Name | Value | Usage |
|---|---|---|
| Glass edge | `rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px` | Translucent secondary pill buttons ('Contact sales'): an inner top highlight plus a black outer ring |
| Pill lift | `rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px` | Light primary pill buttons: a barely visible layered drop |
| Hairline ring | `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px` | Panel cards on #0f1011, paired with a 1px rgba(255,255,255,0.08) border |
| Inset well | `rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset` | Recessed areas inside product mockups and inputs |
| Float | `rgba(0, 0, 0, 0.25) 0px 2px 32px 0px` | Floating overlays such as the agent chat window over the app screenshot |

## Components

### Primary pill button (button)

| Property | Value |
|---|---|
| background | `#e5e5e6` |
| color | `#08090a` |
| border | `1px solid #e5e5e6` |
| radius | `9999px` |
| padding | `0 12px (height 32px); 0 20px at 44px height in page CTAs` |
| font size | `13px` |
| font weight | `510` |
| shadow | `Pill lift (layered 0–8px rgba(0,0,0,.01–.08))` |
| hover | `background #ffffff; border #ffffff` |

The only light-filled element in the nav, and the sole high-contrast CTA on each view. Pair it with a ghost 'Log in' link.

### Secondary glass button (button)

| Property | Value |
|---|---|
| background | `rgba(255, 255, 255, 0.05)` |
| color | `#f7f8f8` |
| border | `none` |
| radius | `9999px` |
| padding | `0 20px` |
| font size | `16px` |
| font weight | `510` |
| shadow | `Glass edge (inset white 3–4% + 1px black 60% ring + 0 4px 4px rgba(0,0,0,.1))` |
| hover | `background rgba(255, 255, 255, 0.08)` |

44px tall. Sits beside a primary pill in closing CTAs ('Get started' / 'Contact sales').

### Ghost nav link (link)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#8a8f98` |
| border | `none` |
| radius | `9999px` |
| padding | `0 12px` |
| font size | `13px` |
| font weight | `400` |
| shadow | `none` |
| hover | `color #f7f8f8` |

32px hit area. The active page is shown in #f7f8f8 with no underline or background.

### Panel card (card)

| Property | Value |
|---|---|
| background | `#0f1011` |
| color | `#f7f8f8` |
| border | `1px solid rgba(255, 255, 255, 0.08)` |
| radius | `9px` |
| padding | `12px` |
| font size | `15px` |
| font weight | `400` |
| shadow | `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px` |
| hover | `border-color rgba(255, 255, 255, 0.12)` |

Used for app mockups and docs tiles. Docs tiles lighten to #161718 and split an icon area from a title and description block with a hairline.

### Quiet card (card)

| Property | Value |
|---|---|
| background | `rgba(255, 255, 255, 0.02)` |
| color | `#d0d6e0` |
| border | `1px solid rgba(255, 255, 255, 0.05)` |
| radius | `8px` |
| padding | `16px` |
| font size | `15px` |
| font weight | `400` |
| shadow | `none` |
| hover | `background rgba(255, 255, 255, 0.04)` |

Nearly invisible containers for secondary content. Pricing and customer grids often drop the box entirely and use 1px vertical column rules instead.

### Highlight testimonial card (card)

| Property | Value |
|---|---|
| background | `#e4f222` |
| color | `#08090a` |
| border | `none` |
| radius | `8px` |
| padding | `24px` |
| font size | `24px` |
| font weight | `510` |
| shadow | `none` |
| hover | `none` |

A single burst of colour on an otherwise monochrome page. Place it next to a #f8f8f9 light card of the same size.

### Label chip (badge)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#d0d6e0` |
| border | `1px solid #2e2e32` |
| radius | `16px` |
| padding | `0 11px` |
| font size | `12px` |
| font weight | `400` |
| shadow | `none` |
| hover | `border-color #3e3e44` |

24px tall. Often led by a 6–8px coloured status dot. Small tags like 'Opus 5' use a 4px radius with a hairline border.

### Top navigation (nav)

| Property | Value |
|---|---|
| background | `rgba(0, 0, 0, 0) with backdrop-filter: blur(20px)` |
| color | `#8a8f98` |
| border | `border-bottom 1px solid rgba(255, 255, 255, 0.08)` |
| radius | `0` |
| padding | `0 ~77px, height 73px` |
| font size | `13px` |
| font weight | `400` |
| shadow | `none` |
| hover | `link color #f7f8f8` |

Fixed. Logo on the left; links right-aligned with a thin vertical divider before 'Log in' and the primary pill.

## Layout

A wide centred frame (1436px max, content ≈1245px) with left-aligned headlines rather than centred heroes. The hero is a two-line 64px headline, a muted one-line subhead with a right-aligned 'New · Loops →' link on the same baseline, then a full-width product screenshot in a 12px-radius panel. Feature sections use a split header: 48px title on the left, 15–18px muted paragraph on the right. Below that sits a wide mockup, then a row of small labelled feature links separated by hairline rules. Grids (customers, pricing) use 3–4 columns divided by 1px vertical rules instead of boxed cards. Docs uses a 232px left sidebar with chevron rows and a 4-up card grid.

## Imagery

Mostly real product UI rendered in the dark theme: issue views, sidebars, diffs and agent chat panels, cropped and overlapped for depth. Supporting art is thin-line isometric wireframe drawings in grey on black. Customer stories use desaturated black-and-white photography or flat brand-colour panels (#4736fe, #8cc3f2 to lavender gradient) with white logos. There are no illustrations of people, no gradients on the page chrome and no stock imagery.

## Motion

Understated and quick. Links and buttons change colour and background over about 150ms. Product mockups animate state changes such as agent typing, status moves and diff reveals, rather than decorative parallax. Sections fade and rise gently on scroll. The nav blurs content behind it rather than changing colour.

## Responsive

On phones the nav keeps the logo, a muted 'Log in', the light 'Sign up' pill and a two-line hamburger; everything else collapses. The open menu is a full-screen dark overlay under the fixed header with a soft radial glow. It groups links under small #8a8f98 labels (System, Product, Resources) and sets each link large, about 28px at weight 510 in #f7f8f8, in a single left-aligned column; the hamburger becomes an X. The hero headline stays left-aligned and wraps to four lines at roughly 48px with tight leading. The subhead grows to about 20px, and the 'New · Loops →' link drops below it. The product screenshot is not scaled down: it bleeds off the right edge and is cropped. Side gutters shrink to about 18px, and multi-column grids stack to one column.

## Do

- Set headlines in Inter at weight 510 with negative tracking that scales with size (-1.056px at 48px, -1.408px at 64px) and line-height 1.
- Build depth with surface steps (#08090a → #0f1011 → #161718) and 1px rgba(255,255,255,0.05–0.08) hairlines, not drop shadows.
- Make every button a 9999px pill; use #e5e5e6 with #08090a text for the one primary action per view.
- Keep most copy small and muted: 15px/1.6 body in #8a8f98, with #f7f8f8 saved for titles and active states.
- Show real product UI in dark panels as the main visual, cropped and overlapping.
- Divide grid columns with thin vertical rules and let content float without boxes.
- Use Berkeley Mono only for code and identifiers.

## Don't

- Don't add brand-colour gradients, glows or coloured backgrounds to page chrome; the page stays monochrome.
- Don't use bold 700 weights or plain 500/600. Stick to the variable in-between weights 510 and 590.
- Don't use pure black #000000 or pure white #ffffff for large surfaces or body text.
- Don't use more than one saturated highlight per page; the lime #e4f222 card is a one-off accent, not a theme colour.
- Don't centre marketing headlines. Left-align them to the content edge.
- Don't give cards large radii (over 12px) or heavy shadows; corners stay at 8–12px and elevation stays subtle.

## Agent prompt

> Build a dark, monochrome, precision-tool marketing UI in the style of Linear. Page background #08090a, panels #0f1011, raised tiles #161718, all edged with 1px rgba(255,255,255,0.08) hairlines instead of shadows. Text: #f7f8f8 for headings, #d0d6e0 secondary, #8a8f98 muted body and nav, #62666d tertiary labels. Type is Inter (variable) at weight 510 for headlines: 72px/1 with -1.584px tracking for display, 64px/1 with -1.408px for the hero, 48px/1 with -1.056px for sections. Titles use 590 at 24px/1.33, body 400 at 15px/1.6 with -0.165px tracking, buttons 13px at 510. Code uses Berkeley Mono 14px. Every button is a 9999px pill: primary #e5e5e6 fill with #08090a text at 32–44px tall; secondary rgba(255,255,255,0.05) with an inset white highlight and a black 1px ring. The nav is fixed, 73px tall, transparent with 20px backdrop blur and a hairline bottom border, with muted 13px links on the right. Cards use 8px radius (12px for the product app frame) and 12–24px padding. Grids are divided by thin vertical rules rather than boxes. Layout is a 1436px frame with left-aligned headlines, split title/paragraph section headers, 96–112px section gaps and a 4px spacing base. The hero visual is a real dark product screenshot that crops off-edge on mobile. Use #6d78d5 indigo only for toggles and focus, #27a644 and #f34e52 only for status, and at most one acid-lime #e4f222 highlight card per page. The tone is quiet, dense, exact and confident.

## CSS custom properties

```css
/* Linear — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #08090a; /* Page background on every marketing and docs page; also the text colour on the light primary button */
  --color-surface: #0f1011; /* App-frame and card surfaces, and the product screenshot shell; one step above the page */
  --color-surface-raised: #161718; /* Raised elements inside panels: docs cards, selected sidebar rows, popovers */
  --color-text: #f7f8f8; /* Headlines, active nav items and primary body text */
  --color-text-secondary: #d0d6e0; /* Secondary text, card titles, chip labels and emphasised supporting copy */
  --color-text-muted: #8a8f98; /* Default muted copy: hero subheads, nav links, feature descriptions, 'Watch video →' links */
  --color-text-subtle: #62666d; /* Tertiary labels: sidebar section headers (Workspace, Favorites), timestamps, footer fine print */
  --color-primary: #e5e5e6; /* Primary CTA pill fill ('Sign up', 'Get started') with #08090a text */
  --color-accent: #6d78d5; /* The only interactive accent: billing toggles, 'Continue with Google', agent badges; focus ring variant #5e69d1 */
  --color-highlight: #e4f222; /* Rare full-bleed highlight card (testimonial block) with dark text; used once per page at most */
  --color-success: #27a644; /* Success/completed status icons and added-line diff markers */
  --color-danger: #f34e52; /* Error/urgent status dots and removed-line diff markers */

  /* Semantic roles */
  --background: #08090a;
  --surface: #0f1011;
  --surface-raised: #161718;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f7f8f8;
  --text-muted: #8a8f98;
  --primary: #e5e5e6;
  --primary-text: #08090a;
  --accent: #6d78d5;
  --success: #27a644;
  --danger: #f34e52;

  /* Typography */
  --font-display: Inter, 'Inter Variable', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  --font-body: Inter, 'Inter Variable', 'SF Pro Text', -apple-system, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --text-display: 72px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.584px;
  --text-display--font-weight: 510;
  --text-h1-hero: 64px;
  --text-h1-hero--line-height: 1;
  --text-h1-hero--letter-spacing: -1.408px;
  --text-h1-hero--font-weight: 510;
  --text-h2-section: 48px;
  --text-h2-section--line-height: 1;
  --text-h2-section--letter-spacing: -1.056px;
  --text-h2-section--font-weight: 510;
  --text-h3-card-title: 24px;
  --text-h3-card-title--line-height: 1.33;
  --text-h3-card-title--letter-spacing: -0.288px;
  --text-h3-card-title--font-weight: 590;
  --text-title: 20px;
  --text-title--line-height: 1.33;
  --text-title--letter-spacing: -0.24px;
  --text-title--font-weight: 510;
  --text-lead: 18px;
  --text-lead--line-height: 1.6;
  --text-lead--letter-spacing: -0.165px;
  --text-lead--font-weight: 400;
  --text-body: 15px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: -0.165px;
  --text-body--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: -0.182px;
  --text-small--font-weight: 400;
  --text-caption-button: 13px;
  --text-caption-button--line-height: 1.5;
  --text-caption-button--letter-spacing: normal;
  --text-caption-button--font-weight: 510;
  --text-mono: 14px;
  --text-mono--line-height: 1.71;
  --text-mono--letter-spacing: normal;
  --text-mono--font-weight: 400;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 96px;
  --container: 1436px (content column ≈1245px with ~77px side gutters at 1440);
  --section-gap: 96–112px vertical between major sections;

  /* Radius */
  --radius-buttons-nav-ctas-toggles: 9999px;
  --radius-cards-docs-tiles-testimonial-blocks: 8px;
  --radius-product-app-frame-large-panels: 12px;
  --radius-inner-app-cards-and-menus: 9px;
  --radius-label-chips-performance-ios: 16px;
  --radius-inline-code-kbd-small-icons: 4px;
  --radius-avatars-and-status-dots: 50%;

  /* Shadows */
  --shadow-glass-edge: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;
  --shadow-pill-lift: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  --shadow-hairline-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-inset-well: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-float: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
}
```

## Tailwind v4 theme

```css
/* Linear — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #08090a;
  --color-surface: #0f1011;
  --color-surface-raised: #161718;
  --color-text: #f7f8f8;
  --color-text-secondary: #d0d6e0;
  --color-text-muted: #8a8f98;
  --color-text-subtle: #62666d;
  --color-primary: #e5e5e6;
  --color-accent: #6d78d5;
  --color-highlight: #e4f222;
  --color-success: #27a644;
  --color-danger: #f34e52;
  --color-background: #08090a;
  --color-surface: #0f1011;
  --color-surface-raised: #161718;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-text: #f7f8f8;
  --color-text-muted: #8a8f98;
  --color-primary: #e5e5e6;
  --color-primary-text: #08090a;
  --color-accent: #6d78d5;
  --color-success: #27a644;
  --color-danger: #f34e52;
  --font-display: Inter, 'Inter Variable', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  --font-body: Inter, 'Inter Variable', 'SF Pro Text', -apple-system, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --text-display: 72px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.584px;
  --text-display--font-weight: 510;
  --text-h1-hero: 64px;
  --text-h1-hero--line-height: 1;
  --text-h1-hero--letter-spacing: -1.408px;
  --text-h1-hero--font-weight: 510;
  --text-h2-section: 48px;
  --text-h2-section--line-height: 1;
  --text-h2-section--letter-spacing: -1.056px;
  --text-h2-section--font-weight: 510;
  --text-h3-card-title: 24px;
  --text-h3-card-title--line-height: 1.33;
  --text-h3-card-title--letter-spacing: -0.288px;
  --text-h3-card-title--font-weight: 590;
  --text-title: 20px;
  --text-title--line-height: 1.33;
  --text-title--letter-spacing: -0.24px;
  --text-title--font-weight: 510;
  --text-lead: 18px;
  --text-lead--line-height: 1.6;
  --text-lead--letter-spacing: -0.165px;
  --text-lead--font-weight: 400;
  --text-body: 15px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: -0.165px;
  --text-body--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: -0.182px;
  --text-small--font-weight: 400;
  --text-caption-button: 13px;
  --text-caption-button--line-height: 1.5;
  --text-caption-button--letter-spacing: normal;
  --text-caption-button--font-weight: 510;
  --text-mono: 14px;
  --text-mono--line-height: 1.71;
  --text-mono--letter-spacing: normal;
  --text-mono--font-weight: 400;
  --radius-buttons-nav-ctas-toggles: 9999px;
  --radius-cards-docs-tiles-testimonial-blocks: 8px;
  --radius-product-app-frame-large-panels: 12px;
  --radius-inner-app-cards-and-menus: 9px;
  --radius-label-chips-performance-ios: 16px;
  --radius-inline-code-kbd-small-icons: 4px;
  --radius-avatars-and-status-dots: 50%;
  --shadow-glass-edge: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;
  --shadow-pill-lift: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  --shadow-hairline-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-inset-well: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-float: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
  --container-site: 1436px (content column ≈1245px with ~77px side gutters at 1440);
}
```

# Linear — Style Reference
> graphite instrument panel after midnight

**Theme:** dark · **Mood:** dark, minimal, precise, technical, monochrome, cool

Linear feels like a precision tool shown in a dark room: near-black surfaces, cool off-white type and almost no colour, so the product UI does most of the talking. What sets it apart is restraint. Big, tightly tracked medium-weight headlines sit over dim grey copy, and a real app screenshot takes the place of illustration. Colour only shows up where it means something: an indigo toggle, a status dot, a single acid-lime testimonial card.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Void | `#08090a` | `--color-bg` | Page background on every marketing and docs page; also the text colour on the light primary button |
| Graphite Panel | `#0f1011` | `--color-surface` | App-frame and card surfaces, and the product screenshot shell; one step above the page |
| Slate Lift | `#161718` | `--color-surface-raised` | Raised elements inside panels: docs cards, selected sidebar rows, popovers |
| Frost | `#f7f8f8` | `--color-text` | Headlines, active nav items and primary body text |
| Mist | `#d0d6e0` | `--color-text-secondary` | Secondary text, card titles, chip labels and emphasised supporting copy |
| Pewter | `#8a8f98` | `--color-text-muted` | Default muted copy: hero subheads, nav links, feature descriptions, 'Watch video →' links |
| Ash | `#62666d` | `--color-text-subtle` | Tertiary labels: sidebar section headers (Workspace, Favorites), timestamps, footer fine print |
| Porcelain | `#e5e5e6` | `--color-primary` | Primary CTA pill fill ('Sign up', 'Get started') with #08090a text |
| Linear Indigo | `#6d78d5` | `--color-accent` | The only interactive accent: billing toggles, 'Continue with Google', agent badges; focus ring variant #5e69d1 |
| Signal Lime | `#e4f222` | `--color-highlight` | Rare full-bleed highlight card (testimonial block) with dark text; used once per page at most |
| Merge Green | `#27a644` | `--color-success` | Success/completed status icons and added-line diff markers |
| Revert Red | `#f34e52` | `--color-danger` | Error/urgent status dots and removed-line diff markers |

## Tokens — Typography

- **Display:** Inter (Inter Variable, SF Pro Display, -apple-system, system-ui, sans-serif) — weights 510/590
- **Body:** Inter (Inter Variable, SF Pro Text, -apple-system, system-ui, sans-serif) — weights 300/400/450/510/590
- **Mono:** Berkeley Mono (JetBrains Mono, IBM Plex Mono, ui-monospace, monospace) — weights 400

## Tokens — Radius

| Element | Value |
|---------|-------|
| Buttons, nav CTAs, toggles | `9999px` |
| Cards, docs tiles, testimonial blocks | `8px` |
| Product app frame / large panels | `12px` |
| Inner app cards and menus | `9px` |
| Label chips (Performance, iOS) | `16px` |
| Inline code, kbd, small icons | `4px` |
| Avatars and status dots | `50%` |

## Do

- Set headlines in Inter at weight 510 with negative tracking that scales with size (-1.056px at 48px, -1.408px at 64px) and line-height 1.
- Build depth with surface steps (#08090a → #0f1011 → #161718) and 1px rgba(255,255,255,0.05–0.08) hairlines, not drop shadows.
- Make every button a 9999px pill; use #e5e5e6 with #08090a text for the one primary action per view.
- Keep most copy small and muted: 15px/1.6 body in #8a8f98, with #f7f8f8 saved for titles and active states.
- Show real product UI in dark panels as the main visual, cropped and overlapping.
- Divide grid columns with thin vertical rules and let content float without boxes.
- Use Berkeley Mono only for code and identifiers.

## Don't

- Don't add brand-colour gradients, glows or coloured backgrounds to page chrome; the page stays monochrome.
- Don't use bold 700 weights or plain 500/600. Stick to the variable in-between weights 510 and 590.
- Don't use pure black #000000 or pure white #ffffff for large surfaces or body text.
- Don't use more than one saturated highlight per page; the lime #e4f222 card is a one-off accent, not a theme colour.
- Don't centre marketing headlines. Left-align them to the content edge.
- Don't give cards large radii (over 12px) or heavy shadows; corners stay at 8–12px and elevation stays subtle.