name: linear-design
version: alpha
description: >
  Linear's canvas is a near-black void (#08090a) that never goes light. Its single
  brand voltage is an electric indigo (#5e6ad2) used with monastic restraint — for
  focus, selection, and the rare in-product accent, almost never for marketing CTAs
  (those are an inverted near-white pill). Type is Inter Variable run at intermediate
  optical weights (510/590) with tight negative tracking on display sizes. The shape
  language is rounded-but-technical: 8px cards, fully-pill buttons. Signature moves:
  monochrome line-art isometric figures labelled "FIG 0.x", hairline-thin dividers
  at ~5% white, and sub-150ms transitions that read as instant.
colors:
  # Brand
  primary: '#5e6ad2'          # electric indigo — focus/selection/accent only
  on-primary: '#ffffff'
  # Surface (always dark)
  surface: '#08090a'          # app/page canvas
  surface-elevated: '#0f1011' # cards, panels
  surface-secondary: '#16171a'# nested rows, inputs on hover
  # Text
  on-surface: '#f7f8f8'       # primary text, near-white (not pure white)
  on-surface-secondary: '#8a8f98' # body/secondary copy & muted headings
  on-surface-tertiary: '#d0d6e0'  # subheads / list labels
  # Hairlines
  hairline: 'rgba(255,255,255,0.05)'      # card borders
  hairline-strong: 'rgba(255,255,255,0.08)' # input underlines, dividers
  # Inverse (marketing CTA)
  inverse-surface: '#e5e5e6' # near-white pill button
  on-inverse: '#08090a'
  # Semantic (in-product status, used sparingly)
  error: '#eb5757'
  success: '#4cb782'
  warning: '#f2c94c'
typography:
  display:
    fontFamily: '"Inter Variable", "SF Pro Display", -apple-system, system-ui, sans-serif'
    fontSize: 64px
    fontWeight: 510
    lineHeight: 64px
    letterSpacing: -1.408px
  headline-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 48px
    fontWeight: 510
    lineHeight: 48px
    letterSpacing: -1.056px
  headline-sm:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 20px
    fontWeight: 590
    lineHeight: 26.6px
    letterSpacing: -0.24px
  body-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.165px
  label:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 14px
    fontWeight: 510
    lineHeight: 21px
    letterSpacing: 0
  caption:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: 0
rounded:
  sm: 8px      # cards, panels
  full: 9999px # buttons, pills, tags
spacing:        # base unit 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
components:
  button-primary:                       # marketing "Sign up" CTA
    backgroundColor: '{colors.inverse-surface}'
    textColor: '{colors.on-inverse}'
    typography: '{typography.caption}'
    fontWeight: 510
    rounded: '{rounded.full}'
    padding: '0 12px'
    height: '32px'
    boxShadow: '0 1px 1px rgba(0,0,0,0.07), 0 0 1px rgba(0,0,0,0.08)'
  button-ghost:                         # nav items "Product / Pricing"
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface-secondary}'
    typography: '{typography.caption}'
    rounded: '{rounded.full}'
    padding: '0 12px'
  card:
    backgroundColor: '{colors.surface-elevated}'
    borderColor: '{colors.hairline}'
    borderWidth: '1px'
    rounded: '{rounded.sm}'
    textColor: '{colors.on-surface}'
    padding: '24px'
  input:
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    borderBottom: '0.5px solid {colors.hairline-strong}'
    typography: '{typography.body-lg}'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 120ms
  duration-standard: 160ms
icons:
  style: outline
  stroke: 1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.on-surface-secondary}'

Linear

linear-design · alpha

Overview

Linear's design system is built on a single dark canvas — #08090a, a blue-black that is treated as the only ground; there is no light mode on the marketing site and no white surface anywhere. Against it, content sits on barely-lifted panels (#0f1011) separated not by shadow but by hairlines at 5–8% white. The brand color is an electric indigo (#5e6ad2) deployed with deliberate scarcity: it appears as a mention chip (@Linear), a focus ring, or a selection — and pointedly not as the primary marketing button, which is instead an inverted near-white pill. Type is Inter Variable run at variable optical weights (510 and 590 rather than the usual 500/600), with aggressive negative tracking on display sizes (−1.4px at 64px) that gives headlines their dense, engineered feel. The signature visual move is the monochrome line-art isometric illustration captioned FIG 0.2/FIG 0.3 in a mono label — diagrammatic, restrained, never colorful. The whole system reads as software for builders: fast, quiet, high-contrast, and allergic to decoration.

Colors

Brand — primary #5e6ad2 is Linear's famous indigo. It is reserved for focus and selection: mention pills, active states, keyboard focus, and the occasional in-product accent label. It is not the marketing CTA color. Discipline rule: at most one or two indigo elements per viewport.

