Linear

version alpha

name Linear

description "A near-black product-focused marketing canvas built around #010102 (the deepest dark surface of any tool in this collection), light gray text (#f7f8f8), and the signature Linear lavender-blue (#5e6ad2) used as the single chromatic accent. The system reads as software-craft documentation: dense, technical, and quietly luxurious. Display type is set in the Linear custom sans (SF Pro Display fallback) at 500–700 with measured negative tracking. Cards live as charcoal panels (#0f1011) with hairline borders. The accent lavender appears on the brand mark, focus rings, and a few intentional CTAs — never decoratively. Page rhythm leans on product UI screenshots framed in dark panels rather than atmospheric color."

colors primary: "#5e6ad2" on-primary: "#ffffff" primary-hover: "#828fff" primary-focus: "#5e69d1" ink: "#f7f8f8" ink-muted: "#d0d6e0" ink-subtle: "#8a8f98" ink-tertiary: "#62666d" canvas: "#010102" surface-1: "#0f1011" surface-2: "#141516" surface-3: "#18191a" surface-4: "#191a1b" hairline: "#23252a" hairline-strong: "#34343a" hairline-tertiary: "#3e3e44" inverse-canvas: "#ffffff" inverse-surface-1: "#f5f6f6" inverse-surface-2: "#f6f7f7" inverse-ink: "#000000" brand-secure: "#7a7fad" semantic-success: "#27a644" semantic-overlay: "#000000"

typography display-xl: fontFamily: Linear Display fontSize: 80px fontWeight: 600 lineHeight: 1.05 letterSpacing: -3.0px display-lg: fontFamily: Linear Display fontSize: 56px fontWeight: 600 lineHeight: 1.10 letterSpacing: -1.8px display-md: fontFamily: Linear Display fontSize: 40px fontWeight: 600 lineHeight: 1.15 letterSpacing: -1.0px headline: fontFamily: Linear Display fontSize: 28px fontWeight: 600 lineHeight: 1.20 letterSpacing: -0.6px card-title: fontFamily: Linear Display fontSize: 22px fontWeight: 500 lineHeight: 1.25 letterSpacing: -0.4px subhead: fontFamily: Linear Display fontSize: 20px fontWeight: 400 lineHeight: 1.40 letterSpacing: -0.2px body-lg: fontFamily: Linear Text fontSize: 18px fontWeight: 400 lineHeight: 1.50 letterSpacing: -0.1px body: fontFamily: Linear Text fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: -0.05px body-sm: fontFamily: Linear Text fontSize: 14px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0 caption: fontFamily: Linear Text fontSize: 12px fontWeight: 400 lineHeight: 1.40 letterSpacing: 0 button: fontFamily: Linear Text fontSize: 14px fontWeight: 500 lineHeight: 1.20 letterSpacing: 0 eyebrow: fontFamily: Linear Text fontSize: 13px fontWeight: 500 lineHeight: 1.30 letterSpacing: 0.4px mono: fontFamily: Linear Mono fontSize: 13px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0

rounded xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 24px pill: 9999px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 14px button-primary-pressed: backgroundColor: "{colors.primary-focus}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 14px button-tertiary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 14px button-inverse: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 14px pricing-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px pricing-card-featured: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px feature-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px product-screenshot-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 24px testimonial-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" padding: 32px customer-logo-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-subtle}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 16px text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 8px 12px text-input-focused: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 8px 12px pricing-tab-default: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-subtle}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 6px 14px pricing-tab-selected: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 6px 14px cta-banner: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.headline}" rounded: "{rounded.lg}" padding: 48px changelog-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" padding: 24px 0 status-badge: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 2px 8px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 56px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-subtle}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 32px

Overview

Linear's marketing canvas is the deepest dark surface in this collection — {colors.canvas} is #010102, essentially pure black with a faint blue tint. On top sits a four-step surface ladder ({colors.surface-1} through {colors.surface-4}) for cards, panels, and lifted tiles, with hairline borders running from {colors.hairline} (#23252a) up through {colors.hairline-strong} and {colors.hairline-tertiary}. Light gray text ({colors.ink} #f7f8f8) carries the body and headlines.

