Linear Design System Reference

Foundation

Color Tokens

The full color palette extracted from Linear's design system, including primary backgrounds, accent colors, interactive states, neutrals, and surfaces.

Primary Background

#08090A

Hero sections · High-impact areas · Sophisticated foundation

Primary Text

#F7F8F8

Main text · Body copy · Interface labels

Primary Text Emphasis

#FFFFFF

Maximum contrast · Critical UI elements

Accent Pink

#F91880

Primary CTA · Highlights · User attention

Accent Green

#00BA7C

Success · Positive actions · Completion

Interactive Primary

#5E6AD2

Links · Interactive components · Navigation

Neutral 200

#E5E5E6

Light neutral · Secondary text · Subtle backgrounds

Neutral 300

#D0D6E0

Borders · Dividers · Tertiary content

Neutral 400

#8A8F98

Muted text · Placeholders · Secondary text

Neutral 500

#62666D

Labels · Captions · Muted content

Neutral 800

#0F1011

Nested containers · Layered surfaces · Strong background

Typography

Type Scale

Inter Variable and Berkeley Mono — refined fonts designed for technical teams and modern product experiences. Precise hierarchy with variable weights.

Primary Inter Variable UI · Headings · Body · Buttons · All text

Monospace Berkeley Mono Code · Technical content · Token values

Display 1 Build what matters 64px · 510 · 64px line

Display 2 Design System 72px · 510 · 72px line

Display 3 The quick brown fox 48px · 510 · 48px line

Heading 1 The quick brown fox 40px · 510 · 44px line

Heading 2 The quick brown fox jumps 24px · 590 · 31.92px line

Heading 3 The quick brown fox jumps over 20px · 590 · 26.6px line

Body The quick brown fox jumps over the lazy dog 16px · 400 · 24px line

Body Medium The quick brown fox jumps over the lazy dog 15px · 400 · 24px line

Body Small The quick brown fox jumps over the lazy dog 14px · 400 · 21px line

Button INTERACTIVE BUTTON TEXT 13px · 400 · 19.5px line

Code const token = '#F91880'; 14px · 400 · 21px line

Layout

Spacing & Shapes

8px base grid — every spacing token is a multiple of 8. Border radii range from sharp (0) to pill (9999px) for clarity and visual hierarchy.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

24px lg

32px xl

48px 2xl

96px 3xl

Border Radius

None 0px

SM 4px

MD 6px

LG 8px

Full 9999px

Shadows

Base Flat · no elevation

Raised Cards · subtle lift

Floating Dropdowns · tooltips

Modal Dialogs · fullscreen

Border Widths

Thin 1px

Medium 2px

Opacity

Full 100%

Reduced 70%

Muted 40%

Z-index / Layering

Base 1

Raised 2–3

Dropdown 50

Sticky 995–997

Modal 100+

Elevation

Depth & Surfaces

Minimal layering with two dark surface levels creates spatial hierarchy. Background (L0) → Nested (L1) — clean, focused depth architecture.

Primary Background

Core dark background · Hero sections · High-impact areas

L0 · #08090A

Nested Container

Cards · layers · elevated containers

L1 · #0F1011

Primary Background #08090A

Nested Container #0F1011

Overlay Strong rgba(255,255,255,0.05)

Border Standard rgba(255,255,255,0.05)

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states from Linear's palette.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: rgba(255,255,255,0.05) bg · #F7F8F8 text · 9999px radius · multiple shadows · 40px height. Secondary: #E5E5E6 bg · #08090A text. Ghost: transparent with color shift on hover.

Text Input

Form control — Default and Focused states

.input

Default: rgba(255,255,255,0.02) bg · rgba(255,255,255,0.08) border · 6px radius · 68px height. Focus: rgba(255,255,255,0.04) bg · rgba(255,255,255,0.15) border.

Card

Content container — elevated surface with shadow

.card

Design System Card

A refined component with subtle elevation and focused content presentation.

#0F1011 bg · rgba(255,255,255,0.05) border · 8px radius · Raised shadow. Title: 14px/600/#F7F8F8. Body: 13px/#8A8F98. CTA: Primary pink button.

Badges

Status indicators — Success, Error, Info

.badge

Open Closed Draft

12px/600 · 4/8px padding · 12px radius. Success: #00BA7C. Error: #F91880. Info: #5E6AD2.

Guidelines

Do's & Don'ts

Principles for consistent application of Linear's design language across surfaces and contexts.

Do — Embrace

Use the full 8px grid spacing system consistently; all padding and margin must be multiples of 8px
Prioritize generous whitespace; empty space is a design element, not wasted space
Maintain typography hierarchy strictly; never skip hierarchy levels or use custom font sizes
Apply shadows sparingly and purposefully; use only the defined elevation levels
Emphasize with accent pink (#F91880) and green (#00BA7C) strategically for critical interactions

Don't — Avoid

Don't mix spacing systems or use arbitrary padding values outside the 8px scale
Don't overuse shadows; rely on color, borders, and spacing for primary visual structure
Don't create custom font sizes; stick to the established hierarchy for recognition
Don't apply rounded corners carelessly; reserve 9999px for buttons only
Don't rely on color alone for meaning; always combine color with opacity, shape, or weight

linear.app

Preview