Linear Design System

1. Visual Theme & Atmosphere

Linear treats darkness as its native medium — not as a “dark mode” toggled on, but as the foundational canvas upon which every element is deliberately placed. The body background at rgb(8, 9, 10) is not quite black; it carries the faintest warmth of near-black charcoal, allowing the layered surfaces above it — rgb(9, 10, 11), rgb(15, 16, 17), rgb(18, 19, 20) — to emerge through single-digit luminance increments. This is darkness as architecture: depth is communicated not through dramatic shadows but through almost imperceptible shifts in surface brightness, like rooms lit by distant starlight.

The typographic system reveals Linear’s engineering ethos with unusual precision. Inter Variable is the sole typeface, but it is deployed at weight 510 — a value that exists between regular (400) and medium (500), made possible only by variable font technology. This is not an accident or a rounding error. Weight 510 is the signature choice: it creates emphasis that registers subconsciously without ever shouting, a typographic whisper louder than a bold. For subheadings, 590 occupies a similar in-between space — heavier than medium, lighter than semibold — producing a hierarchy that feels calibrated rather than stepped. OpenType features cv01 and ss03 are active globally, replacing Inter’s default character forms with alternate glyphs that sharpen the geometric precision of the letterforms. Even the monospace choice — Berkeley Mono over the expected SF Mono — signals an aesthetic preference for crafted tools.

The color philosophy is almost entirely achromatic. White text appears at varying opacities — rgb(247, 248, 248) for primary content, rgb(208, 214, 224) for secondary, rgb(138, 143, 152) for tertiary — creating a hierarchy through transparency rather than distinct hue shifts. The single accent, rgb(94, 106, 210), is a muted indigo that reads as calm authority rather than urgent action. Borders drawn in rgba(255, 255, 255, 0.08) are barely visible — moonlight on glass — present enough to define boundaries without competing for attention. This is a design system that values information density managed through restraint: every pixel of contrast is earned.

2. Color Palette & Roles

Background Surfaces

Linear’s depth system is built on a remarkably narrow luminance range. The entire surface hierarchy lives between luminance 0 and 0.089 — a span so compressed that each layer whispers its elevation rather than declaring it.

Text Hierarchy

Linear builds its text hierarchy through careful modulation of near-white values, creating a reading experience where importance is felt before it is consciously parsed.

Brand & Accent

Status & Label Colors

Linear uses a curated set of status colors that remain vivid against the dark canvas without becoming garish — each chosen to be instantly distinguishable at small sizes.

Data Visualization

Contextual Highlights

Border System

3. Typography Rules

Font Stacks

Type Scale

Typographic Principles

The 510/590 System: Linear uses only two non-standard weights — 510 and 590 — both occupying the gaps between conventional weight stops. This is a signature move: 510 (between regular and medium) creates emphasis that feels earned rather than demanded, while 590 (between medium and semibold) provides hierarchy without the bluntness of 600. The result is a type system that whispers its structure.

Negative Tracking as Scale Increases: Letter spacing tightens progressively with size — from normal at 16px to -0.88px at 40px to -1.408px at 64px. This optical compensation prevents large text from appearing loose and scattered, maintaining the dense, engineered aesthetic at every scale.

OpenType Features: cv01 (character variant 01) and ss03 (stylistic set 03) are enabled globally across all non-code text. In Inter, cv01 provides alternate glyph forms for improved geometric consistency, while ss03 adjusts specific characters for better readability in UI contexts. These features are deliberately omitted from code and input elements, where standard character recognition matters more than aesthetic refinement.

The 15px Paragraph: Body text is 16px but paragraphs are 15px — a 1px reduction that may seem trivial but creates a subtle visual distinction between structural text (labels, headings) and flowing content, reducing the overall density perception without sacrificing readability.

4. Component Stylings

Border Radius Scale

Linear’s radius system is minimal and purposeful — no 12px or 16px “card” radii. Everything feels engineered, not decorated.

