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

Issue Title
Default
Assignee
Focus (accent ring)
Priority
Error (red ring)
Description

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