Linear-design-analysis
B
82/100
design score
color discipline
B 80/100
curated markdown
ideal: live evidence
typography
B 80/100
curated markdown
ideal: font evidence
tokenization
C 70/100
heuristic frontmatter
ideal: extracted tokens
lint compliance
B 80/100
imported
ideal: 0E 0W
accessibility
C 70/100
not audited
ideal: 100% AA

## Visual archetype

Style classification against canonical archetypes (shadcn-neutral, apple-glass, carbon-enterprise, polaris-friendly, ...). Complementary to the technical Stack fingerprint above.

primary archetype
agent-ready · 0.55%
extracted signals

## Export tokens

## Colors

## Component preview (live tokens)

Token source: `preview_tokens` (LLM-resolved, 16 keys)
LINEAR-DESIGN-ANALYSIS · DESIGN SYSTEM

# The brand voice rendered live

Every token below is sourced from the live CSS. Buttons, cards, and surfaces use the same hex values your production stylesheet ships today.

#### Buttons

#### Editorial card

FEATURE
Headline that anchors the card
A short editorial line that demonstrates how body copy reads on this surface, paired with the heading typography above.
3 MIN READ UPDATED TODAY

#### Input + badges

Featured Outline ● Live ● Error

#### KPI tile

MONTHLY ACTIVE
128.4K
↑ 12.4% vs last month

#### Alerts

Success — Your DESIGN.md was extracted with full provenance.
Note — Token usage graph shows 247 unique tokens.
Error — Could not load some stylesheets.

#### Code block

    // design.tokens.ts
    export const tokens = {
      primary:   "#010102",
      surface:   "#f7f8f8",
      text:      "#010102",
    };

#### Type hierarchy

