linear.app

Linear – The system for product developmentsaved 26d ago · captured 26d ago

Nine details, nine pinned.

View as Markdown ↗

Colors8 colors · ground #0D0E0F

ground#0d0e0f·90.02%#2b2c2e·5.17%#4f5152·1.66%#717272·1.18%#8f9091·1.15%#adaeae·0.64%#cececf·0.09%#584a11·0.05%

Sized by coverage · click to copy.

Typography1 family · 5 styles · Inter Variable

The product development system for teams and agents The product development syst

Inter Variable · 64/64 · 510 · -1.408px

A new species of product tool. Purpose-built for modern teams with AI workflows

Inter Variable · 48/48 · 510 · -1.056px

Faster app launch

Inter Variable · 20/27 · 590 · -0.24px

Body

Purpose-built for planning and building products. Designed for the AI era.

Inter Variable · 15/24 · 400 · -0.165px

Small

DRV-8852

Inter Variable · 12/14 · 510 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsSign up2 styles

Sign upProduct

primary · fill #e5e5e6 · label #08090a · radius 9999px · border 1px · padding 0px 12px · height 32px · type 13px / 510

secondary · fill — · label #8a8f98 · radius 9999px · border 0px · padding 0px 12px · height 32px · type 13px / 400

Shape5 radii · 74 uses

9999px18 uses · 24%

8px18 uses · 24%

9px18 uses · 24%

50%12 uses · 16%

12px8 uses · 11%

AnalysisLinear's homepage is the reference dark SaaS landing, and this capture is its quietest iteration yet: a near-black ground (`#08090a`, the palette is 90% `#0d0e0f`) with **no** color accent at all —…

Linear's homepage is the reference dark SaaS landing, and this capture is its quietest iteration yet: a near-black ground (#08090a, the palette is 90% #0d0e0f) with no color accent at all — the brand accent is a near-white pill button (#e5e5e6 on #08090a), and the only chroma on the page is the semantic dots inside the product UI (a blue "Design" label, a red "Bug", a violet mention chip). Everything is carried by Inter Variable at the odd optical weight 510, a 72px headline with −1.6px tracking, and a gray ramp that steps from #2b2c2e through #8f9091 to #cececf for hierarchy. The hero gives the headline a huge vertical run of empty space, then drops a full-bleed screenshot of the app whose bottom edge falls off the viewport, framed by two faint 1px hairline verticals that extend the product's window edges up into the hero. Sections are separated by hairlines and lowercase-quiet eyebrows ("Features") with a two-column index of links on the right rather than a headline. The product UI is the illustration: nothing decorative, all text and tiny 14px icons, but the layered chat window and the fading "ghost" issue cards behind it add depth through opacity rather than shadow or gradient.

Style recipeBuild a dark, achromatic developer-tool site.

Build a dark, achromatic developer-tool site. Ground #08090a; raised surfaces #0d0e0f and #141516; hairlines #2b2c2e at 1px, never thicker. Text ramp: primary #f7f8f8, secondary #8f9091, tertiary #4f5152. There is no accent color: the primary button is a #e5e5e6 pill with #08090a text, 32px tall, 13px, 12px horizontal padding, border-radius: 9999px; secondary buttons are ghost text in #8f9091. Use Inter Variable (or Inter) with weight 510 for every heading and 400 for body; display sizes 56–72px at line-height 1.0 and letter-spacing: -0.022em; body 15px/24px with -0.011em. Separate sections with 1px hairlines and generous vertical space (160–200px) rather than background changes. Make product UI the only imagery — real screenshots at 12px radius, allowed to bleed past the fold, with 1px vertical hairlines extending their edges into empty space above. Create depth by opacity (fade background layers to 25–35%) and 1px borders, not by drop shadows or gradients. Reserve chroma for semantic meaning only: 6px status dots (blue, red, green, violet) and mention chips; keep all marketing chrome gray. Section headers are a muted 15px eyebrow on the left and a right-aligned two-column link index with + disclosures. Radii: 9999px pills, 8px controls, 12px windows.

Details9 worth noting

linear.app — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1White pill CTA on black
The CTA is a white pill on black (#e5e5e6 / #08090a, 32px tall, 13px at weight 510, 12px side padding) — the absence of a brand color is the brand.
2Hairline-split header nav
Header nav at 14px medium gray, a thin vertical hairline separating the marketing links from Log in / Sign up.
3Two-line 72px headline at weight 510
The hero headline breaks into two lines at 72px/72px with −1.584px tracking and weight 510 — one optical notch above regular, never bold.
4Changelog teaser on the subtitle baseline
A tiny "New · Loops →" pointer sits at the far right of the subtitle's baseline, as a one-line changelog teaser.
5Screenshot cropped by the fold
The app screenshot is cropped by the fold, with faint 1px vertical hairlines running from its edges up through the hero — the product literally holds the page up.
6Depth by opacity, not shadow
Depth without shadows: a floating chat panel over the app, and issue cards behind it faded to ~30% opacity so the focus panel reads as raised.
7Eyebrow left, link index right
Section header pattern: a muted eyebrow on the left ("Features"), and on the right a two-column list of product names each with a + disclosure — an index, not a headline.
8Chroma only for semantic status
Semantic color is confined to 6px status dots and a violet @Linear mention chip; the marketing chrome is strictly achromatic.
9Three-step radius vocabulary
Radii vocabulary: 9999px pills for buttons, 8–9px for cards and inputs, 12px for the app window.

saas · landing · dark · dark-techno, minimal · technical, serious, confident, premium, calm

linear.app

More like this