Linear

DESIGN.md for AI coding agents

Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.

# DESIGN.md · Linear (WR-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web, macOS, iOS
- Color theme: Monochrome dark · Layout pattern: Split hero · Mood: Precise, engineering-minimal
- License / terms: Screenshots: fair-use reference captures; site content © Linear

Dark, monochrome marketing site led by large product UI renders; tiered pricing table; sign-up page with a minimal centered auth card.

### Analysis (ours)
Captured linear.app: near-black canvas (#08090A ESTIMATED), large white headline and a product-UI render as the hero visual; pricing is a dark four-column table; sign-up is a small centered card. Accent color is almost absent.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#08090A` ~42%
- `#F8F8F9` ~32%
- `#303135` ~4%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Top nav with CTA
- Product UI render
- Pricing table
- Centered auth card

## In-app tokens (ESTIMATED)
ESTIMATED · sampled by us from logged-in screenshots of the product (free account, 2026-10-22 ~23:52 (UTC+8)). Most frequent color inside each named UI region; approximate, not official Linear tokens.

### Light
- `#EFEFF0` Sidebar background
- `#F9F9FA` Main canvas
- `#EFEFF0` Group header row
- `#E1E1E2` Active nav item
- `#3B3B3B` Primary text (darkest pixel of issue titles)
- `#6D78D5` Primary button (Create new issue)
- `#6D78D5` Toggle on
- `#FFFFFF` Settings card
- `#BDBDBE` Modal overlay (dimmed canvas)

### Dark
- `#09090A` Onboarding background
- `#121213` Onboarding input
- `#080809` Settings sidebar
- `#121213` Settings canvas
- `#1A1A1B` Settings card
- `#5E6AD2` Toggle on
- `#FFFFFF` Primary text (brightest pixel of “Preferences” heading)

### In-app patterns (observed)
- **App shell layout:** Persistent left sidebar (~130px of a 1024px viewport) on a slightly darker gray than the main canvas; the content area is an inset rounded panel with a header row (breadcrumb + actions) and a view-tab row. A slim bottom bar holds help and Agent shortcuts.
- **Sidebar navigation:** Personal items first (Inbox with an unread count, My issues, Agent), then collapsible groups: Workspace, Your teams (team → Home / Issues / Projects / Views) and Try (import, invite, connect GitHub). Small 14px icons, compact rows, active row as a soft gray pill.
- **Density:** High information density: ~23px issue rows in the captured list (ID, status icon, title, assignee avatar, date), small type and tight spacing; color is reserved for status and the purple primary actions.
- **Command menu pattern:** Ctrl+K opens a centered palette over the current view: one input (“Type a command or search…”, plus “Ask Linear”), results grouped by object type, each row with an icon and its single-key or chord shortcut (C, V, N then P). It teaches shortcuts while you search.
- **Empty state pattern:** A monochrome line-art illustration, one sentence (“No issues assigned to you”) and a single primary CTA. Filter chips (Assigned / Created / Subscribed / Activity) stay visible, so the user keeps their bearings.
- **Modal pattern:** Issue creation is a centered card over a dimmed shell: breadcrumb (team › New issue), large borderless title field, description, a row of property chips, expand and close icons, plus a “Create more” toggle for batch entry and one primary button.
- **Onboarding pattern:** Five dark split-screen steps after workspace creation: a short form on the left, blurred product art on the right, progress dots, and Skip on every step; integrations (GitHub, Slack) are offered but optional.
- **Theme system:** Preferences offer System preference, Light, Pure Light, Dark and more, each previewed with an “Aa” chip; a separate Code theme follows the interface theme unless overridden. Light and dark keep identical layouts; only surfaces and text tokens swap.

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://linear.app/) → Pricing (https://linear.app/pricing) → Sign-up entry (https://linear.app/signup)

## Do’s and don’ts
- Do: Use a near-black canvas with high-contrast white text and at most one accent.
- Don’t: Don’t add multiple saturated accents or light-mode shadows.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://linear.app
- Capture: https://linear.app/
- Capture: https://linear.app/pricing
- Capture: https://linear.app/signup
- Library entry: https://design-library-byt.pages.dev/entry/WR-001