EYEBROW · MONO
Display heading typography
Body copy paired with the display heading shows how the type system reads in long form. The hierarchy travels from eyebrow (mono, accent color) through display (serif/sans large) to body (regular weig
Read more →

## Component variants matrix

Each cell renders a single button using the live tokens. Use this to audit the full surface of the component at a glance.

| SM | MD | LG
--- | --- | --- | ---
Primary · default |  |  |
Primary · hover |  |  |
Primary · disabled |  |  |
Secondary · default |  |  |
Secondary · hover |  |  |
Tertiary · default |  |  |

## Spacing

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

## Radius

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

## @font-face declarations

No @font-face declarations found.

## Typography

display-xl ○○○ Linear Display · 600 · 80px
The quick brown fox jumps
display-lg ○○○ Linear Display · 600 · 56px
The quick brown fox jumps
display-md ○○○ Linear Display · 600 · 40px
The quick brown fox jumps
headline ○○○ Linear Display · 600 · 28px
Body copy for reading comfort and visual hierarchy.
card-title ○○○ Linear Display · 500 · 22px
The quick brown fox jumps
subhead ○○○ Linear Display · 400 · 20px
Body copy for reading comfort and visual hierarchy.
body-lg ○○○ Linear Text · 400 · 18px
Body copy for reading comfort and visual hierarchy.
body ○○○ Linear Text · 400 · 16px
Body copy for reading comfort and visual hierarchy.
body-sm ○○○ Linear Text · 400 · 14px
Body copy for reading comfort and visual hierarchy.
caption ○○○ Linear Text · 400 · 12px
Body copy for reading comfort and visual hierarchy.
button ○○○ Linear Text · 500 · 14px
Body copy for reading comfort and visual hierarchy.
eyebrow ○○○ Linear Text · 500 · 13px
Body copy for reading comfort and visual hierarchy.
mono ○○○ Linear Mono · 400 · 13px
Body copy for reading comfort and visual hierarchy.

## Token usage graph

No tokens.

## Native CSS tokens (ground truth)

No CSS variables declared in source.

## WCAG contrast matrix

Computing…

AAA (≥7.0) AA (≥4.5) Fail (<4.5) cell shows ratio · hover for status

## DESIGN.md (raw)

    ---
    version: alpha
    name: Linear-design-analysis
    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.1
        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.2
        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.4
        letterSpacing: '-0.2px'
      body-lg:
        fontFamily: Linear Text
        fontSize: 18px
        fontWeight: 400
        lineHeight: 1.5
        letterSpacing: '-0.1px'
      body:
        fontFamily: Linear Text
        fontSize: 16px
        fontWeight: 400
        lineHeight: 1.5
        letterSpacing: '-0.05px'
      body-sm:
        fontFamily: Linear Text
        fontSize: 14px
        fontWeight: 400
        lineHeight: 1.5
        letterSpacing: 0
      caption:
        fontFamily: Linear Text
        fontSize: 12px
        fontWeight: 400
        lineHeight: 1.4
        letterSpacing: 0
      button:
        fontFamily: Linear Text
        fontSize: 14px
        fontWeight: 500
        lineHeight: 1.2
        letterSpacing: 0
      eyebrow:
        fontFamily: Linear Text
        fontSize: 13px
        fontWeight: 500
        lineHeight: 1.3
        letterSpacing: 0.4px
      mono:
        fontFamily: Linear Mono
        fontSize: 13px
        fontWeight: 400
        lineHeight: 1.5
        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
    source:
      type: awesome-design-md
      slug: linear.app
      url: https://getdesign.md/linear.app/design-md
    preview_tokens:
      button_primary_bg: '#010102'
      button_primary_text: '#ffffff'
      button_primary_border: '#010102'
      button_secondary_bg: transparent
      button_secondary_text: '#010102'
      button_secondary_border: '#ffffff'
      button_tertiary_text: '#5e6ad2'
      surface_bg: '#f7f8f8'
      card_bg: '#f7f8f8'
      text: '#010102'
      text_muted: '#d0d6e0'
      border: '#ffffff'
      accent: '#5e6ad2'
      button_radius: 8px
      card_radius: 12px
      input_radius: 8px
    ---

    ## 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 |
    | `{typography.eyebrow}` | 13px | 500 | 1.30 | 0.4px | Section eyebrow (slight positive tracking) |
    | `{typography.mono}` | 13px | 400 | 1.50 | 0 | Linear Mono for code in product screenshots |

    ### Principles

    - **Aggressive negative tracking on display** (-3.0px at 80px ≈ 4% of size).
    - **Single voice from display to body.** Display-xl at 600 → body at 400 — same family, narrower weights.
    - **Eyebrow uses positive tracking** (+0.4px) — contrast against the negative-tracked display marks the eyebrow as taxonomy.
    - **Mono only in code contexts.** Linear Mono lives inside product screenshots — not on marketing chrome.

    ### Note on Font Substitutes

    Linear's custom typeface isn't publicly distributed; the documented fallback `SF Pro Display, -apple-system, system-ui` is the recommended substitute on macOS. For cross-platform implementation, **Inter** at weight 500 / 600 / 700 is the closest free substitute. **Geist Sans** is also viable. For mono, **JetBrains Mono** or **Geist Mono** at weight 400 closely approximates Linear Mono.

    ## Layout

    ### Spacing System

    - **Base unit**: 4px.
    - **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
    - Card interior padding: `{spacing.lg}` 24px on feature/pricing cards; `{spacing.xl}` 32px on testimonial cards; `{spacing.xxl}` 48px on CTA banners.
    - Pill button padding: 8px vertical · 14px horizontal — Linear's compact button spec.
    - Form input padding: 8px vertical · 12px horizontal.

    ### Grid & Container

    - Max content width sits around 1280px.
    - Card grids are 3-up at desktop, 2-up at tablet, 1-up at mobile.
    - Pricing tier grid is 3-up; comparison strip below shows checkmarks per tier.
    - Product screenshot panels span full content width — they're the protagonist.

    ### Whitespace Philosophy

    The dark canvas IS the whitespace. Sections separate by lift onto surface-1 panels, not by gaps in white. Within a panel, generous `{spacing.lg}` 24px gaps between content blocks; `{spacing.section}` 96px between sections.

    ## Elevation & Depth

    | Level | Treatment | Use |
    |---|---|---|
    | 0 (flat) | No shadow, no border | Default for body type, hero text, footer |
    | 1 (charcoal lift) | `{colors.surface-1}` background on canvas, 1px `{colors.hairline}` | Default cards, product panels |
    | 2 (surface-2 lift) | `{colors.surface-2}` background, 1px `{colors.hairline-strong}` | Featured pricing card, hovered cards |
    | 3 (surface-3 lift) | `{colors.surface-3}` background | Sub-nav, dropdown menus |
    | 4 (focus ring) | 2px `{colors.primary-focus}` outline at 50% opacity | Focused input, focused button |

    Linear's depth is carried by surface ladder + hairline borders. The brand resists drop shadows on dark almost entirely.

    ### Decorative Depth

    - **Product UI screenshots** dominate as decorative depth.
    - **No atmospheric gradients, no spotlight cards.**
    - **Subtle white edge highlight** on the top edge of lifted panels — gives the dark surface a faint "pixel rendered" feel.

    ## Shapes

    ### Border Radius Scale

    | Token | Value | Use |
    |---|---|---|
    | `{rounded.xs}` | 4px | Small chips, status badges |
    | `{rounded.sm}` | 6px | Inline tags |
    | `{rounded.md}` | 8px | All buttons, form inputs |
    | `{rounded.lg}` | 12px | Pricing cards, feature cards, testimonial cards |
    | `{rounded.xl}` | 16px | Product screenshot panels |
    | `{rounded.xxl}` | 24px | Oversized CTA banners (rare) |
    | `{rounded.pill}` | 9999px | Pricing tab toggles, status pills |
    | `{rounded.full}` | 9999px | Avatar circles |

    ### Photography & Illustration Geometry

    - Product UI screenshots dominate; they sit in `{rounded.xl}` 16px tiles with `{spacing.lg}` 24px outer padding.
    - Customer logo tiles render at small sizes (~24px logo height) on `{colors.canvas}` with no border.
    - Avatar circles in testimonial cards use `{rounded.full}` at 32–40px sizes.

    ## Components

    ### Buttons

    **`button-primary`** — Lavender CTA. The default primary CTA across all pages.
    - Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}`, padding 8px 14px, rounded `{rounded.md}`.
    - Pressed state lives in `button-primary-pressed` (background shifts to `{colors.primary-focus}`).
    - Hover state lives in `button-primary-hover` (background shifts to `{colors.primary-hover}` lighter lavender).

    **`button-secondary`** — Charcoal button. Used for secondary CTAs ("Sign in", "Read changelog").
    - Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.button}`, padding 8px 14px, rounded `{rounded.md}`. 1px `{colors.hairline}` border.

    **`button-tertiary`** — Plain text button.
    - Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 8px 14px.

    **`button-inverse`** — White-on-dark inverse CTA.
    - Background `{colors.inverse-canvas}`, text `{colors.inverse-ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 8px 14px.

    ### Pricing Tabs

    **`pricing-tab-default`** + **`pricing-tab-selected`** — Pill-toggle on `/pricing`.
    - Default: `{colors.canvas}` background, `{colors.ink-subtle}` text, rounded `{rounded.pill}`, padding 6px 14px.
    - Selected: `{colors.surface-2}` background, `{colors.ink}` text — selected = surface lift.

    ### Cards & Containers

    **`pricing-card`** — Each tier on `/pricing`.
    - Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px. 1px `{colors.hairline}` border.

    **`pricing-card-featured`** — Recommended tier — surface lift to surface-2.
    - Background `{colors.surface-2}`, otherwise identical structure.

    **`feature-card`** — Generic feature highlight tile.
    - Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.

    **`product-screenshot-card`** — The dominant card type — frames a high-fidelity Linear app UI screenshot.
    - Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xl}`, padding 24px.

    **`testimonial-card`** — Customer quote with avatar + name + role.
    - Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-lg}`, rounded `{rounded.lg}`, padding 32px.

    **`customer-logo-tile`** — Small tile in the customer marquee.
    - Background `{colors.canvas}`, text `{colors.ink-subtle}`, type `{typography.caption}`, rounded `{rounded.xs}`, padding 16px.

    **`cta-banner`** — Closing CTA panel near page bottom.
    - Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.headline}`, rounded `{rounded.lg}`, padding 48px.

    ### Inputs & Forms

    **`text-input`** + **`text-input-focused`** — Form fields on `/contact/sales` and signup overlays.
    - Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 8px 12px.
    - Focused state retains the same surface; the focus ring is a 2px `{colors.primary-focus}` outline at 50% opacity.

    ### Status & Build Page

    **`changelog-row`** — Each row in `/build` (changelog page) listing version, date, and changes.
    - Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xs}`, padding 24px 0. 1px `{colors.hairline}` bottom rule.

    **`status-badge`** — Small status pill.
    - Background `{colors.surface-2}`, text `{colors.ink-muted}`, type `{typography.caption}`, rounded `{rounded.pill}`, padding 2px 8px.

    ### Navigation

    **`top-nav`** — Sticky dark bar with the Linear wordmark left, primary nav links centered, and a `button-secondary` ("Sign in") + `button-primary` ("Get started") pair right.
    - Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 56px.

    ### Footer

    **`footer`** — Dense link grid on `{colors.canvas}` with the Linear wordmark left.
    - Background `{colors.canvas}`, text `{colors.ink-subtle}`, type `{typography.caption}`, padding 64px 32px.

    ## Do's and Don'ts

    ### Do

    - Reserve `{colors.canvas}` (#010102) as the system's anchor surface — the faint blue tint is intentional.
    - Use `{colors.primary}` lavender ONLY for: brand mark, primary CTA, focus ring, link emphasis.
    - Use the four-step surface ladder for hierarchy. Avoid skipping levels.
    - Pair display weight 600 with body weight 400 — Linear resists 700+ display weights.
    - Apply negative letter-spacing aggressively on display.
    - Use product UI screenshots as the protagonist of every section.
    - Compose CTAs as `{rounded.md}` 8px corners.

    ### Don't

    - Don't ship a light-mode marketing page.
    - Don't use lavender as a section background or card fill.
    - Don't introduce a second chromatic accent (orange, pink, green for marketing).
    - Don't add atmospheric gradients or spotlight cards.
    - Don't pill-round CTAs.
    - Don't use `#000000` true black as the canvas.
    - Don't combine multiple bright accents in product screenshot mockups.

    ## Responsive Behavior

    ### Breakpoints

    | Name | Width | Key Changes |
    |---|---|---|
    | Desktop-XL | 1440px | Default desktop layout |
    | Desktop | 1280px | Card grid 3-up maintained |
    | Tablet | 1024px | Card grid 3-up → 2-up |
    | Mobile-Lg | 768px | Pricing comparison becomes accordion; nav hamburger |
    | Mobile | 480px | Single-column; display-xl scales 80px → ~36px |

    ### Touch Targets

    - CTAs hold ≥40px tap height across viewports.
    - Pricing tab pills hold ≥36px tap height; touch viewports grow to ≥44px.
    - Form inputs hold ≥44px tap target on touch.

    ### Collapsing Strategy

    - **Top nav**: links collapse to hamburger below 768px.
    - **Card grids**: 3-up → 2-up at 1024px → 1-up below 768px.
    - **Pricing comparison**: per-tier accordion below 768px.
    - **Display type**: `{typography.display-xl}` 80px scales toward `{typography.display-md}` 40px on mobile.

    ### Image Behavior

    - Product UI screenshots maintain aspect ratio and never crop.
    - Customer logos in the marquee may collapse from 6-up to 3-up below 768px.

    ## Iteration Guide

    1. Focus on ONE component at a time and reference it by its `components:` token name.
    2. When introducing a section, decide first which surface lift it lives on.
    3. Default body to `{typography.body}` at weight 400.
    4. Run `npx @google/design.md lint DESIGN.md` after edits.
    5. Add new variants as separate component entries.
    6. Treat lavender as scarce: brand mark, primary CTA, focus, link emphasis.
    7. Lead every section with a product UI screenshot.

    ## Known Gaps

    - The four-step surface ladder values are extracted directly from Linear's `--color-bg-level-3`, `--color-line-tint`, etc. CSS variables; they are Linear's canonical surface spec.
    - Form-field error and validation styling is not visible on the inspected pages.
    - Light mode is not documented because the marketing site does not ship a light theme.
    - Linear's actual product UI uses a richer color-tag palette (red, orange, yellow, green, blue, purple) for issue priorities and project labels — those colors live in the in-product surfaces shown in mockups.
    - The custom display, text, and mono families are proprietary; an open-source substitute is acceptable.

