Typography
Base Font · Inter Variable
Inter Variable
Build software at the speed of thought — Linear helps you ship products.
Light · 300
Regular · 400
Medium · 510
Semibold · 590
Mono Font · Berkeley Mono
Berkeley Mono
LIN-2847 · Fix input validation · P1 · In Progress
Regular · 400
Medium · 510
Ship faster.
Display Hero · 64px · w590 · line-height: 64px · letter-spacing: −1.408px
Build software at the speed of thought
Heading XL · 40px · w510 · line-height: 44px · letter-spacing: −0.88px
Streamline issues, projects & roadmaps
Heading Large · 32px · w510 · line-height: 40px · letter-spacing: −0.704px
Linear is the tool of choice for modern software teams.
Heading Medium · 24px · w510 · line-height: 36px · letter-spacing: −0.288px
Purpose-built for software development, Linear removes the busywork so teams can focus on making things that matter.
Body Large · 18px · Regular · line-height: 28.8px · letter-spacing: −0.24px
LIN-2847 · Fix authentication token expiry on mobile clients
Body Small · 14px · Regular · line-height: 21px · letter-spacing: −0.182px
ISSUES · PROJECTS · CYCLES · ROADMAP
Caption / Label · 12px · w510 · line-height: 16.8px · letter-spacing: −0.12px
Letter Spacing
Linear
Tight
−1.408px · display headlines
Ship faster
Wide
−0.704px · headings
Product development
Normal
−0.15px · body copy
Issue tracking
Light
−0.12px · small text, labels
Spacing
Spacing Scale
70 tokens — 1px → 450px
Shadow / Elevation
Shadow Tokens
6 tokens
Hairline
×35
rgba(0,0,0,.03) 1.2px · subtle bottom border replacement
Raised
×18
rgba(0,0,0,.4) 2px 4px · dropdowns, menus, cards
Inset
×7
rgba(0,0,0,.2) inset 12px · depth inside surfaces
Ring
×5
rgb(35,37,42) 1px inset · border substitute ring
Layered
×4
Multi-layer ambient shadow for elevated panels
Outline
×3
rgba(0,0,0,.2) ring outline · modal focus
Z-Index
| Layer | Value | Usage |
|---|
| z-1 (Base) | 1 | Default content layer, base stacking |
| z-2 (Raised) | 3 | Slightly elevated elements |
| z-3 (Floating) | 50 | Sticky headers, floating toolbars |
| z-4 (Overlay) | 100 | Dropdowns, popovers, tooltips |
| z-5 (Modal) | 5000 | Modals, dialogs, command palette |
| z-6 (Toast) | 10000 | Notifications, toasts, critical alerts |
Breakpoints
5 breakpoints — from 600px (mobile) to 1280px (wide desktop). Follows standard responsive design breakpoints.
Opacity
Opacity Scale
12 tokens — 0.04 → 0.90
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| White (#F7F8F8) | Black (#000000) | 19.74:1 | AAA |
| White (#F7F8F8) | Black 2 (#08090A) | 18.73:1 | AAA |
| White (#F7F8F8) | Dark Gray (#23252A) | 14.41:1 | AAA |
| White (#F7F8F8) | White 2 (#FFFFFF) | 1.06:1 | Fail |
| White (#F7F8F8) | Green 2 (rgba) | 1.29:1 | Fail |
| Mid Gray (#62666D) | Black (#000000) | 3.64:1 | AA Large |
| Mid Gray (#62666D) | White 2 (#FFFFFF) | 5.77:1 | AA |
| Mid Gray (#62666D) | Black 2 (#08090A) | 3.45:1 | AA Large |
| Mid Gray (#62666D) | Dark Gray (#23252A) | 2.66:1 | Fail |
| Light Blue (#D0D6E0) | Black (#000000) | 14.38:1 | AAA |
| Light Blue (#D0D6E0) | Black 2 (#08090A) | 13.64:1 | AAA |
| Light Blue (#D0D6E0) | Dark Gray (#23252A) | 10.5:1 | AAA |
| Mid Gray 2 (#8A8F98) | Black (#000000) | 6.46:1 | AA |
| Mid Gray 2 (#8A8F98) | Dark Gray (#23252A) | 4.72:1 | AA |
| Light Gray (#E2E4E7) | Black (#000000) | 16.49:1 | AAA |
| Light Gray (#E2E4E7) | Dark Gray (#23252A) | 12.04:1 | AAA |
CSS Variables Reference
Black--color-black#000000
Black 2 (App)--color-black-2#08090A
Dark Gray 4--color-dark-gray-4#0F1011
Dark Gray 11--color-dark-gray-11#101112
Dark Gray 14--color-dark-gray-14#121314
Dark Gray 15--color-dark-gray-15#161718
Dark Gray (Surface)--color-dark-gray#23252A
Dark Gray 10--color-dark-gray-10#28282C
Dark Gray 17--color-dark-gray-17#3B3B3B
Blue 2 (Brand)--color-blue-2#5E6AD2
Cyan 2--color-cyan-2#02B8CC
Green 2--color-green-2rgba(0,255,5,.1)
Red 2--color-red-2rgba(255,0,0,.1)
Blue 3--color-blue-3#6366F1
Blue 4--color-blue-4#8B5CF6
Light Gray 3--color-light-gray-3#E6E6E6
Dark Cyan--color-dark-cyan#0F3338
Dark Red--color-dark-red#422222
Blue 7 (Tint)--color-blue-7rgba(94,106,210,.15)
White (Primary Text)--color-white#F7F8F8
Light Blue (Secondary)--color-light-blue#D0D6E0
Light Gray (Tertiary)--color-light-gray#E2E4E7
Mid Gray 2--color-mid-gray-2#8A8F98
Mid Gray (Muted)--color-mid-gray#62666D
Cyan (Accent)--color-cyan#55CDFF
Green (Success)--color-green#89D196
Light Orange--color-light-orange#FFC47C
Light Blue 2--color-light-blue-2#8FA4FF
Light Pink--color-light-pink#F79CE0
Border Subtle--color-dark-gray-13#24282C
Border Muted--color-dark-gray-16#323334
Border Default--color-dark-gray-7#383B3F
Border Strong--color-dark-gray-3#3E3E44
Light Gray 2 (Fill)--color-light-gray-2#E4E5E9
Blue (Fill)--color-blue#4354B8
Orange (Fill)--color-orange#E5591D
Yellow (Fill)--color-yellow#F0BF00
Dark Green (Fill)--color-dark-green#008D2C
Inter Variable--font-family-baseInter Variable
Berkeley Mono--font-family-2Berkeley Mono
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-w510510
Semibold--font-weight-w590590
2xs--font-size-2xs10px
xs--font-size-xs11px
sm--font-size-sm12px
lg--font-size-lg13px
2xl--font-size-2xl14px
4xl--font-size-4xl16px
6xl--font-size-6xl18px
20px--font-size-20px20px
24px--font-size-24px24px
32px--font-size-32px32px
40px--font-size-40px40px
64px--font-size-64px64px
Tight--letter-spacing-tight−1.408px
Normal--letter-spacing-normal−0.88px
Wide--letter-spacing-wide−0.704px
Wider--letter-spacing-wider−0.288px
Widest--letter-spacing-widest−0.24px
LS-8--letter-spacing-ls-8−0.15px
LS-10--letter-spacing-ls-10−0.12px
Space 75 (Max)--space-75450px
Hairline--border-width-hairline0.5px
Thin--border-width-thin1px
Base--border-width-base2px
r16 / Circle--radius-r1650%
r18 / Pill--radius-r189999px
Instant--duration-instant0.1s
Fast--duration-fast0.15s
Normal--duration-normal0.16s
Slow--duration-slow0.2s
Slower--duration-slower0.4s
Ease Out--easing-ease-outease-out
Faint 15%--opacity-150.15
Strong 80%--opacity-800.8
Opaque 90%--opacity-900.9
Base--z-11
Raised--z-23
Floating--z-350
Overlay--z-4100
Modal--z-55000
Toast--z-610000
XS--breakpoint-xs600px
SM--breakpoint-sm640px
MD--breakpoint-md768px
LG--breakpoint-lg1024px
XL--breakpoint-xl1280px
Linear Design System · Generated 15/04/2026 · 77 color tokens · 47 type tokens · 70 spacing steps · 18 border radii · 3 border widths · 6 shadows · 5 durations · 1 easing · 6 z-index layers · 5 breakpoints · 12 opacity tokens