The single chromatic accent is Linear lavender-blue {colors.primary} (#5e6ad2) — used on the brand mark, focus rings, and the primary CTA button. A lighter hover state ({colors.primary-hover} #828fff) and a focus-tinted variant ({colors.primary-focus} #5e69d1) extend the same hue. Linear avoids saturated greens, oranges, reds, etc. on the marketing canvas — the only semantic color is {colors.semantic-success} (#27a644) for status pills and the rare success indicator.

Display type runs Linear's custom sans (with SF Pro Display fallback) at weight 500–700 with negative letter-spacing scaling from -3.0px at 80px down to 0 at body. The body family is Linear's text cut, and a Linear Mono is reserved for code snippets in product screenshots.

The page rhythm is dense product screenshots — Linear's marketing leads with high-fidelity captures of the product UI (issue list, project view, dashboard) framed in {colors.surface-1} panels with {rounded.xl} 16px corners. The chrome is intentionally minimal so the app screenshots can do the heavy lifting.

Key Characteristics:

• Dark-canvas marketing system — {colors.canvas} (#010102) is the deepest dark in this collection.

• Lavender-blue brand accent ({colors.primary} #5e6ad2) — used scarcely on brand mark, focus, and the primary CTA.

• Four-step surface ladder (canvas → surface-1 → surface-2 → surface-3 → surface-4) carries hierarchy without shadow.

• Display tracking pulls aggressively negative (-3.0px at 80px); body holds at -0.05px.

• Cards use {rounded.lg} 12px corners with 1px hairline borders — never pill, rarely 16px.

• Product UI screenshots dominate the page. The marketing chrome is a dark frame for the app.

• No second chromatic color. No atmospheric gradients. No spotlight cards.

Colors

Source pages: linear.app (home), /intake, /pricing, /contact/sales, /build.

Brand & Accent

• Lavender-Blue ({colors.primary}): The signature Linear accent — primary CTA, brand mark, link emphasis.

• Lavender Hover ({colors.primary-hover}): Lighter lavender (#828fff) — hovered state of the primary CTA.

• Lavender Focus ({colors.primary-focus}): Focus-ring tint (#5e69d1) — focused inputs, focused buttons.

• Brand Secure ({colors.brand-secure}): Muted lavender-gray (#7a7fad) — used in "Linear Security" surfaces.

Surface

• Canvas ({colors.canvas}): Default page background — #010102, near-pure black with a faint blue tint.

• Surface 1 ({colors.surface-1}): One step above canvas — feature cards, pricing cards, product screenshot panels.

• Surface 2 ({colors.surface-2}): Two steps above — featured pricing card, hovered cards.

• Surface 3 ({colors.surface-3}): Three steps above — line-tertiary backgrounds, sub-nav.

• Surface 4 ({colors.surface-4}): Four steps above — bg-level-3, deepest lifted surface.

• Hairline ({colors.hairline}): 1px borders on cards and dividers.

• Hairline Strong ({colors.hairline-strong}): Stronger 1px borders — input focus rings.

• Hairline Tertiary ({colors.hairline-tertiary}): Tertiary borders for nested surfaces.

• Inverse Canvas ({colors.inverse-canvas}): Pure white — surface of the inverse pill CTA on a small set of section openers.

• Inverse Surface 1 ({colors.inverse-surface-1}): One step above inverse canvas.

• Inverse Surface 2 ({colors.inverse-surface-2}): Two steps above inverse canvas.

Text

• Ink ({colors.ink}): All headlines and emphasized body type — light gray #f7f8f8.

• Ink Muted ({colors.ink-muted}): Secondary type at #d0d6e0 — meta info on hero panels.

• Ink Subtle ({colors.ink-subtle}): Tertiary type at #8a8f98 — deselected pricing tabs, footer columns.

• Ink Tertiary ({colors.ink-tertiary}): Quaternary at #62666d — disabled, footnotes.

Semantic

• Success Green ({colors.semantic-success}): Status pills, success indicators. The only semantic color on marketing.

• Overlay ({colors.semantic-overlay}): Pure black overlay scrim for modals.

Typography

Font Family

• Linear Display — Linear's custom display sans; fallback SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto. Carries display-xl through subhead.

• Linear Text — Linear's custom text sans (a slightly different cut tuned for body sizes); same fallback stack. Carries body sizes, button labels, captions.

• Linear Mono — Linear's custom mono; fallback ui-monospace, SF Mono, Menlo. Used for code snippets in product screenshots and for status / ID tokens.

The marketing surface treats Display and Text as one continuous voice; the family change is silent.

Hierarchy

Token Size Weight Line Height Letter Spacing Use {typography.display-xl} 80px 600 1.05 -3.0px Largest hero headline {typography.display-lg} 56px 600 1.10 -1.8px Section opener headlines {typography.display-md} 40px 600 1.15 -1.0px Sub-section headlines {typography.headline} 28px 600 1.20 -0.6px Pricing tier titles, CTA banner heading {typography.card-title} 22px 500 1.25 -0.4px Feature card title {typography.subhead} 20px 400 1.40 -0.2px Lead body, intro paragraphs {typography.body-lg} 18px 400 1.50 -0.1px Hero subhead, lead paragraphs {typography.body} 16px 400 1.50 -0.05px Default body {typography.body-sm} 14px 400 1.50 0 Card body, footer columns {typography.caption} 12px 400 1.40 0 Captions, meta, status {typography.button} 14px 500 1.20 0 All button labels {typograp