## Technical details

### Source

URL
  https://linear.app/
External CSS files
  0
Preload CSS files
  0
@import resolved
  0
Inline <style> blocks
  0
Inline style="" attrs
  0
Failed fetches
  0
— detected —
Hex colors
  21
Font families
  1
Font sizes
  5
Radii
  0
Native CSS vars
  0
@font-face blocks
  0
Unique tokens (graph)
  0

### Audit

Detected tokens (regex pass over CSS)

    {
      "colors": {
        "hex": [
          "#010102",
          "#f7f8f8",
          "#5e6ad2",
          "#0f1011",
          "#ffffff",
          "#828fff",
          "#5e69d1",
          "#d0d6e0",
          "#8a8f98",
          "#62666d",
          "#141516",
          "#18191a",
          "#191a1b",
          "#23252a",
          "#34343a",
          "#3e3e44",
          "#f5f6f6",
          "#f6f7f7",
          "#000000",
          "#7a7fad",
          "#27a644"
        ],
        "hex_usage": {
          "#010102": 6,
          "#f7f8f8": 4,
          "#5e6ad2": 4,
          "#0f1011": 2,
          "#ffffff": 2,
          "#828fff": 3,
          "#5e69d1": 3,
          "#d0d6e0": 2,
          "#8a8f98": 2,
          "#62666d": 2,
          "#141516": 1,
          "#18191a": 1,
          "#191a1b": 1,
          "#23252a": 2,
          "#34343a": 1,
          "#3e3e44": 1,
          "#f5f6f6": 1,
          "#f6f7f7": 1,
          "#000000": 3,
          "#7a7fad": 2,
          "#27a644": 2
        }
      },
      "typography": {
        "family": [
          "Linear Display"
        ],
        "size": [
          "12px",
          "16px",
          "24px",
          "36px",
          "48px"
        ]
      },
      "fonts": [],
      "spacing": [],
      "radii": []
    }

CSS fetch trace

    {
      "external": [],
      "preload": [],
      "imports_resolved": 0,
      "inline_style_blocks": 0,
      "inline_style_attrs": 0,
      "failed": []
    }

Quality score breakdown

    {
      "overall": 82,
      "grade": "B",
      "source": "imported-design-md",
      "note": "Imported from curated DESIGN.md; not scored from live extraction evidence.",
      "categories": {
        "color_discipline": {
          "score": 80,
          "grade": "B",
          "value": "curated markdown",
          "ideal": "live evidence"
        },
        "typography": {
          "score": 80,
          "grade": "B",
          "value": "curated markdown",
          "ideal": "font evidence"
        },
        "tokenization": {
          "score": 70,
          "grade": "C",
          "value": "heuristic frontmatter",
          "ideal": "extracted tokens"
        },
        "lint_compliance": {
          "score": 80,
          "grade": "B",
          "value": "imported",
          "ideal": "0E 0W"
        },
        "accessibility": {
          "score": 70,
          "grade": "C",
          "value": "not audited",
          "ideal": "100% AA"
        }
      }
    }