Linear

Linear sets oversized Inter Variable headlines with tight tracking on a dark void canvas. Lime (#e4f222) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with bone white text and neutral surfaces. The most common corner radius is 9999px, with 8px and 50% on smaller elements.

linear.app ↗

Colors

Lime

#e4f222

Primary actions and links

Orchid

#f79ce0

Secondary accent and highlights

Void

#08090a

Page canvas

Bone White

#f7f8f8

Headlines and body copy

Soft Void

#0f1011

Surface or divider

Silver Mist

#8a8f98

Supporting colour

Ash

#62666d

Supporting colour

Pale Cobalt

#d0d6e0

Supporting colour

Fog

#e2e4e7

Surface or divider

Type scale

DisplayThe product development system for teams and agentsThe product developmentsystem for teamsInter Variable · 64px · 510

HeadingA new species of product tool. Purpose-built for modern teams with AI workflows at its corInter Variable · 48px · 510

SubheadingFaster app launchInter Variable · 20px · 590

BodyPurpose-built for planning and building products. Designed for the AI era.Inter Variable · 15px · 400

NavCustomersInter Variable · 13px · 400

Buttons

Sign upOur speed is intense and LineaGet started

Style reference measured from the public page at linear.app on 2026-10-12 for design education. Linear and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Linear — Style Reference
> Linear sets oversized Inter Variable headlines with tight tracking on a dark void canvas. Lime (#e4f222) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with bone white text and neutral surfaces. The most common corner radius is 9999px, with 8px and 50% on smaller elements.

**Theme:** dark · **Source:** https://linear.app (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Lime | `#e4f222` | `--color-accent` | Primary actions and links |
| Orchid | `#f79ce0` | `--color-secondary` | Secondary accent and highlights |
| Void | `#08090a` | `--color-canvas` | Page canvas |
| Bone White | `#f7f8f8` | `--color-ink` | Headlines and body copy |
| Soft Void | `#0f1011` | `--color-surface-1` | Surface or divider |
| Silver Mist | `#8a8f98` | `--color-surface-2` | Supporting colour |
| Ash | `#62666d` | `--color-surface-3` | Supporting colour |
| Pale Cobalt | `#d0d6e0` | `--color-surface-4` | Supporting colour |
| Fog | `#e2e4e7` | `--color-surface-5` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Inter Variable | 64px | 510 | 1.00 | -0.022em |
| Heading | Inter Variable | 48px | 510 | 1.00 | -0.022em |
| Subheading | Inter Variable | 20px | 590 | 1.33 | -0.012em |
| Body | Inter Variable | 15px | 400 | 1.60 | -0.011em |
| Nav | Inter Variable | 13px | 400 | 1.50 | 0 |

Font families on the page: Inter Variable, Berkeley Mono. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 9999px, 8px, 50%, 12px, 4px
- Primary button: background `#e4f222`, text `#f7f8f8`, radius 8px, padding 24px 32px, 16px / 400

More styles from the web

Apple iPhone

Stripe

Apple

Vercel

Notion

Figma

Framer

Spotify