Switch between the rendered Visual preview and the Raw DESIGN.md.
Linear's design system embodies a refined, professional aesthetic rooted in clarity and precision. The visual language prioritizes intent-driven interactions within a carefully balanced dark-light spectrum, with a restrained color palette that emphasizes content over decoration. The typography system uses Inter Variable with strategic weight variation to create visual hierarchy without overwhelming the interface. Subtle shadows and generous whitespace establish depth while maintaining focus. The overall impression is one of purposeful minimalism—every pixel serves the mission of helping teams care about quality in their work.
Key Characteristics
9999px radius) contrasting with sharp card corners (4px)#08090A): Primary text and core UI elements; highest contrast for readability#828FFF): Brand accent; used for interactive highlights and emphasis#5E6AD2): Secondary accent; supporting interactive states#7170FF): Tertiary accent for premium or special UI moments#B4BCD0): Softened accent for disabled or secondary contexts#5E6AD2): Primary call-to-action links; navigation highlights#E5E5E6): Secondary button backgrounds with strong contrast#F7F8F8): Primary background; light mode foundation#FFFFFF): Content surfaces and elevated containers#8A8F98): Secondary text and muted elements#D0D6E0): Tertiary text; reduced prominence#62666D): Tertiary text and icon colors#B4BCD0): Border and divider lines#23252A): Alternate dark surface for contrast#0F1011): Darkest surface background#141516): Deep UI backgrounds#191A1B): Alternative deep background#000000): Hard contrast for emphasis#27A644): Positive actions, confirmations, and success states#F0BF00): Warnings, cautions, and attention-required statesPrimary: Inter Variable (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif)
Secondary: Inter Variable (fallback to system stack)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display 1 (H1) | Inter Variable | 64px | 510 | 64px | 0px | Page title; hero text |
| Display 2 (H2) | Inter Variable | 48px | 510 | 48px | 0px | Section headings |
| Heading 3 (H3) | Inter Variable | 13px | 510 | 19.5px | 0px | Component labels; small caps |
| Body Text | Inter Variable | 15px | 400 | 24px | 0px | Standard paragraph copy |
| Body Large | Inter Variable | 16px | 400 | 24px | 0px | Card text; list items |
| Link Text | Inter Variable | 14px | 510 | 21px | 0px | Navigation links; CTAs |
| Button Text | Inter Variable | 13px | 400 | 19.5px | 0px | Button labels; compact UI |
510 for headings and strong emphasis; 400 for body and standard text24px line height for all body copy to ensure readability64px and 48px sizes for above-the-fold hero and section headers13px with 32px height for ergonomic tapping14px weight 510 for navigation links to signal clickability#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 0px#D0D6E0; strengthen shadowtransparent#8A8F9813px4000px 12px32px9999px0px nonenone#62666D; light background appears#08090A; slight inset effect#E5E5E6#08090A13px5100px 12px32px100%32px9999px1px 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 0pxtransparent#F7F8F816px4000px 0px72px0px0px nonenone24px#FFFFFF; subtle underline appearstransparent#F7F8F816px4000px 0pxauto240px0px0px nonenone24px1px solid #D0D6E0)transparent#F7F8F816px4000px 0px72px1440px0px0px nonenone24px#828FFF; underline at 2px solid #828FFF below text#FFFFFF; smooth transition 200ms easetransparent#8A8F9813px4000px 12px32px9999px0px nonenone19.5px#E5E5E6; text to #08090A#D0D6E0; text to #08090A#FFFFFF#08090A15px4008px 12px36px8px1px solid #D0D6E0none1px solid #828FFF; box-shadow 0px 0px 0px 3px rgba(130, 143, 255, 0.1)#F7F8F8; text #8A8F98; border 1px solid #E5E5E613px510#08090A19.5px8px#B4BCD0italic#5E6AD2#FFFFFF14px5100px 16px32px0px0px nonenone21px#4A5AB8; slight shadow appears#3D4A9Etransparent#F7F8F816px4000px 8px32px6px0px nonenone24pxrgba(130, 143, 255, 0.1); text #FFFFFFrgba(130, 143, 255, 0.2)Base Unit: 4px
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 48px, 52px, 56px, 64px
Usage Contexts:
4px, 8px): Internal padding in buttons; gaps between icon and text12px, 16px): Padding in cards; margins between inline elements20px, 24px): Section padding; gaps between component groups32px, 36px, 48px): Padding for major sections; vertical rhythm52px, 56px, 64px): Margins between major content blocks; hero sectionsMax Width: 1440px (consistent with Navigation width reference)
Column Strategy:
768px and above)Section Patterns:
64px vertical padding32px horizontal padding and 48px vertical gapsLinear's layout philosophy emphasizes breathing room and clarity. Vertical spacing is intentional, creating visual rhythm through consistent section gaps of 48px to 64px. Horizontal margins provide generous outer gutters on desktop (32px minimum). Internal element spacing uses smaller increments (8px–16px) to group related content without overwhelming. This balanced approach prevents cognitive overload and guides the user's eye through the hierarchy naturally.
9999px: Buttons, pill-shaped containers, fully rounded interactive elements8px: Input fields, form containers, moderate rounding6px: Secondary interactive elements, subtle rounding4px: Cards, container panels, light rounding0px: Large hero sections, full-width containers, navigation headers| Level | Treatment | Use |
|---|---|---|
| Flat (0) | box-shadow: none | Navigation, hero text, large backgrounds |
| Raised (1) | box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 1px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px | Hover states on secondary elements; subtle lift |
| Elevated (2) | box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 1px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px | Buttons, cards, modals—primary interactive surfaces |
| High (3) | box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 1px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0) 0px 8px 2px 0px | Floating elements, dropdown menus, overlays |
Shadow Philosophy: Linear uses a refined shadow system that creates gentle depth without drama. Shadows are layered in multiple offsets to mimic natural light—a key at mid-distance, fill for atmosphere, and key for definition. The total effect is subtle sophistication: shadows guide attention without dominating the interface. All shadows use dark with low opacity (0.01 to 0.08) to maintain the bright, clean aesthetic.
#E5E5E6 for all secondary action buttons to maintain visual consistency and establish clear hierarchy510 with heading styles (H1, H2, H3) and link text to signal importance and clickability9999px border radius exclusively to buttons to create a distinct, recognizable interaction target24px line height for all body copy to ensure comfortable reading and consistent rhythm48px to 64px gaps to establish visual hierarchy and prevent cramped layouts#828FFF accent color sparingly for interactive highlights and primary CTAs to draw attention without fatigue#08090A text on #E5E5E6 background for clear affordance8px to 12px gaps and label each with 13px weight 510 text0px 12px horizontally to standardize interaction targets at 32px height#08090A directly as a background—reserve for text only; use #F7F8F8 or #FFFFFF for surfaces32px or 72px unless specifically justified for accessibility#828FFF) beyond interactive states and primary calls-to-action9999px, 8px, 6px, 4px, 0px)0px 12px—adjust width via container, not internal spacing4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 48px, 52px, 56px, 64px)| Name | Width | Key Changes |
|---|---|---|
| Mobile | 0px – 639px | Single-column layout; 16px horizontal padding; 32px section gaps; buttons full-width; H1 → 48px, H2 → 36px |
| Tablet | 640px – 1023px | 6-column grid; 24px horizontal padding; 40px section gaps; buttons 50% width; navigation collapses to hamburger |
| Desktop | 1024px – ∞ | 12-column grid; 32px horizontal padding; 48px–64px section gaps; buttons inline; full horizontal navigation |
32px × 32px for all interactive elements (buttons, links, form controls)8px horizontal and vertical gap between adjacent touch targets48px height on mobile for ergonomic tapping16px from edges on mobile to prevent accidental triggers64px (desktop) → 48px (tablet) → 40px (mobile); maintain weight 510 throughout~20% from desktop to tablet; reduce by ~40% from desktop to mobile240px width on desktop; 100% minus gutters on tablet; full-width on mobile with 16px marginmin-width: 120px on tablet; full-width on mobile#5E6AD2)#E5E5E6)#08090A)#F7F8F8)#08090A)#08090A)#8A8F98)#62666D)#828FFF)#828FFF)#D0D6E0)#27A644)#F0BF00)#FFFFFF)#D0D6E0)#828FFF)All buttons are 32px tall with 9999px border radius, 0px 12px padding, 13px font weight 400 for body, weight 510 for headings—no exceptions.
Layered shadows are mandatory for elevation: Use the Elevation table Level 2 for buttons and cards, Level 3 for overlays; all shadows use rgba(0, 0, 0, ...) with opacity 0.01 to 0.08.
Typography hierarchy uses only two weights: 400 for body, 510 for emphasis; sizes are 64px (H1), 48px (H2), 13px (H3), 15px (body), 16px (body large), 14px (links), 13px (buttons)—no other sizes.
Spacing follows the scale exactly: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 48px, 52px, 56px, 64px—never use arbitrary values; section gaps are 48px minimum, 64px maximum.
Secondary button background is always #E5E5E6 with #08090A text; ghost button is transparent with #8A8F98 text; primary accent is #828FFF for highlights only, not backgrounds.
Color palette is strict: #F7F8F8 for main background, #FFFFFF for cards, #08090A for text, #8A8F98 for secondary text—use only semantic colors from the palette; no custom hex values.
Border radius is restricted to: 9999px (buttons), 8px (inputs), 6px (secondary containers), 4px (cards), 0px (large sections)—never use rounded corners outside this list.
Responsive breakpoints are: Mobile 0–639px, Tablet 640–1023px, Desktop 1024px+; typography and spacing scale at these transitions; navigation collapses to hamburger at Tablet.
Form inputs are 36px tall with 8px padding, 8px border radius, 1px solid #D0D6E0 border; focus state adds 0px 0px 0px 3px rgba(130, 143, 255, 0.1) shadow; labels are 13px weight 510 above each field.
Every interactive element requires a hover state: Buttons shift color or add shadow; links underline or change background; form inputs highlight border; all transitions use 200ms ease timing function for consistency.