Dark Mode

Design System
Inspired by Linear

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Start Building View Documentation
01 / Colors

Color Palette

Background Surfaces
Marketing Black
#08090a
Hero backgrounds
Panel Dark
#0f1011
Sidebar, panels
Level 3
#191a1b
Elevated surfaces
Secondary
#28282c
Hover states
Text & Content
Primary Text
#f7f8f8
Headings, primary
Secondary Text
#d0d6e0
Body text
Tertiary Text
#8a8f98
Placeholders
Quaternary Text
#62666d
Disabled, timestamps
Brand & Accent
Brand Indigo
#5e6ad2
CTA backgrounds
Accent Violet
#7170ff
Links, active states
Accent Hover
#828fff
Hover states
Security Lavender
#7a7fad
Security UI
Status
Green
#27a644
Success, active
Emerald
#10b981
Badges, completion
Border & Dividers
Border Primary
#23252a
Strong borders
Border Secondary
#34343a
Medium borders
Border Tertiary
#3e3e44
Lighter borders
Line Tint
#141516
Subtle dividers
Semi-transparent Borders
Subtle Border
rgba(255,255,255,0.05)
Default borders
Standard Border
rgba(255,255,255,0.08)
Cards, inputs
02 / Typography

Typography Scale

Display Headline
Display — 48px / 510 / 1.00 / -1.056px / Inter Variable
Heading One
Heading 1 — 32px / 400 / 1.13 / -0.704px / Inter Variable
Heading Two
Heading 2 — 24px / 400 / 1.33 / -0.288px / Inter Variable
Heading Three
Heading 3 — 20px / 590 / 1.33 / -0.24px / Inter Variable
Body Large — Linear helps streamline software projects, sprints, tasks, and bug tracking.
Body Large — 18px / 400 / 1.60 / -0.165px / Inter Variable
Body Medium — Navigation and emphasized text
Body Medium — 16px / 510 / 1.50 / Inter Variable
Small — Secondary body content and descriptions
Small — 15px / 400 / 1.60 / -0.165px / Inter Variable
Caption — Sub-labels and category headers
Caption — 14px / 510 / 1.50 / -0.182px / Inter Variable
Meta — Timestamps and metadata
Meta — 13px / 510 / 1.50 / -0.13px / Inter Variable
Label — Small button text and tags
Label — 12px / 510 / 1.40 / Inter Variable
const issue = await linear.createIssue({title});
Mono Body — 14px / 400 / 1.50 / Berkeley Mono
ISSUE STATUS
Mono Label — 12px / 400 / uppercase / Berkeley Mono
03 / Buttons

Button Variants

Start Building
Primary Brand
Documentation
Ghost
In Progress
Status Pill
Done
Success Pill
v2.4
Subtle Badge
Filter
Pill Chip
04 / Cards

Card Examples

Issues

Issue Tracking

Plan and track work across teams. Linear's issue tracker is designed for speed, with keyboard shortcuts for every action.

Cycles

Sprint Cycles

Time-boxed work periods that keep teams focused. Automatic rollover and progress tracking built in.

Roadmaps

Product Roadmaps

Visualize direction and progress. Connect issues to projects and track milestones across your entire product.

05 / Forms

Form Elements

Default
Focus (accent ring)
Error (red ring)
06 / Spacing

Spacing Scale

4
8
12
16
20
24
32
35
07 / Radius

Border Radius Scale

2px
Badges
4px
Small
6px
Buttons
8px
Cards
12px
Panels
22px
Large
9999px
Pills
50%
Circles
08 / Elevation

Elevation & Depth

Level 0: Flat
No shadow
Level 1: Subtle
Micro-elevation
Level 2: Surface
Border-defined depth
Level 3: Elevated
Floating elements
Focus
Accent ring
Inset
Sunken panel