# Linear — Design Reference

> Graphite night, white type and hairlines drawn in light

**Theme:** dark · **Measured from:** linear.app (English, 1440 px)

Linear looks like the inside of a well-made tool. The canvas is near-black graphite (`#08090a`), never pure black, and every surface above it is only one or two steps lighter (`#0f1011`, `#161718`). Text is a cool off-white (`#f7f8f8` for headlines, `#d0d6e0` for body) set in Inter at an unusual 510 weight that sits between regular and medium. Structure comes from translucent white hairlines (`rgba(255,255,255,0.08)`), not from shadows or color. There is no colored call to action: the only filled button is a small light-gray pill. The hero illustration is the actual product UI, framed in a graphite window with a soft gray glow underneath. Color appears only as tiny status dots inside the app.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Night | `#08090a` | Page canvas; text on the light pill button |
| Graphite | `#0f1011` | Product frames, cards, panels |
| Raised | `#161718` | Elevated cards and popovers |
| Snow | `#f7f8f8` | Headlines; first half of two-tone headings |
| Frost Text | `#d0d6e0` | Body copy and UI labels |
| Steel | `#8a8f98` | Secondary text, nav links, gray half of two-tone headings |
| Dim | `#62666d` | Tertiary text, timestamps, mono captions |
| Hairline | `#23252a` | Solid borders (most borders are `rgba(255,255,255,0.08)`, `0.12` on cards) |
| Pill | `#e5e5e6` | Fill of the primary "Sign up" pill |
| Indigo | `#5e6ad2` | Brand accent: focus ring, @mentions, send button inside the app |
| Indigo Text | `#6d78d5` | Indigo for small text and icons |
| Green | `#27a644` | Status only (added lines, done) |
| Red | `#eb5757` | Status only (removed lines, urgent) |
| Yellow | `#f0bf00` | Status only (in-progress, starred) |

**Glow (hero only):** under the product frame, a vertical gradient from Night to `#d0d6e0` masked by a radial fade (`radial-gradient(52.53% 57.5% at 50% 100%, rgba(8,9,10,0) 0%, rgba(8,9,10,.5) 100%)`). It reads as a faint gray light behind the app. Use it once.

## Typography

**Inter Variable** for everything. Substitute: **Inter** from Google Fonts, using 500 for 510 and 600 for 590. **Berkeley Mono** for tiny captions and IDs. Substitute: **JetBrains Mono** 400.

- Headings use weight **510** — heavier than regular, lighter than medium. Never bold.
- Tracking is tight on large type: about `-0.022em` (`-1.408px` at 64px).
- Line height on headings is exactly 1.0; body sits at 1.6.
- Mono captions are uppercase, small and Dim: "POWERING THE COMPANIES BUILDING THE FUTURE", "FIG 0.2".

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 64px | 510 | 1 | -1.408px |
| Heading | 48px | 510 | 1 | -1.056px |
| Subheading | 24px | 400 | 1.33 | -0.288px |
| Card title | 20px | 590 | 1.33 | -0.24px |
| Body | 15px | 400 | 1.6 | -0.165px |
| Body small | 13px | 400 | 1.54 | -0.039px |
| Button | 13px | 510 | 1 | 0 |
| Label | 12px | 510 | 1.4 | 0 |
| Mono caption | 12px | 400 | 1.4 | 0 |

**Two-tone heading:** one paragraph at 48px, first sentence in Snow, the rest in Steel. Example: "A new species of product tool. *Purpose-built for modern teams with AI workflows at its core…*"

## Shape and spacing

- **Buttons:** full pill (`9999px`).
- **Cards and product frames:** 12px radius; small inner panels 8–9px.
- **Chips/tags:** 16px radius, 24px tall, 1px `#2e2e32` border, transparent fill.
- **Base unit:** 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 128.
- **Content width:** about 1280px (80px side margins at 1440).
- **Section gap:** very generous, roughly 256px of empty Night between feature sections (estimated from the screenshot).

## Components