Button Patterns

Buttons in Linear are defined by restraint. The default button uses a transparent background with rgb(138, 143, 152) text — essentially a ghost button by default, elevating content over chrome.

Input & Textarea

Card / Container Patterns

5. Layout Principles

Spacing System

Linear’s spacing data reveals an interface built on zero-padding structural elements — the body, sections, header, and footer all carry 0px padding and margin. This is characteristic of a CSS-in-JS architecture where spacing is applied at the component level rather than through global structural rules.

Grid & Density Philosophy

The absence of gap values in structural elements, combined with the compressed luminance hierarchy (surfaces differing by 1-3 RGB values), reveals a layout strategy centered on visual proximity through surface color rather than whitespace. Elements belong together because they share a surface, not because they are spaced apart. This enables the information-dense interfaces Linear is known for — project boards, issue lists, and timelines where every pixel carries meaning.

Structural Observations

• 72px header offset: A fixed top navigation creates predictable content positioning
• No CSS custom properties detected: Linear’s empty customProperties object confirms a CSS-in-JS approach — design tokens live in JavaScript, not in the cascade. This keeps the design system programmatic and type-safe
• Next.js detected: The framework choice aligns with their performance-first philosophy — server rendering keeps initial paint fast despite the dense UI

6. Depth & Elevation

Shadow System

Linear’s approach to depth is defined by what it does not do. There are no sprawling, colorful box-shadows. Every shadow is pure black at low opacity — depth without drama.

Depth Philosophy

On a near-black canvas, traditional shadows (which darken their surroundings) are nearly invisible. Linear solves this in two ways: (1) the ring shadow technique, using 0px 0px 0px 1px spread to create hairline borders that respond to background color, and (2) multi-layer composite shadows that accumulate subtle opacity rather than relying on a single dramatic blur. The five-layer elevated shadow is particularly notable — its top layer is literally 0% opacity, a mathematical ghost, while the lower layers build just enough perceived depth for dropdowns and overlays. This is shadow engineering, not shadow decoration.

7. Do’s and Don’ts

Do

• Use the 510/590 weight pair for emphasis hierarchy — these in-between weights are Linear’s signature. Regular (400) for body, 510 for emphasis, 590 for strong emphasis.
• Build surface depth through 1-3 RGB value increments — the difference between rgb(8, 9, 10) and rgb(15, 16, 17) is the entire elevation model. Subtlety is the strategy.
• Apply rgba(255, 255, 255, 0.08) borders as your universal separator — this single value handles header borders, code blocks, and input fields. Consistency through constraint.
• Use ring shadows (0 0 0 1px) for contained elements rather than CSS borders — they render more consistently at sub-pixel levels and blend with the dark canvas.
• Enable cv01 and ss03 OpenType features on all UI text — these character variants are integral to Linear’s typographic identity. Omit them only for code and input elements.
• Let the 15px/16px body split work for you — structural UI at 16px, flowing content at 15px. The distinction is felt, not seen.
• Tighten letter-spacing proportionally as size increases — -0.24px at 20px, -0.88px at 40px, -1.408px at 64px. Large text must earn its density.

Don’t

