Dark interfaceMeasured linear.app

Linear

Sleek, focused, and almost black, built for people who live in the product all day.

This page is styled with Linear’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#08090A
Page behind everything

Surface#101112
Cards, panels, menus

Text#F7F8F8
Headings and body

Muted text#8A8F98
Secondary info

Line#2E2E32
Dividers and outlines

Accent#5E6AD2
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 18.7:1Muted on background 6.1:1Text on accent 4.7:1

Every colour found on their site

#D0D6E0#8A8F98#62666D#F7F8F8#FFFFFF#08090A#090A0B#101112#0F1011#5E6AD2#2E2E32#E5E5E6#24282C

Typography

Headings use Inter Variable (free). Body text uses Inter Variable (free).

h1	Inter Variable · 64px · 510 · -1.408px	The product development
h2	Inter Variable · 48px · 510 · -1.056px	A new species of product tool. Purpose-built for modern team
h3	Inter Variable · 20px · 590 · -0.24px	Faster app launch
h4	Inter Variable · 16px · 590	Activity
p	Inter Variable · 15px · 400 · -0.165px	Purpose-built for planning and building products. Designed f
li	Inter Variable · 16px · 400	Product

Corners & shadows

Corner sizes used

pill

8px

50px

12px

6px

9px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Linear’s live website. Click to enlarge.

Buttons · 2

Linear button: Skip to content → — #5E6AD2 · corners 0px · 32px

Navigation bar · 1

Linear Navigation bar: Product — no fill · square · Inter Variable 16px

Buttons · 1

Tags and badges · 4

Linear Tags and badges: vehicle_state — no fill · corners 4px · Berkeley Mono 12px

Linear Tags and badges: Opus 5 — no fill · corners 4px · Inter Variable 11px

Linear Tags and badges: Preview — fill #1C1C1D · corners 999px · Inter Variable 16px

Linear Tags and badges: Bug — no fill · corners 9999px · Inter Variable 16px

Cards and panels · 3

Linear Cards and panels: karri — fill #0F1011 · corners 9px · Inter Variable 16px

Linear Cards and panels: Linear — fill #161718 · corners 12px · Inter Variable 16px

Icons

30 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Linear product screen: 9 best tools for app issue tracking | Shake — 9 best tools for app issue tracking | Shake

Linear product screen: Linear – The system for product development | Issue tracker dashboard ... — Linear – The system for product development | Issue tracker dashboard ...

Linear product screen: How to Use Linear: Setup, Best Practices, and Hidden Features Guide ... — How to Use Linear: Setup, Best Practices, and Hidden Features Guide ...

Linear product screen: Select issues - Linear Docs — Select issues - Linear Docs

Linear product screen: My issues – Linear Docs — My issues – Linear Docs

Linear product screen: Linear Pricing, Reviews and Features (February 2021) - SaaSworthy.com — Linear Pricing, Reviews and Features (February 2021) - SaaSworthy.com

Linear product screen: Linear – The issue tracking tool you'll enjoy using | Issue tracking ... — Linear – The issue tracking tool you'll enjoy using | Issue tracking ...

Linear product screen: Linear – The issue tracking tool you'll enjoy using | Issue tracker ... — Linear – The issue tracking tool you'll enjoy using | Issue tracker ...

Linear product screen: Linear Project Management: Simplifying Project Planning for Small Teams — Linear Project Management: Simplifying Project Planning for Small Teams

Linear product screen: Changelog – Linear — Changelog – Linear

Do & don’t

What makes it Linear

Near-black backgrounds with soft grey text, easy on the eyes
One signature indigo-purple accent used sparingly
Fully rounded pill buttons and minimal borders

Use near-black, not pure black, backgrounds
Reserve the indigo accent for key actions and highlights
Keep text contrast soft (light grey, not pure white) for body copy

Don’t

Don't use pure black or pure white
Don't add multiple bright colours
Don't clutter with heavy borders or shadows

For AltLeads: Borrow the dark, low-glare theme as an optional focus mode for reps doing long calling sessions.

Copy the tokens

Paste into any project to try this look.

/* Linear · values measured from https://linear.app/ · reference only, their brand belongs to them */
:root {
  --bg: #08090A;
  --surface: #101112;
  --text: #F7F8F8;
  --muted: #8A8F98;
  --line: #2E2E32;
  --accent: #5E6AD2;
  --on-accent: #FFFFFF;
  --radius-button: 8px;
  --radius-card: 9px;
  --radius-small: 6px;
  --button-height: 32px;
  --font-heading: "Inter Variable", "Inter", system-ui, sans-serif;
  --font-body: "Inter Variable", "Inter", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
}