### Primary button
Pill `#e5e5e6` fill, Night `#08090a` text, 1px `#e5e5e6` border, `9999px` radius, padding `0 12px`, 32px tall, Inter 510 at 13px. Near-invisible layered drop shadow. Label: "Sign up". It is small — Linear never uses big CTAs.

### Secondary action
Plain text, no box: "Log in" in Steel in the nav, or "Learn more →" / "Loops →" as a text link with an arrow. A "New" label in Snow can precede the link.

### Navigation
Transparent bar over Night with a 1px hairline bottom border. Logo mark + "Linear" wordmark left; links (Product, Resources, Customers, Pricing, Now, Contact) in Steel at 13px on the right, a short vertical divider, then "Log in" and the Sign up pill.

### Product frame
Graphite `#0f1011` window, 12px radius, 1px `rgba(255,255,255,0.12)` border, shadow `0 2px 32px rgba(0,0,0,0.25)`. Contains the real app UI: sidebar, issue view, an agent chat popover on Raised `#161718`. Sits on the hero glow.

### Two-column feature section
Left: a 48px heading broken over two lines ("Intake / and integrations") in Snow. Right: a 15–17px paragraph in Frost Text plus a "Learn more →" link in Steel. Below, a wide product-shot strip that fades into the canvas, then a "Features" row with small links in two columns.

### Figure columns
Three columns divided by vertical hairlines, each with a mono "FIG 0.x" caption on top, a thin line-art wireframe illustration in Dim, then a 15px title in Snow and two lines of Steel text.

### Logo rail
Customer logos in flat white, one row, with a mono uppercase caption underneath in Dim.

## Do

- Keep the canvas at `#08090a` and lift surfaces by only one or two steps.
- Draw structure with translucent white hairlines at 5–12% opacity.
- Set headings at weight 510 with tight tracking and line height 1.
- Write section headings as two-tone (Snow, then Steel).
- Show the real product UI as the main visual.
- Reserve color for tiny status dots and icons inside the product.

## Don't

- Don't use a colored marketing button; the only fill is the light-gray pill.
- Don't use pure black or pure white text.
- Don't use bold (700) headings.
- Don't add drop shadows to separate sections; use hairlines and spacing.
- Don't use gradients as decoration beyond the single hero glow.
- Don't crowd sections; leave large empty bands between them.

## Layout

Left-aligned hero: a two-line 64px headline in Snow, a one-line Steel subhead, and a "New · Loops →" link aligned right on the same baseline. Below, a full-width product frame on the gray glow. Then the logo rail, a two-tone manifesto heading, three FIG columns, and a repeating pattern of two-column feature sections (heading left, copy right, product strip below, "Features" links row).

## Agent prompt guide

- Canvas: `#08090a` · Panels: `#0f1011` · Raised: `#161718`
- Headline: `#f7f8f8` · Body: `#d0d6e0` · Secondary: `#8a8f98` · Tertiary: `#62666d`
- Borders: `rgba(255,255,255,0.08)` · Primary pill: `#e5e5e6` with `#08090a` text · Accent: `#5e6ad2`

Example prompts:

1. "Primary button: pill (9999px radius), background #e5e5e6, text #08090a, Inter 500 13px, padding 0 12px, height 32px, 1px #e5e5e6 border, no visible shadow."
2. "Two-tone section heading: one paragraph at 48px Inter weight 500, line-height 1, letter-spacing -1.056px; first sentence #f7f8f8, the rest #8a8f98, on #08090a."
3. "Product frame: background #0f1011, 12px radius, 1px border rgba(255,255,255,0.12), shadow 0 2px 32px rgba(0,0,0,0.25); inside, a sidebar and issue view in #d0d6e0 13px text with hairline dividers."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-night: #08090a;
  --color-graphite: #0f1011;
  --color-raised: #161718;
  --color-snow: #f7f8f8;
  --color-frost-text: #d0d6e0;
  --color-steel: #8a8f98;
  --color-dim: #62666d;
  --color-hairline: #23252a;
  --color-pill: #e5e5e6;
  --color-indigo: #5e6ad2;
  --color-indigo-text: #6d78d5;
  --color-green: #27a644;
  --color-red: #eb5757;
  --color-yellow: #f0bf00;

  /* Fonts */
  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', 'JetBrains Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 64px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.408px;
  --text-display--font-weight: 510;
  --text-heading: 48px;
  --text-heading--line-height: 1;
  --text-heading--letter-spacing: -1.056px;
  --text-heading--font-weight: 510;
  --text-subheading: 24px;
  --text-subheading--line-height: 1.33;
  --text-subheading--letter-spacing: -0.288px;
  --text-subheading--font-weight: 400;
  --text-card-title: 20px;
  --text-card-title--line-height: 1.33;
  --text-card-title--letter-spacing: -0.24px;
  --text-card-title--font-weight: 590;
  --text-body: 15px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: -0.165px;
  --text-body--font-weight: 400;
  --text-body-sm: 13px;
  --text-body-sm--line-height: 1.54;
  --text-body-sm--letter-spacing: -0.039px;
  --text-body-sm--font-weight: 400;
  --text-button: 13px;
  --text-button--line-height: 1;
  --text-button--font-weight: 510;
  --text-label: 12px;
  --text-label--line-height: 1.4;
  --text-label--font-weight: 510;
  --text-mono-caption: 12px;
  --text-mono-caption--line-height: 1.4;
  --text-mono-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 8px;
  --radius-cards: 12px;
  --radius-tags: 16px;

  /* Spacing */
  --spacing: 4px;

  /* Shadows */
  --shadow-card: 0 2px 32px rgba(0, 0, 0, 0.25);
  --shadow-ring: 0 0 0 1px rgba(0, 0, 0, 0.2);
  --shadow-inner-highlight: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);

  /* Layout */
  --container-page: 1280px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-night: #08090a;
  --color-graphite: #0f1011;
  --color-raised: #161718;
  --color-snow: #f7f8f8;
  --color-frost-text: #d0d6e0;
  --color-steel: #8a8f98;
  --color-dim: #62666d;
  --color-hairline: #23252a;
  --color-pill: #e5e5e6;
  --color-indigo: #5e6ad2;
  --color-indigo-text: #6d78d5;
  --color-green: #27a644;
  --color-red: #eb5757;
  --color-yellow: #f0bf00;

  /* Fonts */
  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', 'JetBrains Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 64px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.408px;
  --text-display--font-weight: 510;
  --text-heading: 48px;
  --text-heading--line-height: 1;
  --text-heading--letter-spacing: -1.056px;
  --text-heading--font-weight: 510;
  --text-subheading: 24px;
  --text-subheading--line-height: 1.33;
  --text-subheading--letter-spacing: -0.288px;
  --text-subheading--font-weight: 400;
  --text-card-title: 20px;
  --text-card-title--line-height: 1.33;
  --text-card-title--letter-spacing: -0.24px;
  --text-card-title--font-weight: 590;
  --text-body: 15px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: -0.165px;
  --text-body--font-weight: 400;
  --text-body-sm: 13px;
  --text-body-sm--line-height: 1.54;
  --text-body-sm--letter-spacing: -0.039px;
  --text-body-sm--font-weight: 400;
  --text-button: 13px;
  --text-button--line-height: 1;
  --text-button--font-weight: 510;
  --text-label: 12px;
  --text-label--line-height: 1.4;
  --text-label--font-weight: 510;
  --text-mono-caption: 12px;
  --text-mono-caption--line-height: 1.4;
  --text-mono-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 8px;
  --radius-cards: 12px;
  --radius-tags: 16px;

  /* Spacing */
  --spacing: 4px;

  /* Shadows */
  --shadow-card: 0 2px 32px rgba(0, 0, 0, 0.25);
  --shadow-ring: 0 0 0 1px rgba(0, 0, 0, 0.2);
  --shadow-inner-highlight: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);

  /* Layout */
  --container-page: 1280px;
}
```

---

*Measured from https://linear.app/ on 2026-10-28 by Faundr. Inspired by Linear; not its official design system and not affiliated with Linear.*