Switch between the rendered Visual preview and the Raw DESIGN.md.
Linear's design system embodies a minimalist, sophisticated approach to product development interfaces. The visual language prioritizes clarity and precision with a dark-mode-first aesthetic that reduces cognitive load during intense focus work. Deep blacks and near-blacks form the foundation, accented by cool grays and a subtle indigo accent that provides depth without distraction. The system is intentionally sparse and purposeful—every element serves function, creating an environment where AI-assisted workflows and human collaboration can coexist seamlessly. The typography is clean and modern, using variable-weight Inter for flexibility across scales, while monospace Berkeley Mono grounds technical content. Generous whitespace and restrained color usage reflect a workspace designed for sustained concentration and precision.
Key Characteristics
#5E6AD2): Primary interactive accent, used sparingly for key CTAs and status indicators in AI-driven workflows#828FFF): Secondary accent for hover states and supporting interactive elements#8A8F98): Neutral button text for secondary actions#E5E5E6): Light neutral background for prominent call-to-action buttons#5E6AD2): Primary link color and interactive focus state#08090A): Deepest background layer for modals and overlays#0F1011): Primary dark surface for content containers#141516): Secondary dark surface layer#23252A): Tertiary neutral for dividers and subtle backgrounds#383B3F): Lighter gray for secondary text and borders#62666D): Secondary text color, used for supporting copy (most frequently used)#8A8F98): Tertiary text for disabled or muted states#B4BCD0): Light border for subtle separation in dark mode#F7F8F8): Primary light background for cards and containers (425 uses)#FFFFFF): Pure white for maximum contrast and primary text in light contexts (221 uses)#D0D6E0): Primary border color for light surfaces (112 uses)#E2E4E7): Subtle border for reduced visual weight#E5E5E6): Lightest border for minimal separationPrimary: Inter Variable (400, 510, 590 weights) with fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Secondary: Berkeley Mono (400 weight) with fallback: "SF Mono", Monaco, "Cascadia Code", monospace
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display 1 | Inter Variable | 64px | 510 | 64px | 0px | Hero headlines, main page titles |
| Display 2 | Inter Variable | 48px | 510 | 48px | 0px | Section headlines, major headings |
| Heading 3 | Inter Variable | 20px | 590 | 26.6px | 0px | Card titles, subsection heads |
| Heading 4 | Inter Variable | 16px | 590 | 24px | 0px | Form labels, emphasis text |
| Body | Inter Variable | 15px | 400 | 24px | 0px | Primary body copy, descriptions |
| Body Span | Inter Variable | 16px | 400 | 24px | 0px | Secondary body, content blocks |
| Link | Inter Variable | 14px | 510 | 21px | 0px | Navigation links, inline links |
| Button | Inter Variable | 13px | 400 | 19.5px | 0px | Button labels, small actions |
| Code Small | Berkeley Mono | 12.25px | 400 | 15.925px | 0px | Inline code, technical references |
| Code | Berkeley Mono | 14px | 400 | 24px | 0px | Code blocks, technical content |
510 for semi-bold emphasis and navigational elements590 reserved for small, scannable headings and form labels400 for all body content and accessibility#E5E5E6#08090A13px5100px 12px32px9999px1px solid #E5E5E6rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px19.5pxtransparent#8A8F9813px4000px 12px32px9999px0px nonenone19.5px#B4BCD0transparent#F7F8F816px4000px72px0px0px nonenone24px#B4BCD0#0F1011#F7F8F816px4000px 24px 28px 24px8px1px solid rgba(255, 255, 255, 0.05)none440px328px24pxtransparent#F7F8F816px4000px72px100%0px0px nonergba(0, 0, 0, 0.4) 0px 1px 0px 0px24pxrgba(255, 255, 255, 0.02)#D0D6E013.3333px40012px 14px6px1px solid rgba(255, 255, 255, 0.08)rgba(0, 0, 0, 0.2) 0px 0px 0px 1px32px (minimum)normal#5E6AD2, increase shadowtransparent#F7F8F816px4001px 32px0px0px nonenone64pxnormal#62666Dtransparent#000000 (transparent rendering for code display)14px400Berkeley Mono0px 32px 0px 56px0px0px nonenone432px24pxtransparent#F7F8F816px40072pxflexcenterrgba(0, 0, 0, 0.4) 0px 1px 0px 0px0px 24pxtransparent#F7F8F814px4000px 8px6px32px24pxrgba(255, 255, 255, 0.05), text #B4BCD0#5E6AD2#FFFFFF14px5100px 16px0px32px21px#6B7BFFtransparent#8A8F9813px4000px 12px9999px32px19.5px#B4BCD0Base Unit: 4px
Scale: All spacing values follow a 4px increment system:
4px – Minimal gap, icon spacing8px – Compact spacing, small gaps between inline elements12px – Small spacing, input padding16px – Standard padding for interactive elements and containers20px – Small margin between sections24px – Standard margin and card padding28px – Medium-large spacing32px – Large padding for major containers36px – Extra-large margin for section separation40px – Large gap between column-level content48px – Extra-large padding for hero sections52px – Maximum spacing for page-level marginsUsage Context:
12px), inputs (12px–14px), cards (24px), and large containers (32px–48px)20px–52px), stack vertical rhythm8px–12px for compact layouts, 24px–40px for content blocks)Max Width: Content area maintains responsive breakpoints with maximum widths around 1440px for full-width components
Column Strategy:
328px max-width per cardSection Patterns:
72px height navigation header8px borders (border-radius: 8px) with 1px subtle bordersLinear employs aggressive whitespace to reduce visual noise and support focus during complex product work. Dark surfaces are reserved sparingly; negative space is treated as a design element. Large breathing room between major sections (52px+ margins) creates visual hierarchy and prevents cognitive overload. Generous internal padding (24px–32px) in containers prevents cramped content. Text is rarely tightly packed; line heights and letter spacing maintain comfortable reading rhythm even in dark mode.
4px – Minimum radius for subtle, technical components (buttons in dense layouts)6px – Standard radius for inputs, form controls, and small interactive elements8px – Primary radius for cards, containers, and major UI blocks9999px – Pill-shaped buttons and fully rounded affordances for navigation and secondary actions50% – Circle for avatars, profile images, and icon-only containers| Level | Treatment | Use |
|---|---|---|
| Base (L0) | No shadow, flat surface | Default UI, card backgrounds, primary containers |
| Raised (L1) | rgba(0, 0, 0, 0.4) 0px 1px 0px 0px | Navigation headers, subtle elevation for focused containers |
| Elevated (L2) | rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px | Primary buttons, modals, floating panels |
| Deep (L3) | Enhanced multi-layer shadow stack with increased blur | Dropdowns, tooltips, overlays |
Shadow Philosophy: Linear uses a restrained, multi-layered shadow approach inspired by material design principles. Shadows are built in layers with varying opacity to create smooth, natural depth without harsh contrast. The L2 shadow is primarily reserved for primary interactive elements (buttons) and modals that demand visual prominence. Dark-mode backgrounds (#0F1011, #08090A) require softer shadows since pure black-on-black creates readability challenges; thus, most UI layers use subtle 1px top borders or very light shadow layers. The philosophy prioritizes clarity over depth—elevation is used functionally to indicate interactivity and state, not as mere decoration.
#5E6AD2 accent sparingly for primary CTAs and high-priority interactive states#F7F8F8 as the standard light background for cards and content containers; it provides better contrast than pure white24px line height in body text to ensure dark-mode readability510 for semi-bold emphasis in navigation and subheadings for visual hierarchy8px border radius to all card and input components for consistencyborder-radius: 9999px) for navigation and secondary actions#0F1011) with light text (#F7F8F8) for maximum contrast compliance#8A8F98 and #62666D for secondary text, disabled states, and supporting copy24px–32px) inside containers to avoid visual cramping#000000) for text; use #08090A or #F7F8F8 instead depending on context#E5E5E6 (button background) for general text—it's reserved for prominent CTAs8px on standard components; use 9999px only for pill-shaped buttons0px except for navigation headers, search inputs, and full-width components32px padding in typical card layouts; use 24px as standard#62666D or #8A8F98 on dark surfaces when higher contrast is needed| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Single-column layout, full-width cards, navigation collapses to hamburger menu, hero text scales to 48px (h2 size) |
| Tablet | 640px – 1024px | 2-column grid for cards, sidebar navigation condenses or converts to tab navigation, button sizing remains consistent |
| Desktop | 1024px – 1440px | 3-column card grids, full navigation visible, hero at full 64px display size, flexible spacing increases to 40px+ |
| Large Desktop | > 1440px | Max-width container at 1440px, centered layout with margin auto, extended whitespace around margins |
44px × 44px for all interactive elements (buttons, links, form inputs)48px–56px height for mobile buttons to prevent mis-taps8px gap to prevent accidental activation32px height minimum at desktop, 48px at mobile for comfortable tapping32px minimum height on desktop, 48px on mobile for accessible input focus16px margin)24px padding reduces to 16px on tablet, then 12px on mobile to accommodate smaller screens52px (desktop) → 32px (tablet) → 20px (mobile) to maintain proportion#5E6AD2)#E5E5E6)#0F1011)#F7F8F8)#FFFFFF)#F7F8F8)#62666D)#8A8F98)#B4BCD0)#D0D6E0)rgba(255, 255, 255, 0.02) background with rgba(255, 255, 255, 0.08) border#F7F8F8 or #FFFFFF to maintain WCAG AA contrast ratio; secondary text uses #62666D only for non-critical information#E5E5E6 background with L2 shadow), Secondary ghost (transparent, #8A8F98 text), and Navigation (transparent, #F7F8F8 text, no radius)#0F1011 with 1px solid rgba(255, 255, 255, 0.05) border; padding standard is 0px 24px 28px 24px0px 1px 0px) or L2 (multi-layer elevation shadow); never apply both6px border radius with subtle rgba(255, 255, 255, 0.08) border and rgba(255, 255, 255, 0.02) background72px, top bar uses L1 shadow (0px 1px 0px at rgba(0, 0, 0, 0.4)), text is 16px Inter Variable with no border radius640px, tablet is 640px–1024px, desktop is 1024px–1440px; all margins and padding scale down by 33–50% at mobile