• Don’t use saturated accent colors — Linear’s indigo (#5E6AD2) is deliberately muted. Bright blue or purple would feel juvenile against the achromatic system.
• Don’t add border-radius above 8px for rectangular elements — the scale tops at 8px for cards. No 12px, no 16px, no “friendly” pill shapes on containers.
• Don’t use white text at full opacity for body content — even primary text is rgb(247, 248, 248), not rgb(255, 255, 255). Pure white is reserved exclusively for text on accent backgrounds.
• Don’t apply shadows with colored tints — every shadow in the system is pure rgba(0, 0, 0, ...). Colored shadows would break the achromatic depth model.
• Don’t use weight 600 (semibold) or 700 (bold) — the heaviest weight in the entire system is 590. Bold text has no place in Linear’s restrained hierarchy.
• Don’t put spacing on structural elements — sections, headers, and footers carry zero padding. Spacing is a component concern, not a structural one.
• Don’t mix border techniques — choose either rgba(255, 255, 255, 0.08) CSS borders or rgba(0, 0, 0, 0.33) 0 0 0 1px ring shadows, not both on the same element.

8. Responsive Behavior

Breakpoints

Responsive Philosophy

Linear’s breakpoint system reveals a mobile-aware but desktop-first approach. The dense, information-rich interfaces that define the product naturally expand to fill wider viewports, while collapsing to simplified, stacked layouts on mobile. The 600px breakpoint — notably not 576px or 480px — suggests custom mobile targeting rather than adherence to a framework’s defaults.

Touch & Interaction Considerations

• 16px input font size prevents iOS auto-zoom on focus — a deliberate mobile accommodation
• Button text at 13px with 19.5px line height creates compact touch targets that still meet minimum sizing requirements
• 72px header offset accommodates both desktop navigation and mobile fixed headers
• No gap values on structural elements means responsive spacing is handled entirely through component-level logic, allowing fine-grained control at each breakpoint

9. Agent Prompt Guide

Quick Reference

Example Prompts

Prompt 1 — Hero Section

Build a hero section in the style of Linear. Use a rgb(8, 9, 10) background. The headline should be Inter Variable at 64px, weight 510, line-height 1.0, letter-spacing -1.408px, color rgb(247, 248, 248), with OpenType features cv01 and ss03 enabled via font-feature-settings: "cv01", "ss03". Below it, a subtitle at 20px weight 590 in rgb(208, 214, 224) with -0.24px letter-spacing. Add a primary CTA button with rgb(94, 106, 210) background, white text, 6px border-radius, and no border. The overall feel should be dark, precise, and information-dense — contrast achieved through typography weight, not color.

Prompt 2 — Card Grid

Create a grid of feature cards on a rgb(8, 9, 10) page background. Each card should use rgb(15, 16, 17) background with 8px border-radius — no visible border, depth comes from the 7-point RGB difference between card and canvas. Card titles in Inter Variable at 16px weight 590, rgb(247, 248, 248). Body text at 15px weight 400, rgb(208, 214, 224), letter-spacing -0.165px. Use the five-layer composite shadow for hover elevation: rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px.

Prompt 3 — Navigation Header

Build a fixed navigation header with transparent background. Use a bottom border of rgba(255, 255, 255, 0.08) — one pixel of moonlight — to separate it from content. Navigation links in Inter Variable at 14px weight 510, rgb(138, 143, 152), transitioning to rgb(247, 248, 248) on hover. Include a nav divider element at rgb(35, 37, 42). The overall header height should be approximately 72px, matching Linear’s main content top padding offset.

Prompt 4 — Issue/Task List

Design an issue list interface on rgb(18, 19, 20) (view surface). Each row uses the ring shadow technique — rgba(0, 0, 0, 0.33) 0 0 0 1px — instead of CSS borders, creating contained rows that blend with the dark canvas. Issue titles at 14px weight 510, rgb(247, 248, 248). Metadata in rgb(138, 143, 152) at 13px. Status dots use the label color palette: red #EB5757, violet #8B5CF6, indigo #6366F1, green #10B981, cyan #06B6D4 — each at 50% border-radius. The chat input area at the bottom should use rgb(22, 23, 24) — the highest elevated dark surface.

Prompt 5 — Code Block

Render a code block using Berkeley Mono at 12.25px, weight 400, line-height 1.3, letter-spacing -0.182px, color rgb(208, 214, 224). Background is rgba(255, 255, 255, 0.05) with a rgba(255, 255, 255, 0.08) border and 2px border-radius. For larger code blocks (pre), increase to 14px with 24px line-height. Do NOT enable OpenType features cv01/ss03 on code elements — these are reserved for the Inter Variable UI face only.

Generated by Sparkbites — extracted from live CSS analysis