# Linear: brand book and build spec

A near-monochrome brand: a striped-disc mark in white or Nordic Gray, Inter with Inter Display headings, generated neutral themes, and interfaces where chrome recedes so the work leads. A plain, brief voice drawn from the Linear Method.

From unfairly.ai/brand-guidelines/linear, checked 2026-10-30. Unofficial study; not affiliated with Linear.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Quality you feel, not see. Linear removes everything competing for attention (color, borders, icons, coined words) so that density reads as calm and the product itself is the brand. Based on: The guide's two monochrome colors and 'room to breathe' rule; the refresh principles (don't compete for attention you haven't earned; structure felt not seen); the Method's call for clarity and brevity.

## Purpose

Purpose: Bring back the lost art of building quality software: the foundational ideas Linear is built on (paraphrase of the Method's opening). (published; https://linear.app/method)

Story: Founded in 2019 by Karri Saarinen, Jori Lallo and Tuomas Artman. Linear announced the company before the product existed, then launched again at seed, at general availability with pricing, and at Series A. It redesigned its UI in 2024, rebuilt Liquid Glass its own way for mobile in 2025, and refreshed toward a calmer, warmer interface in 2026. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Build for the creators | Keep the people doing the work productive before producing perfect reports (paraphrase). | published: https://linear.app/method/introduction |
| Purpose-built | Opinionated software over endlessly flexible software (paraphrase). | published: https://linear.app/method/introduction |
| Create momentum, don't sprint | A steady cadence, not a rush to the end (paraphrase). | published: https://linear.app/method/introduction |
| Meaningful direction | Tie daily tasks to long-term goals (paraphrase). | published: https://linear.app/method/introduction |
| Aim for clarity | Use common words; projects are projects (paraphrase). | published: https://linear.app/method/introduction |
| Say no to busy work | The tool works for you; remove work around work (paraphrase). | published: https://linear.app/method/introduction |
| Simple first, then powerful | Easy to start, more powerful as you scale (paraphrase). | published: https://linear.app/method/introduction |
| Decide and move on | Making a decision often matters more than the perfect answer (paraphrase). | published: https://linear.app/method/introduction |

## Fixed and flexible

Never changes:
- Linear spelled as one word, capital L
- Monochrome mark in Mercury White #F4F5F8 or Nordic Gray #222326, with space around it
- Inter, with Inter Display headings
- Neutral, low-chroma grounds; chrome recedes, content leads
- Plain, brief language

The one thing that varies: Light or dark ground, and how much product UI imagery a piece carries.

## Positioning

- **Statement**: A purpose-built system for product development, where teams and agents work in one shared, structured environment (paraphrase). (observed)
- **Category**: Product development system (formerly issue tracking); the 2024 redesign framed the move from issue tracker to a system for product development. (published)
- **Audience**: Product and engineering teams, from startups to larger, complex organizations including executives and managers (paraphrase). (published)
- **Problem**: Tools that make you their designer and maintainer, flexible workflows that turn to chaos at scale, and rituals like user stories that obscure the work (paraphrase). (published)
- **Promise**: A fast, calm tool that surfaces what you need when you need it and keeps momentum (paraphrase). (published)
- **Differentiators**: Opinionated, purpose-built workflows (cycles, projects, initiatives) instead of blank-slate configuration.; Craft: interface detail work such as LCH theme generation, sidebar alignment and a custom glass material.; Built for teams and AI agents together (agents API, AI integrations).

## Messaging

Boilerplate (observed): Linear is a purpose-built system for product development where teams and agents work together in one shared, structured environment. Founded in 2019, it is used by more than 40,000 companies, including OpenAI, Coinbase and Ramp, to plan, build and ship products.

Taglines:
- The product development system for teams and agents (Homepage hero headline)
- Building tools for the next era of product development (About page headline)
- Built for the future. Available today. (Closing call to action)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Purpose-built | Designed for the job of building product, so the tool does the heavy lifting instead of everyone inventing workflows. | More than 40,000 companies use Linear, including OpenAI, Coinbase and Ramp (About page, 2026-10-30).; The Linear Method: published principles and practices for building product. | published |
| Momentum | Cycles, small issues and repeated launches keep teams moving without sprinting. | The Linear Method: published principles and practices for building product.; A public changelog and repeated launches (build in public). | published |
| Craft and quality | Care for the smallest details; quality you feel rather than see. | Full UI redesign shipped in about six weeks (2024).; Conversations on Quality, an interview series on how quality gets built. | published |
| Teams and agents | One structured environment where people and AI agents work together. | More than 40,000 companies use Linear, including OpenAI, Coinbase and Ramp (About page, 2026-10-30). | observed |

They never claim:
- No numeric performance, speed or ROI claims are published in the brand sources read here: don't invent them.

## Voice

Tone words: Plain, Direct, Calm, Craft-minded.

Traits:
- Plain, but not Jargon-filled (published)
- Brief, but not Exhaustive (published)
- Opinionated, but not Dogmatic (our reading)
- Calm, but not Loud (published)
- Crafted, but not Decorated (published)

- Write in plain language; short, scannable titles; descriptions only as long as needed (Method).
- Don't invent terms: call projects projects (Method).
- Brevity: short specs are more likely to be read (Method).
- Quote customers directly rather than summarizing them (Method).
- Confident about opinions (user stories are 'an anti-pattern') but argues from reasons, not hype.
- Design posts are first person plural, credit named people, and talk in details rather than adjectives.
- Voice notes are our reading of the Method and design posts: Linear publishes no voice guide.

Rules a copy check enforces:
- "Linear" is one word with a capital L, never "Linear app"
- Capitalize dedicated releases as proper nouns (Linear Method)
- Plain language; titles that directly state the thing
- Don't invent terms; use the common word
- Aim for brevity; write only as much as the reader needs
- Write as "we", to "you"
- Sentence case headlines

Their words: purpose-built, momentum, craft, quality, issues, projects, cycles, product development.
Never: Linear app, user stories (as a working method), invented jargon for ordinary things.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Mercury White | #F4F5F8 | paper | Published light accent for the monochrome wordmark (on dark grounds). Used as paper and on_night: our reading. |
| Nordic Gray | #222326 | ink | Published dark accent for the monochrome wordmark (on light grounds). Used as ink and night: our reading. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Inter | Open (SIL OFL 1.1) | Inter | "Inter Variable", Inter, -apple-system, "Segoe UI", sans-serif |
| body | Inter | Open (SIL OFL 1.1) | Inter | "Inter Variable", Inter, -apple-system, "Segoe UI", sans-serif |
| mono | Berkeley Mono | Proprietary (US Graphics Company); stand-in IBM Plex Mono, SIL OFL 1.1 | IBM Plex Mono | "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Prefooter H2 | --text-display-xxl-* | display | 72px | 38px | 1 | -1.584px | 510 |
| Hero H1 | --text-display-xl-* | display | 64px | 38px | 1 | -1.408px | 510 |
| Section H2 / statement | --text-display-l-* | display | 48px | 24px | 1 | -1.056px | 510 |
| Quote | --text-quote-* | body | 32px | 24px | 1.125 | -0.704px | 400 |
| Section lead | --text-lead-* | body | 24px | 15px | 1.33 | -0.288px | 400 |
| Body / small title | --text-body-* | body | 15px | 15px | 1.6 | -0.165px | 400 |
| Prefooter button | --text-button-l-* | body | 16px | 16px | 2.75 | 0px | 510 |
| Attribution | --text-caption-* | body | 14px | 14px | 1.5 | -0.182px | 400 |
| Nav / footer link | --text-ui-* | body | 13px | 13px | 1.5 | 0px | 400 |
| Mono eyebrow / date | --text-mono-label-* | mono | 12px | 12px | 1.4 | 0px | 400 |

## Layout

Measured on https://linear.app/: Measured on https://linear.app/ at 1440x900 and 390x844 with Playwright computed styles, hover probes and 2x captures, 2026-10-30; guide values from https://linear.app/brand.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 80px | 24px |
| Section padding | 128px | 40px |
| Container max width | 1344px | full |
| Hero text width | max 1280px | full |
| Grid columns | 2 | 1 |
| Gutter | 32px | 16px |
| Card gap | 8px | 8px |
| Navigation height | 73px | 73px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Linear's.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: fixed 73px, translucent blur, 1px white-8% hairline
   - Phone: 65px: wordmark, Log in, Sign up, hamburger
   - Links 13px #8A8F98 pills, Sign up #E5E5E6 pill
2. Hero
   - Desktop: y 73-1295; H1 y 272; frame 1320x720 at y 527
   - Phone: y 65-911; H1 38px 4 lines; frame bleeds right
   - App frame is a capture (hero-app-frame-desk@2x.png)
   - Stage gradient #08090A to #D0D6E0 at the bottom
3. Logo row
   - Desktop: y 1407-1500, space-between across 1280px
   - Phone: marquee, eyebrow at y 1011
   - POWERING THE COMPANIES BUILDING THE FUTURE 12px mono #62666D
4. Statement
   - Desktop: y 1596, 3 lines
   - Phone: 24px, 6 lines
   - First sentence #F7F8F8, rest #8A8F98
5. Benefits
   - Desktop: 3 hairline columns, y 1876-2344
   - Phone: carousel of #0F1011 cards 328x440
   - Line-art SVGs supplied
6. Intake and integrations
   - Desktop: y 2546-3772, padding 128 0
   - Phone: illustration then header
   - Capture intake-illustration-desk@2x.png
7. Planning and monitoring
   - Desktop: y 3782-5011
   - Phone: timeline then header
   - Capture planning-illustration-desk@2x.png
8. AI and automations
   - Desktop: y 5021-6253
   - Phone: assign picker then header
   - Capture ai-agents-illustration-desk@2x.png
9. Build, review, and ship
   - Desktop: y 6263-7483
   - Phone: diff then header
   - Capture build-diff-illustration-desk@2x.png
10. Changelog
   - Desktop: y 7644-8066
   - Phone: hidden
   - Dates in mono uppercase
11. Customer quotes
   - Desktop: y 8226-8790 inside 1px #23252A outline
   - Phone: carousel of 320x360 cards
   - Quote 32px #08090A with hanging quote
12. Prefooter CTA
   - Desktop: 72px centred, y 9014-9242
   - Phone: 38px centred
   - 224px margin above and below
13. Footer
   - Desktop: y 9466-9960, top border #23252A
   - Phone: 2-column grid, Legal as a sixth group
   - No copyright line

## Page anatomy

How Linear's own landing pages are built, part by part (observed; https://linear.app/, 2026-10-30). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: Fixed translucent near-black bar: wordmark left; six text links right-aligned (Product and Resources open mega-menus), a 1px vertical divider, Log in text pill and a light Sign up pill. Phone: wordmark, Log in, Sign up and a hamburger.
- ground: transparent element with background linear-gradient(rgba(11,11,11,0.8), rgba(10,10,10,0.76)) + backdrop-filter blur(20px) over the page; reads as the page ground #08090A at rest
- height: 73px desktop (72px bar + 1px border); 65px phone
- border: border-bottom 1px solid rgba(255,255,255,0.08)
- logo: variant full wordmark (logomark + "Linear"), monochrome #F7F8F8; px 88x22 svg (viewBox 0 0 400 100) inside a 104x32 link with padding 0 8px, radius 6px; position desktop link x 71, svg x 79 y 25; phone link x 15, y 16; file nav-wordmark.svg
- links: count 6; labels Product (menu), Resources (menu), Customers, Pricing, Now, Contact; size 13px/19.5px; weight 400; color #8A8F98 at rest; hover #F7F8F8 on a rgba(255,255,255,0.08) pill fill; open menu item keeps the fill; alignment right-aligned group: 32px-tall pills with padding 0 12px, radius 9999px, starting x 741 (Product), 813, 902, 992, 1059, 1111; no gaps between pills; hrefs Customers /customers, Pricing /pricing, Now /now, Contact /contact
- actions:
  - 1px x 16px vertical divider rgba(255,255,255,0.08) at about x 1200, 16px clear on each side
  - Log in: text pill 13px/400 #8A8F98, padding 0 12px, 62x32 at x 1218, href /login; hover #F7F8F8 + rgba(255,255,255,0.08) fill
  - Sign up: pill fill #E5E5E6, 1px #E5E5E6 border, text #08090A 13px/510, line-height 32px, padding 0 12px, radius 9999px, 73x32 at x 1288 (right edge x 1361), href /signup; soft stacked drop shadow (0 1px 1px rgba(0,0,0,0.07), 0 3px 2px rgba(0,0,0,0.04)); hover fill #FFFFFF
- product menu: Hovering Product opens a panel under the bar at about x 502-1360, y 64-345 (measured from a 2x capture): raised dark fill, 1px rgba(255,255,255,0.08) border, radius 12px, an inner card holding three columns split by vertical hairlines. Col 1 Intake ("Bring requests and context in from every tool you use"), Plan and monitor ("Set the plan and follow it from idea to launch"); col 2 AI and automations ("Agents that follow work from conversation to code"), Build, review and ship ("Write code and review pull requests inside Linear"); col 3 Integration directory, Changelog, Mobile, Security. A footer row below the card: New + the latest changelog title on the left, Learn more -> on the right. Titles #F7F8F8, descriptions #8A8F98, all about 13px.
- sticky: position fixed, z-index 100 (--layer-header), always visible; no change on scroll
- phone: shows wordmark link (x 15), Log in pill (x 188), Sign up pill (x 258, 73x32), 64x64 hamburger button at x 331 with a two-line icon; same gradient + blur ground and 1px bottom hairline, 65px tall; menu Full-screen sheet under the 65px bar, ground rgba(11,11,11,0.8) + blur; the hamburger becomes an X. Groups with small #8A8F98 labels and large #F7F8F8 links on a 44px row pitch, left at x 24 (computed 16px/400; they render at about 24px in the 2x capture, so match the capture). System: Intake, Plan and monitor, AI and automations, Build, review and ship. Product: Integrations, Pricing, Changelog, Documentation. Resources: About, Customers, Careers, Contact, Now, Method (continues on scroll).; cta Sign up stays in the bar; no separate menu CTA

**Hero**
- summary: Left-aligned two-line 64px headline and a 15px muted lead on the left with a small "New Loops ->" link on the right of the same baseline, then a full-width product app frame (live DOM, use the capture) sitting on a stage that fades from #08090A to a pale grey glow at its bottom edge.
- desktop: column split single 1280px text column (x 80-1360) inside the 1344px container (x 48-1392, 32px inset); headline row full width; lead left, New link right-aligned on the same line; vertical anchors bar 0-73; H1 top y 272 (2 lines, 64px line height, bottom 400); lead y 432-457; New Loops link y 432 at x 1256-1360; app frame y 527-1247 (x 60-1380); stage background y 527-1295 (x 12-1428); logo row y 1407-1447; POWERING eyebrow y 1483; text max width headline breaks after "development" (line 1 763px, line 2 844px wide); lead one line, 505px; media App frame 1320x720 at x 60, radius 12px, fill #101112, 1px rgba(255,255,255,0.08) border, a 512px grain PNG overlay (grain.png) at low alpha; inner app view inset 8px top/right/bottom and 240px left (sidebar 232px), radius 8px, 1px rgba(255,255,255,0.05) border, ring 0 0 0 2px rgba(0,0,0,0.2). Stage behind it: 1416x768 at x 12 y 527, radius 6px, background radial-gradient(52.53% 57.5% at 50% 100%, rgba(8,9,10,0) 0%, rgba(8,9,10,0.5) 100%), linear-gradient(#08090A 10%, #D0D6E0 100%): near black at top, pale grey band along the bottom (sampled #7E8185 at bottom centre). A full-bleed PNG (hero-stage-background.png, 2560x1429, shown 1440x804 at y 491) adds the shadow pool. PLACE THE CAPTURE: hero-app-frame-desk@2x.png is the frame at rest; hero-stage-desk@2x.png is frame + stage as one picture (1440x800 at 2x).; cta size no button in the hero; the only action is the 15px "New Loops ->" link (New 510 #D0D6E0, Loops -> 400 #8A8F98, 11px gap), href https://linear.app/now/introducing-loops
- phone: order headline, lead, New Loops link, app frame (bleeds off the right edge), logo marquee, POWERING eyebrow; alignment left, 24px gutter; sizes H1 38px/41.8px 510 -0.836px in 4 lines (y 196-363, 343px box); lead 15px/24px #8A8F98, 276px wide, 2 lines (y 383); New Loops 13px/19.5px (y 451); frame from x 16, y ~520 to ~880, cut by the right viewport edge (use hero-app-frame-phone@2x.png); hero band ends y 911. SETTLED r1 (measured 2026-10-30): the app stage is a 390x360 box at y 521 (overflow hidden); the frame inside it is 660x360 at x 18, radius 12px, fill #090A0B, its right side cut by the viewport. Show the phone capture at that size (left edge x 18, width 660 → clipped at 390, height 360); never add padding around it, never scale it down to fit the width. The frame bottom is y 881, then the stage's grey glow continues to the hero band end at y 911. Use hero-stage-phone@2x.png placed at x 0, y 521, 390x390: it already contains the frame and the glow.; hidden the right half of the app (chat panel) is off-screen; logo marquee Measured 2026-10-30: phone logo marquee at y 945-975, 7 logos repeating every 721px, logo widths 62/68/43/53/76/76/64 px (heights 13-30, about 0.75x desktop: desktop widths 82/90/57/70/101/101/86), about 40px between logos; about four logos visible across 390px. Never desktop-size logos on phone.
- at rest: Headline fully set in two lines, #F7F8F8. On load the headline words slide/blur in and the app frame rises: animation only, build the end state. The chat panel in the frame shows a finished agent reply; the reply field is empty ("Reply..."). Nothing types at rest.
- media: Live DOM, no source file: use hero-app-frame-desk@2x.png (2640x1440, the 1320x720 frame) on desktop and hero-app-frame-phone@2x.png on phone; or the composite hero-stage-desk@2x.png including the stage glow. SETTLED r1: desktop uses the composite hero-stage-desk@2x.png only, at x 0, y 491, 1440x800 (do not also draw a CSS stage or frame); phone uses hero-stage-phone@2x.png.
- type: H1 Inter Variable 64px/64px weight 510, letter-spacing -1.408px, #F7F8F8, features cv01 ss03, optical size auto (Display cut); lead 15px/24px 400 -0.165px #8A8F98
- cta: none; Sign up lives in the nav
- proof: Logo row below the stage: seven monochrome white wordmarks spread with justify-content space-between across x 80-1360 (OpenAI 82x17 at x 80, Vercel 90x19 x 277, Salesforce 57x40 x 483, Figma 70x26 x 655, Cursor 101x24 x 841, coinbase 101x18 x 1057, ramp 86x23 x 1274), vertically centred in a 40px row at y 1407; then the mono eyebrow POWERING THE COMPANIES BUILDING THE FUTURE 12px/16.8px 400 uppercase #62666D at x 80 y 1483. The whole logo row is one link to /customers. Phone: the row becomes a horizontal marquee (logos cut at both edges), eyebrow at x 16 y 1011.
- copy:
  - H1 (2 lines desktop, break after "development"): "The product development / system for teams and agents"
  - Lead (1 line desktop): "Purpose-built for planning and building products. Designed for the AI era."
  - Right link: "New" + "Loops →"
- copy prov: observed, verbatim, https://linear.app/ (2026-10-30)

**Statement**
- summary: A three-line 48px statement: the first sentence in #F7F8F8, the rest in #8A8F98, left-aligned, no media.
- ground: #08090A
- desktop: H2 x 78 y 1596, 1250px box (padding 0 32px), 3 lines of 48px/48px 510 -1.056px; line 1 "A new species of product tool." #F7F8F8 then continues in #8A8F98; 136px below the eyebrow
- phone: H2 24px/31.92px 510 -0.288px, x 15 (8px padding) y 1076, 6 lines in 359px, same two-tone split
- anatomy:
  - Two colours in one heading: lead sentence #F7F8F8, remainder #8A8F98
  - No eyebrow, no button
- components:
  - two-tone statement heading
- copy:
  - "A new species of product tool." (#F7F8F8) then, same heading, "Purpose-built for modern teams with AI workflows at its core, Linear sets a new standard for planning and building products." (#8A8F98)
  - Eyebrow above it (desktop y 1483): "POWERING THE COMPANIES BUILDING THE FUTURE"
- copy prov: observed, verbatim, https://linear.app/ (2026-10-30)

**Benefits (FIG 0.1-0.3)**
- summary: Three equal columns split by 1px hairlines; each has a mono FIG label, a centred isometric line drawing, a 15px/510 title and a 15px muted two-line description.
- ground: #08090A
- desktop: y 1876-2344 (468px), container x 48 w 1344 padding 0 32px; columns 427px (x 80, 507, 933) with border-right 1px rgba(255,255,255,0.08) on the first two; column padding 0 32px (first 0 32 0 0, last 0 0 0 32). FIG label y 1876; drawing centred ~265x262 at y ~1935; title y 2264; description y 2296 (368px max, 2 lines). Section ends with a full-width separator at y 2504
- phone: Horizontal scroll-snap carousel (x mandatory) of 328x440 cards with 8px gap starting x 8 (y 1334): fill #0F1011, 1px rgba(255,255,255,0.05) border, radius 8px, padding 0 24px 28px; drawing ~230x227 top-centred, title y 1641, description 250px wide in 3 lines. No FIG labels on phone. Capture: benefit-card-phone@2x.png. SETTLED r1: the carousel track starts at x 8 (8px left inset from the viewport, never flush), first card x 8-336, card text starts x 32 (24px card padding); the second card peeks in from x 344.
- anatomy:
  - FIG 0.1 / FIG 0.2 / FIG 0.3: mono 12px/16.8px uppercase #8A8F98
  - Line drawings: 1px strokes in #D0D6E0 and #3E3E44/#2E2E32 over #08090A fills (benefit-fig-01..03.svg)
  - Titles: Purpose-built, Powered by agents, Designed for speed (15px/24px 510 #D0D6E0); descriptions 15px/24px 400 #8A8F98
- components:
  - figure column
  - hairline column divider
- copy:
  - FIG 0.1 / Purpose-built / "Linear is shaped by the practices and principles of world-class product teams."
  - FIG 0.2 / Powered by agents / "Designed for workflows shared by humans and agents. From drafting PRDs to pushing PRs."
  - FIG 0.3 / Designed for speed / "Reduces noise and restores momentum to help teams ship with high velocity and focus."
- copy prov: observed, verbatim, https://linear.app/ (2026-10-30)

**Feature section: Intake and integrations**
- summary: Two-column header (48px two-line title left, 24px lead + Learn more right), a full-width product illustration that bleeds past the container, then a Features row of plus-links.
- ground: #08090A
- desktop: section y 2546-3772, padding 128px 0. Header y 2674 (252px incl. 96px bottom padding): H2 x 78 w 542 (2 lines, forced break "Intake / and integrations"); lead x 752 w 566, 24px/31.92px #D0D6E0, 3 lines; Learn more -> at x 752 y 2806. Illustration y 2926-3552 (626px): Slack-style thread card (480x559, radius 16px, fill #0F1011 + 2% white, 1px rgba(255,255,255,0.08)) overlapping the left edge of a kanban board panel (#0F1011, inset ring #23252A, radius 12px top) that fades out to the right. Features row y 3588: label "Features" 15px #62666D at x 80; links in two 304px columns at x 752 and x 1088 (the second column has a 1px rgba(255,255,255,0.08) rule on its left at x 1056): Linear Agent +, Triage + | Customer Requests +, Linear Asks +. Full-width separator at y 3772
- phone: Illustration first (x 16 w 358, ~312px tall, cropped to the chat card), then header with padding 40px 0 48px: H2 24px/31.92px 2 lines at x 23, lead 15px/24px #8A8F98 3 lines, Learn more 15px. No Features row. Separator line between sections
- anatomy:
  - Title: 48px/48px 510 -1.056px #F7F8F8 always two lines
  - Lead: 24px/31.92px 400 -0.288px #D0D6E0, max 566px
  - Learn more: 15px #8A8F98 + arrow #62666D, hover label #F7F8F8
  - Illustration: live DOM, use intake-illustration-desk@2x.png / -phone@2x.png
  - SETTLED r1 (measured 2026-10-30): the lead is 3 lines (81px tall, top y = header top); "Learn more" (79x24) sits 50px below the lead's last line on desktop (lead bottom +50) and 25px below on phone. Never a 4-10px gap.
  - SETTLED r1: Features-row links align to the same x as the lead: column 1 at x 752, column 2 at x 1088 (each column 272px of text inside its 304px track; the 1px rule sits at x 1056). Size the grid so nothing pulls these left of x 752; check with a bounding box.
  - SETTLED r1 (measured): every header is 252px tall (incl. 96px bottom padding), 2-line H2, 3-line lead. The illustration box is y 2926-3552 (626px; it can overlap the header bottom by up to 32px, which is real). Place the illustration capture at exactly that box, full-bleed 1440 wide. Phone: illustration box y 1899-2211, then the 269px header.
- components:
  - section header
  - learn-more link
  - features row
  - product illustration panel
- copy:
  - H2: "Intake / and integrations"
  - Lead: "Automatically turn conversations and customer feedback into actionable issues that are instantly routed, labeled, and prioritized for the right team."
  - Link: "Learn more →"
  - Features row links, in DOM order: Linear Agent +, Customer Requests +, Triage +, Linear Asks +
- copy prov: observed, verbatim, https://linear.app/ (2026-10-30)

**Feature section: Planning and monitoring**
- summary: Same header pattern; illustration is a roadmap timeline (left) under a "Cycle time by agent" scatter chart card (right half).
- ground: #08090A
- desktop: section y 3782-5011; header y 3910; illustration y 4130-4763: timeline panel full-bleed from x 0 (#0F1011, top border 1px #23252A, dashed grid lines repeating 2px #2E2E32 / 4px gap) and a 672x632 chart card at x 720 (radius 12px, #0F1011 + 2% white, 1px rgba(255,255,255,0.08), grain overlay) with teal dot clusters and thin red/orange step lines. Features: Projects +, Pulse +, Visual planning + | Documents +, Initiatives +, Insights + (y 4799)
- phone: Illustration (timeline only, JUN-AUG) 358x306, then header. Use planning-illustration-phone@2x.png
- anatomy:
  - Use planning-illustration-desk@2x.png (1440x680 at 2x)
  - Title breaks "Planning / and monitoring"
  - SETTLED r1 (measured 2026-10-30): the lead is 3 lines (81px tall, top y = header top); "Learn more" (79x24) sits 50px below the lead's last line on desktop (lead bottom +50) and 25px below on phone. Never a 4-10px gap.
  - SETTLED r1: Features-row links align to the same x as the lead: column 1 at x 752, column 2 at x 1088 (each column 272px of text inside its 304px track; the 1px rule sits at x 1056). Size the grid so nothing pulls these left of x 752; check with a bounding box.
  - SETTLED r1 (measured): every header is 252px tall (incl. 96px bottom padding), 2-line H2, 3-line lead. The illustration box is y 4130-4763 (633px; it can overlap the header bottom by up to 32px, which is real). Place the illustration capture at exactly that box, full-bleed 1440 wide. Phone: illustration box y 2491-2797, then the 269px header.
- components:
  - section header
  - features row
  - product illustration panel
- copy:
  - H2: "Planning / and monitoring"
  - Lead: "Plan and navigate from idea to launch. Align your team with product initiatives, strategic roadmaps, and clear, up-to-date PRDs."
  - Link: "Learn more →"
  - Features row links, in DOM order: Projects +, Documents +, Pulse +, Initiatives +, Visual planning +, Insights +
- copy prov: observed, verbatim, https://linear.app/ (2026-10-30)

**Feature section: AI and automations**
- summary: Same header; illustration is a row of four 400x560 agent chat panels (Cursor, Linear, ChatPRD) that fade out at both ends.
- ground: #08090A
- desktop: section y 5021-6253; header y 5149; illustration y 5401-6033: panels 400x560 with 12px gap starting x -98 (first cut by the left edge), fill #0F1011, 1px rgba(255,255,255,0.12), radius 12px, shadow 0 2px 32px rgba(0,0,0,0.25); outer panels dimmed. Features: Linear Agent +, Triage + | Coding sessions +, Linear MCP + (y 6069)
- phone: Illustration becomes an "Assign to..." picker (Codex Agent, Steven, Ema, GitHub Copilot Agent, Cursor Agent), then header. Use ai-agents-illustration-phone@2x.png
- anatomy:
  - Use ai-agents-illustration-desk@2x.png
  - Title breaks "AI and / automations"
  - SETTLED r1 (measured 2026-10-30): the lead is 3 lines (81px tall, top y = header top); "Learn more" (79x24) sits 50px below the lead's last line on desktop (lead bottom +50) and 25px below on phone. Never a 4-10px gap.
  - SETTLED r1: Features-row links align to the same x as the lead: column 1 at x 752, column 2 at x 1088 (each column 272px of text inside its 304px track; the 1px rule sits at x 1056). Size the grid so nothing pulls these left of x 752; check with a bounding box.
  - SETTLED r1 (measured): every header is 252px tall (incl. 96px bottom padding), 2-line H2, 3-line lead. The illustration box is y 5401-6033 (632px; it can overlap the header bottom by up to 32px, which is real). Place the illustration capture at exactly that box, full-bleed 1440 wide. Phone: illustration box y 3076-3378, then the 269px header.
- components:
  - section header
  - features row
  - product illustration panel
- copy:
  - H2: "AI and / automations"
  - Lead: "Build and deploy AI agents that work alongside you as teammates. Work on complex tasks together or delegate entire issues end-to-end."
  - Link: "Learn more →"
  - Features row links, in DOM order: Linear Agent +, Coding sessions +, Triage +, Linear MCP +
- copy prov: observed, verbatim, https://linear.app/ (2026-10-30)

**Feature section: Build, review, and ship**
- summary: Same header; illustration is an issue list panel overlapped on the right by a split code-diff panel.
- ground: #08090A
- desktop: section y 6263-7483; header y 6391; illustration y 6642-7234: list panel 1326x560 at x 57 (#0F1011, radius 12px top), diff panel 1344x560 at x 496 bleeding off the right (shadow 0 0 32px rgba(8,9,10,0.8)), file path bar in mono #62666D, two code columns 14px/24px mono with red (#F34E52, 10% fill) and green (#27A644, 7% fill) 1px-left-border diff lines. Features: Issues +, Guided reviews +, Diffs + | Git automations +, Cycles +, Releases + (y 7270)
- phone: Illustration is a single diff column, then header. Use build-diff-illustration-phone@2x.png
- anatomy:
  - Use build-diff-illustration-desk@2x.png
  - Title breaks "Build, review, / and ship"
  - SETTLED r1 (measured 2026-10-30): the lead is 3 lines (81px tall, top y = header top); "Learn more" (79x24) sits 50px below the lead's last line on desktop (lead bottom +50) and 25px below on phone. Never a 4-10px gap.
  - SETTLED r1: Features-row links align to the same x as the lead: column 1 at x 752, column 2 at x 1088 (each column 272px of text inside its 304px track; the 1px rule sits at x 1056). Size the grid so nothing pulls these left of x 752; check with a bounding box.
  - SETTLED r1 (measured): every header is 252px tall (incl. 96px bottom padding), 2-line H2, 3-line lead. The illustration box is y 6642-7234 (592px; it can overlap the header bottom by up to 32px, which is real). Place the illustration capture at exactly that box, full-bleed 1440 wide. Phone: illustration box y 3657-3963, then the 269px header.
- components:
  - section header
  - features row
  - product illustration panel
- copy:
  - H2: "Build, review, / and ship"
  - Lead: "Streamline code reviews with clear diffs, better context, and fewer back-and-forth comments. Keep PRs moving without sacrificing quality."
  - Link: "Learn more →"
  - Features row links, in DOM order: Issues +, Git automations +, Guided reviews +, Cycles +, Diffs +, Releases +
- copy prov: observed, verbatim, https://linear.app/ (2026-10-30)

**Changelog**
- summary: 48px title, a 1px timeline rule with four dots, four equal entry columns (title, two-line excerpt, mono date), then View all ->. Desktop only.
- ground: #08090A
- desktop: H2 "Changelog" x 78 y 7644 48px/48px 510; rule y 7780 x 80-1360 1px rgba(255,255,255,0.08) with an ~8px dot at each column start (newest dot red, others grey #62666D on a dark ring); entries 272px wide at x 80, 416, 752, 1088 (336px pitch), y 7844: title 15px/24px 510 #D0D6E0, excerpt 15px/24px #8A8F98 clamped to 2 lines with ellipsis, date 12px/16.8px mono uppercase #62666D at y 7944. "View all ->" at x 78 y 8042 links /changelog
- phone: hidden on phone (hide-mobile)
- anatomy:
  - Each entry is one link to /changelog/<date-slug>
  - Dates read like OCT 22, 2026 (mono, uppercase)
  - Timeline marker (measured 2026-10-30, .changelogIndicator): a 32x32 square filled #08090A sits over the rule at each column start (x 68, 404, 740, 1076; y 7764), masking the line. Centred inside it: a 20px circle in the dot colour at opacity 0.1 (the halo) and a 6px solid dot in the dot colour. Dot colour: newest #EB5757, the other three #62666D. Never a bare dot.
- components:
  - timeline rule
  - changelog entry
- copy:
  - Entry 1: "Slack and GitHub loop triggers" / "Loops automate product work by responding to changes in Linear and connected tools. You can now trigger them from Slack and GitHub, share them as templates, and customize their reasoning levels." / OCT 22, 2026
  - Entry 2: "Stacked pull requests" / "Stacked pull requests are now displayed in Linear Diffs. Move through a stack and see review, CI, and merge status at a glance. Related PRs are grouped into a single collapsible row in Reviews, alongside their issue and project context." / OCT 8, 2026
  - Entry 3: "New controls for Linear coding agent" / "Coding sessions are the shortest path from issue to diff. Assign a task to Linear Agent, and it works in a secure cloud environment to write and test the code before opening a pull request for review." / SEP 24, 2026
  - Entry 4: "Loops for product management" / "Loops are recurring agent workflows for teams. They now respond to more workspace activity, including changes to initiatives, projects, and cycles. They can also edit Linear documents and post updates to Slack." / SEP 10, 2026
  - Excerpts clamp to 2 lines with an ellipsis. Link: "View all →"
- copy prov: observed, verbatim, https://linear.app/ (2026-10-30); changelog entries are live content and rotate

**Customer quotes**
- summary: Two coloured quote cards side by side inside a 1px #23252A outline: a wide OpenAI card (pastel blue-violet with a huge white logo watermark) and a narrow Ramp card (lime), then a proof line with Customer stories ->.
- ground: #08090A
- desktop: outline box x 48 y 8226 w 1344 h 492 (1px #23252A, padding 12px); cards 8px apart: OpenAI 880x480 at x 60 (radius 8px, linear-gradient(#B2D5FF, #DFD1FF) under a 40% white layer; 1200px white OpenAI mark watermark offset right), Ramp 432x480 at x 948 (#E4F222, radius 8px); card padding 24px 32px. Quote 32px/36px 400 -0.704px #08090A with text-indent -12.8px (hanging opening quote), max 550px / 368px; attribution row at the bottom: 64px logo (#08090A), 1px rgba(8,9,10,0.05) divider, name 14px/21px 510 and role 14px/21px 400 #08090A. Proof line y 8766: "Linear powers over 40,000 product teams. From ambitious startups to major enterprises." 15px #8A8F98 with 40,000 in #F7F8F8 at x 80; "Customer stories ->" right-aligned ending x 1360, href /customers
- phone: Horizontal carousel of 320x360 cards (8px gap, from x 8, y 4276): OpenAI, Ramp, then a third Opendoor card; quote 24px/31.92px -0.288px with text-indent -10.8px in a 232px column; attribution shows company only (Gabriel Peal / OpenAI). Proof line hidden
- anatomy:
  - Cards link to /customers/openai and /customers/ramp
  - Hover: no lift measured
  - Use customer-cards-desk@2x.png for the at-rest look, logos from quote-*.svg
  - SETTLED r1, desktop geometry (measured 2026-10-30): outline box padding is 12px 12px 0 (no bottom padding; 12+480 = 492). Card padding 24px 32px, so quote text starts at x 92 in the OpenAI card (card x 60) and x 980 in the Ramp card (card x 948), y 8262. OpenAI quote box 550px (3 lines, 108px); Ramp quote box 368px (3 lines). Attribution row at y 8652, 42px tall: logo box x 92-142 (50px wide), then a text block with padding-left 18px: name at x 161 (14px/21px 510), role directly below at y 8673 (14px/21px 400). No 64px logo boxes, no 24px gaps on desktop.
  - SETTLED r1, phone: cards 320x360 from x 8 (8px gap), card padding 20px 60px 28px 28px, so the quote starts x 36, y 4296, column 232px; attribution at y 4566: 48px logo box (x 36-84) then name at x 101 (block padding-left 16px), company name under it (phone shows company, not role). Ground of the off-screen Opendoor card is not measured; it never shows in the at-rest screenshot.
- components:
  - quote card
- copy:
  - OpenAI card: "You’ll probably build a better product, just because of the craft that using Linear infuses on your brain." — Gabriel Peal, Staff Software Engineer, OpenAI
  - Ramp card: "Our speed is intense and Linear helps us be action biased." — Nik Koblov, Head of Engineering, Ramp
  - Phone only, third card (off-screen at rest, x 664): "Linear is excellent, just excellent. It has the right opinions for fast moving teams." — Kaz Nejatian, Opendoor (links /customers/opendoor)
  - Proof line: "Linear powers over 40,000 product teams. From ambitious startups to major enterprises." + "Customer stories →"
- copy prov: observed, verbatim, https://linear.app/ (2026-10-30)

**Prefooter CTA**
- summary: Centred 72px two-line closing line and two centred pills.
- ground: #08090A
- desktop: margin 224px 0; H2 "Built for the future. / Available today." 72px/72px 510 -1.584px #F7F8F8 centred at y 9014 (722px box at x 359); buttons y 9198, 12px apart, centred: Get started (127x44, #E5E5E6 pill, text #08090A 16px/510, padding 0 20px) and Contact sales (144x44, rgba(255,255,255,0.05) fill, #F7F8F8 text, ring inset 0 0 0 1px rgba(255,255,255,0.03) + 0 0 0 1px rgba(0,0,0,0.6))
- phone: H2 38px/41.8px -0.836px centred, 2 lines at y 4735; same two pills side by side at y 4858 (x 54 and 193)
- anatomy:
  - Get started -> /signup, Contact sales -> /contact/sales
  - Hover: Get started fill #FFFFFF; Contact sales fill #191A1B
- components:
  - button primary pill
  - button ghost pill

**Footer**
- summary: Hairline-topped dark footer: logomark alone at left, five link columns, legal row underneath. No copyright, address or phone line is printed on the homepage (checked 2026-10-30).
- ground: #08090A, border-top 1px #23252A
- anatomy:
  - y 9466-9960 (494px); logomark 20x20 #F7F8F8 at x 80 y 9523 linking /
  - Columns at x 304, 528, 752, 976, 1200 (224px pitch, 160px wide); heading 13px/19.5px 510 #F7F8F8 at y 9523; links 13px/19.5px 400 #8A8F98 in 28px rows on a 30px pitch starting 44px below; hover #F7F8F8
  - Product: Intake, Plan, AI, Build, Pricing, Security
  - Features: Asks, Agents, Coding Sessions, Customer Requests, Insights, Mobile, Integrations, Changelog
  - Company: About, Customers, Careers, Now, Method, Quality, Brand
  - Resources: Switch, Download, Documentation, Developers, Status (linearstatus.com), Enterprise, Startups
  - Connect: Contact us, Community (/join-slack), X (Twitter), GitHub, YouTube
  - Legal row y 9885 at x 304: Privacy, Terms, DPA, AUP (13px #62666D, ~20px apart)
  - No copyright line, address or phone number on the page
- phone: No logomark; two columns at x 24 and x 211 (155px wide): Product | Features, Company | Resources, Connect | Legal (Privacy, Terms, DPA, AUP); Documentation is labelled "Docs"; group gap ~70px; footer y 4998-5876

**On dark grounds**
- secondary button: Contact sales: rgba(255,255,255,0.05) fill, #F7F8F8 16px/510 text, pill, inset 1px rgba(255,255,255,0.03) ring + 1px rgba(0,0,0,0.6) outer ring; hover #191A1B
- link: 15px #8A8F98 label + #62666D arrow; hover label #F7F8F8
- muted text hex: #8A8F98 (body), #62666D (eyebrows, arrows, legal)
- hairline hex: rgba(255,255,255,0.08) on #08090A, solid equivalent #23252A
- logo variant: white wordmark/logomark in #F7F8F8 (the guide's Mercury White #F4F5F8 in brand pieces)

## Components

- **button primary pill** (observed): fill #E5E5E6, text #08090A, border 1px solid #E5E5E6, ring px 1, ring #E5E5E6, radius pill, height 44, padding x 20, padding 0 20px, font size 16, weight 510, face body, text style 16px/44px Inter Variable 510, shadow 0 1px 1px rgba(0,0,0,0.07), 0 3px 2px rgba(0,0,0,0.04), 0 5px 2px rgba(0,0,0,0.01), example Get started (127x44); nav Sign up is the 32px size: 13px/510, padding 0 12px, 73x32, transition border, background-color, color 0.16s cubic-bezier(0.25,0.46,0.45,0.94)
  - hover (observed): fill #FFFFFF
- **button ghost pill** (observed): fill #141516, text #F7F8F8, radius pill, height 44, padding x 20, padding 0 20px, font size 16, weight 510, face body, text style 16px/44px Inter Variable 510, shadow inset 0 0 0 1px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(0,0,0,0.6), 0 4px 4px rgba(0,0,0,0.1), example Contact sales (144x44), css fill rgba(255,255,255,0.05) over #08090A (renders #141516)
  - hover (observed): fill #191A1B
- **nav link pill** (observed): fill none, text #8A8F98, radius pill, height 32, padding x 12, padding 0 12px, font size 13, weight 400, face body, example Customers, Pricing, Log in, transition color, background 0.1s cubic-bezier(0.25,0.46,0.45,0.94)
  - hover (observed): text #F7F8F8, fill rgba(255,255,255,0.08)
- **learn more link** (observed): text #8A8F98, arrow #62666D, font size 15, weight 400, face body, anatomy label + 2px gap + right arrow glyph in a 22x32 span; radius 4px focus ring, example Learn more ->, View all ->, Customer stories ->
  - hover (observed): label #F7F8F8, arrow #62666D
- **features link** (observed): text #8A8F98, plus #62666D 18px/28.8px, font size 15, weight 400, face body, anatomy label + 8px + "+" glyph; items stacked on a 28px pitch in two 304px columns, the right column with a 1px rgba(255,255,255,0.08) rule on its left, example Linear Agent +. Each opens an inline feature preview (not measured)
  - hover (observed): label #FFFFFF, plus #8A8F98
- **footer link** (observed): text #8A8F98, font size 13, weight 400, face body
  - hover (observed): text #F7F8F8
- **illustration panel** (observed): fill #0F1011, border 1px solid rgba(255,255,255,0.08) or inset ring 0 0 0 1px #23252A, radius 12, anatomy 2% white wash, a 512px grain PNG overlay (grain.png), a 400px radial glow rgba(255,255,255,0.04) at one corner, a top-edge highlight radial-gradient at the corner nearest the light; panels fade into #08090A at the bleeding edge
- **quote card** (observed): radius 8, padding 24px 32px, text #08090A, anatomy quote top-left 32px with -0.4em hanging indent; bottom row: 64px company logo, 1px rgba(8,9,10,0.05) rule, name 14px/510 + role 14px/400, grounds OpenAI linear-gradient(#B2D5FF, #DFD1FF) + 40% white layer; Ramp #E4F222
- **benefit card phone** (observed): fill #0F1011, border 1px solid rgba(255,255,255,0.05), radius 8, padding 0 24px 28px, size 328x440

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| ui-fast | cubic-bezier(0.25, 0.46, 0.45, 0.94) | 100ms | Nav link colour and background, header border/background changes | observed |
| button | cubic-bezier(0.25, 0.46, 0.45, 0.94) | 160ms | Pill buttons: border, background-color and colour on hover | observed |
| hero-entrance |  |  | Headline words and the app frame fade/slide in on load; animation only, build the end state | observed |
| logo-marquee-phone |  |  | On phone the customer logo row scrolls horizontally as a marquee; desktop is static | observed |

## Icon tokens

Grid not published, stroke not published (published).

## Signature moves

### Monochrome mark with room to breathe

Where: every logo placement.
Do: wordmark (or logomark in tight layouts) in one color only, Mercury White #F4F5F8 on dark or Nordic Gray #222326 on light, with generous empty space around it, big or small. One mark per surface.
Don't: add color, gradients or effects to the mark, crowd it, or alter the supplied files.

### Chrome recedes, content leads

Where: interfaces, product shots and UI-like layouts.
Do: navigation and supporting chrome a few notches dimmer than the main content; compact tabs with rounded corners; fewer, smaller icons; borders rounded and low contrast so structure is felt rather than seen.
Don't: give every element equal weight, add separators without reason, or put colored backgrounds behind icons.

### Generated neutral themes

Where: grounds and surfaces in light and dark.
Do: neutral grays derived from base, accent and contrast in LCH, with little blue in the calculation for a timeless, neutral look; the 2026 refresh shifted toward a warmer, less saturated gray that stays crisp.
Don't: hand-pick saturated tints or let the neutrals go muddy-warm.

### Product UI is the illustration

Where: hero and every feature section.
Do: each section shows a real-looking slice of the app (thread, board, timeline, agent panels, diff) on #0F1011 panels with 1px white-8% borders, grain and a corner glow, bleeding off one edge and fading into the #08090A ground. One illustration per section.
Don't: use photos, stock illustration or flat mock-up screenshots with drop shadows on white.

### Four-step grey text ramp

Where: all copy on dark.
Do: #F7F8F8 headlines, #D0D6E0 leads and small titles, #8A8F98 body and links at rest, #62666D arrows, eyebrows and legal; emphasis comes from stepping up the ramp, never from colour.
Don't: introduce accent-coloured text or links.

## Messaging: rules

No messaging framework is published. The About page frames Linear as a new kind of product tool for teams and agents; the Method supplies the principles behind the claims.

Why it works: Claims tied to a published method and named customers read as earned rather than as marketing.

- Lead with what the product does for product teams; tie claims to the Method or a sourced fact
- Use 'product development' as the category
- Don't invent performance numbers or customer logos
- Don't call the product 'Linear app'

Not published: pillars, taglines or boilerplate as a brand standard (ours are read from About and the Method).

Sources: https://linear.app/about, https://linear.app/method, https://linear.app/method/introduction

## Voice: rules

The Method and design posts write plainly and briefly, state opinions with reasons, credit named people, and avoid jargon. Titles are sentence case (observed 2026-10-30).

Why it works: A tool that sells focus and clarity has to sound focused and clear.

|  |  |
|---|---|
| Naming | Linear (company and app); Linear Method |
| Case | sentence case (observed) |
| Person | we / you (observed) |

- Plain language, short scannable titles
- Don't coin terms for ordinary things
- Write only as much as needed
- Quote customers verbatim instead of summarizing
- Name: Linear, one word, capital L
- Don't write 'Linear app'
- Don't pad with adjectives or hype
- Don't use user-story phrasing

Not published: a voice or tone guide; banned-word list; punctuation and spelling rules.

Sources: https://linear.app/brand, https://linear.app/method/introduction, https://linear.app/method/write-issues-not-user-stories, https://linear.app/now/how-we-redesigned-the-linear-ui, https://linear.app/now/behind-the-latest-design-refresh

## Logo: rules

Three marks ship in the asset download: the wordmark (logomark plus 'Linear'), the logomark alone (a disc crossed by diagonal stripes), and a stylized icon for social and chip uses. All are shown in one color, white on dark or Nordic Gray on light.

Why it works: A monochrome mark works on any ground, and the stripes read as motion without needing color.

|  |  |
|---|---|
| Lockups | wordmark; logomark; icon |
| Color | monochrome: #F4F5F8 or #222326 |
| Clear space | not published ('plenty of space') |
| Minimum size | not published |
| Files | SVG + PNG, light and dark |

- Use the wordmark in all references to Linear when space allows
- Logomark for tight layouts or logo-only grids; the wordmark has stronger recognition
- Icon when referring to Linear as a company (social) or where a chip is needed, with an appropriate corner radius
- Monochrome preferred, in Mercury White or Nordic Gray
- Give the marks plenty of space, big or small; never cramped
- Don't alter the files in any way
- Don't imply a relationship, affiliation or endorsement by Linear
- Don't use the graphics in your own product or company name
- Don't combine them with other graphics without written consent

Not published: clear-space measurement; minimum size; placement rules; co-branding lockups; icon corner radius value.

Real examples, to look at on Linear's own pages (not for reuse):
- Official wordmark, white, for dark grounds: https://linear.app/brand
- Official wordmark, Nordic Gray: https://linear.app/brand
- Logomark, white: https://linear.app/brand
- Logomark, Nordic Gray: https://linear.app/brand
- Stylized icon for social and chip uses: https://linear.app/brand
- App icon: https://linear.app/brand
- The brand page: wordmark, logo and icon tiles on dark and light: https://linear.app/brand

Sources: https://linear.app/brand

## Color: rules

The guide publishes two colors, Mercury White #F4F5F8 and Nordic Gray #222326, as light and dark accents for the monochrome wordmark. It describes the primary brand color as a subtle desaturated blue reserved for backgrounds, without a value. Product themes are generated in LCH from base, accent and contrast; the 2026 refresh moved the default themes from a cool blue-ish gray toward a warmer, less saturated gray. linear.app renders on a near-black ground (observed 2026-10-30; values in the anatomy step).

Why it works: Generated, near-neutral grounds keep a dense interface calm and let content carry the color.

|  |  |
|---|---|
| Mercury White | #F4F5F8 / RGB 244 245 248 |
| Nordic Gray | #222326 / RGB 35 35 38 |
| Theme inputs | base, accent, contrast (LCH) |
| Brand blue | not published |

- Wordmark in Mercury White on dark, Nordic Gray on light
- Keep grounds neutral; the brand blue is for backgrounds only
- Light and dark both supported
- Neutrals with little blue chroma; warm but crisp, never muddy
- Don't color the wordmark
- Don't use saturated color for chrome
- Don't invent a hex for the brand blue

Not published: the primary brand blue's hex; accent or status colors; color proportions.

Real examples, to look at on Linear's own pages (not for reuse):
- Mercury White and Nordic Gray swatches on the brand page: https://linear.app/brand
- 2026 refresh post, including the in-app color tool: https://linear.app/now/behind-the-latest-design-refresh
- 2024 redesign post: LCH vs HSL, contrast 30 vs 100, new light and dark themes: https://linear.app/now/how-we-redesigned-the-linear-ui

Sources: https://linear.app/brand, https://linear.app/now/how-we-redesigned-the-linear-ui, https://linear.app/now/behind-the-latest-design-refresh, https://linear.app/now/styling-linear-for-the-future-stylex

## Typography: rules

Inter throughout. The 2024 redesign set headings in Inter Display for expression and kept regular Inter for the rest. On linear.app the face loads as Inter Variable with headings at weights 510-590 and tight negative tracking (observed 2026-10-30). The Method page's large title uses a serif, Tiempos Headline (observed 2026-10-30), an editorial exception.

Why it works: One neutral, highly legible family suits a dense tool; the display cut adds character only where headings need it.

|  |  |
|---|---|
| Headings | Inter Display (published) |
| Text | Inter (published) |
| Licence | SIL OFL 1.1 (open) |
| Site weights | 400 / 510 / 590 (observed) |

- Headings: Inter Display
- Everything else: Inter
- Sentence-case headings (observed)
- Don't mix in other sans families
- Don't set long text in the display cut

Not published: type scale; weights per role; leading and tracking; a mono face; use of the Tiempos serif.

Real examples, to look at on Linear's own pages (not for reuse):
- Redesign post: Inter Display headings over Inter body: https://linear.app/now/how-we-redesigned-the-linear-ui
- Method page with its serif title (observed): https://linear.app/method

Sources: https://linear.app/now/how-we-redesigned-the-linear-ui, https://linear.app/brand, https://linear.app/method

## Graphic elements: rules

The design posts describe the graphic system through the interface: an inverted-L chrome around the main view, compact rounded tabs, few low-contrast rounded borders, and, on mobile, a custom glass material with blur, gradient and a moving specular highlight but no refraction.

Why it works: Every element is tuned to recede so the work leads; depth comes from light, not ornament.

- Structure felt, not seen: fewer separators, softer contrast, rounded edges
- Dim navigation relative to content
- Glass (mobile): blur, subtle gradient, specular highlight; solid outlines under Increase Contrast
- Don't add separators without reason
- Don't use refraction on dense UI
- Don't decorate for its own sake

Not published: border widths; radius values; shadow or elevation values.

Real examples, to look at on Linear's own pages (not for reuse):
- New borders (left) vs old: fewer separators: https://linear.app/now/behind-the-latest-design-refresh
- Concept and after screens of the 2024 redesign: https://linear.app/now/how-we-redesigned-the-linear-ui

Sources: https://linear.app/now/behind-the-latest-design-refresh, https://linear.app/now/how-we-redesigned-the-linear-ui, https://linear.app/now/linear-liquid-glass

## Iconography: rules

Icons identify projects, issues, initiatives and statuses at a glance. The 2026 refresh cut their number, shrank them and removed colored team-icon backgrounds.

Why it works: Icons should help recognition without competing for attention.

- Use icons where they aid recognition, sparingly
- Small sizes in chrome
- No colored backgrounds behind team icons
- Don't add icons to every row
- Don't use filled color plates

Not published: icon grid; stroke weight; sizes; icon library name.

Sources: https://linear.app/now/behind-the-latest-design-refresh

## Illustration: rules

No illustration style is published. Linear's marketing and posts show product UI renders, often dark and softly lit, rather than illustration (observed 2026-10-30).

Why it works: Showing the product itself is the proof.

- Prefer real interface imagery over illustration
- Don't invent an illustration style and present it as Linear's

Not published: illustration style; characters; diagram style.

Real examples, to look at on Linear's own pages (not for reuse):
- Homepage hero: product UI as the imagery (captured at rest 2026-10-30): https://linear.app/

Sources: https://linear.app/, https://linear.app/now/behind-the-latest-design-refresh

## Photography: rules

No photography guidance is published. The About page shows team portraits and the Quality series uses video of interviewees (observed 2026-10-30).

- Don't present stock photography as on-brand

Not published: photography style; treatment; crops.

Real examples, to look at on Linear's own pages (not for reuse):
- About page: team grid: https://linear.app/about

Sources: https://linear.app/about, https://linear.app/quality

## Motion: rules

No motion values are published. The posts describe motion qualitatively: on mobile, touched elements lift slightly, over-scroll distorts the view, scroll edges blur progressively, and highlights shift with movement.

Why it works: Motion as physical feedback, not decoration.

- Subtle, physical feedback on touch
- Light and blur respond to movement
- Don't add decorative animation

Not published: easing curves; durations.

Sources: https://linear.app/now/linear-liquid-glass

## Interface and layout: rules

The app uses an inverted-L chrome (sidebar plus top bar) controlling the main view, with structured layouts for list, board, timeline, split and fullscreen. The redesign aligned labels, icons and buttons across sidebar and tabs and leaned on Apple standards for a native feel. The brand page centers a single narrow column on a dark ground (observed 2026-10-30).

Why it works: Predictable placement and alignment let a dense product feel calm.

- Put actions in predictable places
- Align labels, icons and buttons on shared lines
- Keep density, reduce noise
- Don't let headers place actions inconsistently
- Don't crowd the logo

Not published: grid; margins; breakpoints; spacing scale.

Real examples, to look at on Linear's own pages (not for reuse):
- Brand page layout: centered column, tiles on dark: https://linear.app/brand
- Refresh post: dimmer sidebar, compact tabs: https://linear.app/now/behind-the-latest-design-refresh

Sources: https://linear.app/now/how-we-redesigned-the-linear-ui, https://linear.app/now/behind-the-latest-design-refresh, https://linear.app/brand

## Rules: rules

The guide's hard rules are about naming and the marks: spelling, monochrome use, space around assets, and no alteration or implied endorsement.

Why it works: Few rules, strictly kept.

- Linear, one word, capital L; not 'Linear app'
- Wordmark by default; logomark in tight layouts; icon for company and chip uses
- Monochrome Mercury White or Nordic Gray
- Plenty of space around marks
- Don't alter the supplied files
- Don't imply affiliation or endorsement
- Don't use the marks in another product's name
- Don't combine marks with other graphics without consent

Sources: https://linear.app/brand

## By format

How our engine applies Linear's system to each format. Our recipe from their published rules, not something Linear publishes. Level = how much beyond the neutral ground and type a format carries. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way linear.app is built (kit.spec.page, from the anatomy step): neutral ground, monochrome wordmark top left with space around it, Inter Display sentence-case headline, Inter body, product UI imagery, dim chrome, few low-contrast borders | light or dark ground; which sections and how much UI imagery |
| Deck | 1 | Neutral ground, monochrome mark, Inter Display headings, one idea per slide in plain words | dark or light; product screenshots |
| Proposal page | 1 | Neutral ground, Inter, plain brief copy, sourced claims only | one product image |
| Social | 2 | Icon with a corner radius as the avatar; monochrome mark; plain headline | product UI crop |

## Checks before anything ships

- **Logo hidden**: Cover the mark. It should still read as Linear: near-monochrome neutral ground, Inter Display headline, dim chrome around one focused content area, and a few plain words.
- **Swap test**: Put another project tool's logo on it. If the calm, the restraint and the plain copy don't feel out of place, it's generic, and it goes back.
- **Noise check**: Remove one border, icon or color. If nothing is lost, leave it out.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Linear's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- The primary brand color (a subtle desaturated blue): no hex published.
- Any accent, status or UI color beyond Mercury White and Nordic Gray: not published (site colors come as observed in the anatomy step).
- Logo clear space, minimum size, placement and co-branding: not published beyond 'plenty of space'.
- Icon corner radius for the chip/social icon: not published.
- Type scale, weights per role, leading and tracking: not published; only Inter Display for headings and Inter for text.
- A mono face: not published.
- The Tiempos Headline serif on the Method page is observed only; its role is not published.
- Motion easing and durations: not published.
- Icon grid, stroke and sizes: not published.
- Illustration and photography guidance: not published.
- Layout grid, spacing and breakpoints: not published.
- Voice and tone guide: not published; voice here is read from the Linear Method and design posts.
- Whether the supplied InterVariable.woff2 includes the Display optical size: assumed, not checked.

Logos and reference images belong to Linear. Look at them on Linear's own pages; don't reuse them.