Surface — the canvas is surface #08090a; cards and panels lift to surface-elevated #0f1011; nested/hover rows go to surface-secondary #16171a. The steps between them are tiny (1–2% luminance) — depth is communicated by hairlines, not fills.

Text — primary copy is on-surface #f7f8f8, a near-white, never pure white (softer, less glare on black). Secondary copy and many muted headings use on-surface-secondary #8a8f98. A lighter on-surface-tertiary #d0d6e0 is used for list labels and subheads.

Hairlines — hairline rgba(255,255,255,0.05) outlines cards; hairline-strong rgba(255,255,255,0.08) does input underlines (0.5px) and section dividers.

Inverse — the marketing primary button inverts the system: inverse-surface #e5e5e6 fill with on-inverse #08090a text.

Semantic — status colors (error, success, warning) appear only as small dots on issue labels (Bug, Design, Performance) — never as large fills.

Typography

Family: Inter Variable, falling back to "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif. Closest open-source substitute: Inter (already open-source). Linear exploits the variable axis to use intermediate weights — 510 for display/labels and 590 for small headings — rather than standard 500/600. Tracking is negative and scales with size.

Token	Size	Weight	Line-height	Tracking	Usage
display	64px	510	64px	−1.41px	Hero / section H1
headline-lg	48px	510	48px	−1.06px	Big section headers (often in {colors.on-surface-secondary})
headline-sm	20px	590	26.6px	−0.24px	Card titles / subheads
body-lg	16px	400	24px	0	Standard body
body-md	15px	400	24px	−0.17px	Dense paragraph copy
label	14px	510	21px	0	Buttons, links, nav
caption	13px	400	19.5px	0	Pills, meta, mono FIG 0.x labels

Layout

Base spacing unit is 8px; the scale runs 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96. Content is centered in a wide max-width container with very generous vertical rhythm — sections are separated by large empty bands and a single full-bleed hairline. The dominant layout primitive is the two-column feature block (a big left headline, right-aligned body + a n.0 Section → link) followed by an oversized product screenshot that bleeds to the edges. Whitespace is treated as a material: most of every viewport is empty black.

Elevation & Depth

Essentially flat. Linear avoids drop shadows on surfaces — separation is done with 1px hairlines at 5–8% white. The only shadow in the system is a barely-perceptible multi-layer ambient shadow on the inverted CTA pill. No glows, no large soft shadows on cards.

Shapes

Two radii only: 8px for cards/panels and fully pill (9999px) for buttons, nav items, tags, and mention chips. The philosophy is rounded-but-technical — soft enough to feel modern, tight enough to feel engineered. No large 16–24px "friendly" radii.

Components

• button-primary — near-white pill (#e5e5e6), dark text, 32px tall, 12px side padding, faint ambient shadow. This is the marketing CTA ("Sign up").
• button-ghost — transparent pill, {colors.on-surface-secondary} text; nav links brighten to on-surface on hover.
• card — surface-elevated fill, 1px hairline border, 8px radius, 24px padding. Used for feature tiles, issue cards, and the floating product panels.
• input — transparent fill, no box; a single 0.5px bottom hairline (hairline-strong); text in on-surface.
• tag/label dot — pill with a tiny semantic-color dot + caption text (Bug, Design, AI).

Motion

Durations are extremely short — 120–160ms on a standard cubic-bezier(0.4,0,0.2,1) ease. The personality is instant/responsive: hovers, selection, and menu reveals snap rather than glide. Pointedly absent: parallax, scroll-jacking, long fade-ups, and spring/bounce physics. Motion exists to confirm interaction, never to entertain.

Iconography

Outline icons, ~1.5px stroke, drawn on a 24px grid; rendered at 16/20/24px. Default color is on-surface-secondary, brightening to on-surface on hover. Icons are monochrome only — they inherit currentColor and never carry brand color or fill.

Do's and Don'ts

• Do keep the canvas #08090a. Never render a light variant — Linear has no light mode.
• Do reserve indigo #5e6ad2 for focus, selection, and mentions — one or two uses per screen.
• Do make the primary marketing button the near-white pill, not an indigo button.
• Do separate surfaces with hairlines (5–8% white), not shadows.
• Do use Inter at 510/590 with negative tracking on large headings.
• Don't use pure white (#fff) for body text — use #f7f8f8.
• Don't add drop shadows, glows, or gradients to cards.
• Don't introduce long or bouncy animations — keep everything ≤160ms and linear-eased.
• Don't colorize icons or illustrations; keep line-art monochrome.

Known Gaps

• :root custom properties were defined in component-scoped stylesheets and resolved empty at the document root; values above are from computed styles of representative elements plus Linear's known palette. Surface steps #16171a and semantic hexes are close approximations.