# linear.app

Source: https://linear.app/
Captured: 2026-09-13
Tags: saas, landing, dark, both, dark-techno, minimal, technical, serious, confident, premium, calm
Colors: #0d0e0f, #2b2c2e, #4f5152, #717272, #8f9091, #adaeae, #cececf, #584a11
Type (h1): Inter Variable · 64px/64px · 510 · tracking -1.408px — "The product development system for teams and agents The product development syst"
Type (h2): Inter Variable · 48px/48px · 510 · tracking -1.056px — "A new species of product tool. Purpose-built for modern teams with AI workflows "
Type (h3): Inter Variable · 20px/26.6px · 590 · tracking -0.24px — "Faster app launch"
Type (body): Inter Variable · 15px/24px · 400 · tracking -0.165px — "Purpose-built for planning and building products. Designed for the AI era."
Type (small): Inter Variable · 12px/14px · 510 — "DRV-8852"
Type (button): Inter Variable · 13px/32px · 510 — "Sign up"
Button (primary): "Sign up" — fill #e5e5e6, text #08090a, radius 9999px, border 1px, padding 0px 12px, height 32px, type 13px/510
Button (secondary): "Product" — text #8a8f98, radius 9999px, border 0px, padding 0px 12px, height 32px, type 13px/400
Radii: 9999px (18), 8px (18), 9px (18), 50% (12), 12px (8)

## Images

- Hero (desktop): https://media.lvly.design/library/linear-app/hero.webp?v=df492633
- Page crop (mid-1): https://media.lvly.design/library/linear-app/mid-1.webp?v=e9b6ab7e
- Page crop (mid-2): https://media.lvly.design/library/linear-app/mid-2.webp?v=475df09e
- Hero (mobile): https://media.lvly.design/library/linear-app/mobile-hero.webp?v=6d3235a8
- Full page (desktop): https://media.lvly.design/library/linear-app/full.jpg?v=bc69fdda
- Full page (mobile): https://media.lvly.design/library/linear-app/mobile-full.jpg?v=9fc8be34
- Clip preview (mp4): https://media.lvly.design/library/linear-app/video-7t8etf.preview.mp4?v=17fa4283

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.

## Steal-worthy details

- 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.
- Header nav at 14px medium gray, a thin vertical hairline separating the marketing links from Log in / Sign up.
- The hero headline breaks into two lines at 72px/72px with −1.584px tracking and weight 510 — one optical notch above regular, never bold.
- A tiny "New · Loops →" pointer sits at the far right of the subtitle's baseline, as a one-line changelog teaser.
- 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.
- 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.
- 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.
- Semantic color is confined to 6px status dots and a violet `@Linear` mention chip; the marketing chrome is strictly achromatic.
- Radii vocabulary: 9999px pills for buttons, 8–9px for cards and inputs, 12px for the app window.

## Style recipe

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.