Linear Design System

Overview

Linear presents a masterclass in dark-mode product design — an obsidian-hued environment where information density coexists with surprising editorial restraint. The canvas sits at {colors.canvas} (#0f1011), a black so deep it reads as void, while the ink palette ascends from whisper-gray {colors.body} (#8a8f98) through mid-tone {colors.muted-soft} (#d0d6e0) to the crisp {colors.ink} (#f7f8f8) that commands attention only where warranted. Brand voltage arrives via a singular magenta accent ({colors.primary} — #f79ce0) that appears sparingly — never as a field fill, always as a deliberate signal — alongside a supporting cast of coral, amber, teal, and blue semantic accents that map to status states within the application shell.

Typography defines the system's voice through Inter Variable, deployed at weights that hover between medium and demi-bold (the canonical headline weight is 510 — not quite bold, not quite regular). Display text at {typography.display-lg} (64px) carries aggressive negative letter-spacing (-1.408px), creating a tightened, architectural quality that feels both technical and premium. Body copy breathes at {typography.body-md} (15px/400) with its own subtle negative tracking (-0.165px). A secondary typeface, Berkeley Mono, handles all code, identifiers, and machine-readable strings — establishing a clear typographic boundary between human language and system metadata.

Shape language favors utility over decoration: {rounded.pill} (9999px) governs all interactive elements (buttons, badges, nav items, status pills) creating a consistent pill vocabulary that feels modern without being playful. Container radii cluster tightly around {rounded.xl} (12px) for major panels, {rounded.md} (8px) for sub-components, and {rounded.sm} (4px) for micro-elements. The system distinguishes between two visual dialects: the marketing surface (hero band, landing page) which employs generous whitespace and large-scale type, and the app chrome (dashboard preview, sidebar, issue detail) which compresses information into dense, scannable hierarchies.

Key Characteristics

• Obsidian canvas ({colors.canvas} — #0f1011) with {colors.surface-soft} (#08090a) recessed areas for nested containers.
• Ink hierarchy spans four tiers: {colors.ink} (headlines), {colors.muted-soft} (secondary labels), {colors.body} (body copy), {colors.muted} (tertiary/de-emphasized).
• Magenta brand accent ({colors.primary} — #f79ce0) used sparingly; most CTAs default to {colors.on-dark} (white) on dark backgrounds.
• Display type at {typography.display-lg} uses fontWeight: 510 with -1.408px letter-spacing — tighter than standard.
• Pill-shaped interactive radius ({rounded.pill} — 9999px) applied universally to buttons, badges, nav triggers, and status indicators.
• Glass-morphism surfaces using {colors.surface-glass} (rgba(255, 255, 255, 0.08)) for elevated cards and overlays.
• Berkeley Mono ({typography.mono} — 13px) for all code references, issue identifiers, and system labels.
• Inset shadow language ({extensions.shadows.inner-highlight}, {extensions.shadows.inset-deep}) replaces traditional drop shadows for depth in dark mode.

Colors

Brand & Accent

• Primary ({colors.primary} — #f79ce0): Signature magenta-pink used for brand moments; appears minimally on marketing surfaces and as a status accent within the app shell.
• Primary Hover ({colors.primary-hover} — #f5b6e0): Lightened state for interactive hover on primary-branded elements.
• Primary Active ({colors.primary-active} — #e88acb): Pressed/active state deepening toward rose.
• Accent Coral ({colors.accent-coral} — #f79ce0): Aligned with primary; used interchangeably in status contexts.
• Accent Orange ({colors.accent-orange} — #fb7f8b): Warning/high-attention state indicator.
• Accent Amber ({colors.accent-amber} — #ffdf9f): Starred/favorite indicator; also used for caution-level semantics.
• Accent Teal ({colors.accent-teal} — #83dcdc): Success/completion state coloring.
• Accent Blue ({colors.accent-blue} — #4ea7fc): Informational/link coloring within app context.

Surface

• Canvas ({colors.canvas} — #0f1011): Primary page background — near-black obsidian tone.
• Surface Soft ({colors.surface-soft} — #08090a): Deepest surface; used for app shell background, sidebar, and recessed panels.
• Surface Elevated ({colors.surface-elevated} — #121314): Slightly lifted from canvas; used for issue detail cards and content containers.
• Surface Strong ({colors.surface-strong} — #18191b): Mid-tier elevation for modals, dropdowns, and floating panels.
• Surface Overlay ({colors.surface-overlay} — #23252e): Highest elevation before modal; toasts, tooltips, popover backs.
• Surface Input ({colors.surface-input} — #121212): Dedicated input field background; pure-black tint.
• Surface Glass ({colors.surface-glass} — rgba(255, 255, 255, 0.08)): Translucent white overlay at 8% opacity; glass-morphism cards and hover states.
• Surface Glass Subtle ({colors.surface-glass-subtle} — rgba(255, 255, 255, 0.02)): Barely-visible glass treatment; subtle hover or focus indication.

Text & Ink

• Ink ({colors.ink} — #f7f8f8): Primary headline and high-emphasis text; near-white with cool undertone.
• Body ({colors.body} — #8a8f98): Default body copy, descriptions, and secondary content.
• Muted ({colors.muted} — #62666d): Tertiary text — timestamps, placeholders, disabled labels.
• Muted Soft ({colors.muted-soft} — #d0d6e0): Secondary emphasis — nav links, property panel labels, subtle callouts.
• Subtle ({colors.subtle} — #e2e4e7): Near-white but softer than ink; used for dividers and very faint text.
• On Primary ({colors.on-primary} — #f7f8f8): Text color rendered atop {colors.primary} backgrounds.
• On Dark ({colors.on-dark} — #ffffff): Pure white reserved for highest-contrast elements on darkest surfaces (logo, primary CTA text).
• On Surface ({colors.on-surface} — #f7f8f8): Default readable text on standard surfaces; mirrors ink.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.08)): Default divider and subtle border; 8% white.
• Hairline Strong ({colors.hairline-strong} — rgba(255, 255, 255, 0.12)): Emphasized separator; 12% white for clearer boundaries.
• Border Strong ({colors.border-strong} — #232526): Solid opaque border for input fields and contained elements.
• Border Focus ({colors.border-focus} — rgba(255, 255, 255, 0.2)): Focus ring and active-state border indication.
• Border Inset ({colors.border-inset} — rgba(0, 0, 0, 0.2)): Inset shadow-as-border for pressed/depressed depth.

Semantic

• Error Background ({colors.error-bg} — rgba(243, 78, 82, 0.1)): Red-tinted surface for error state fields.
• Error Text ({colors.error-text} — #f34e52): Direct error message labeling.
• Success Background ({colors.success-bg} — rgba(39, 166, 68, 0.07)): Green-tinted success state surface.
• Success Text ({colors.success-text} — #27a644): Confirmation messaging.
• Info Background ({colors.info-bg} — rgba(0, 255, 5, 0.1)): Informational highlight surface with slight green cast.
• Info Glow ({colors.info-glow} — rgba(0, 255, 5, 0.15)): Enhanced info state for glowing indicators.
• Link ({colors.link} — {colors.ink}): Standard link color inherits from ink.
• Link Muted ({colors.link-muted} — {colors.muted-soft}): De-emphasized link styling for tertiary actions.

Typography

Font Family

Linear's type system centers on Inter Variable — a variable-font version of Rasmus Andersson's geometric-humanist sans-serif, deployed across every non-monospaced element from {typography.display-lg} (64px headlines) down to {typography.caption} (13px labels). The font stack includes "SF Pro Display" as the primary Apple-platform fallback, followed by the full system-ui cascade (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif). This ensures graceful degradation across macOS, Windows, Linux, and mobile platforms.

The monospaced face is Berkeley Mono — a proprietary, highly-legible coding typeface with ui-monospace, "SF Mono", Menlo, and generic monospace fallbacks. It renders issue identifiers (e.g., DRV-8852), code snippets, keyboard shortcuts, and any machine-readable string. At {typography.mono} (13px/400), Berkeley Mono occupies roughly the same vertical space as {typography.caption} while maintaining clear character differentiation for alphanumeric strings.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 510 | 64px (1.0) | -1.408px | Reserved for future larger contexts | | {typography.display-lg} | 64px | 510 | 64px (1.0) | -1.408px | Hero headline — single-line impact | | {typography.title-md} | 48px | 510 | 48px (1.0) | -1.056px | Section headlines on sub-pages | | {typography.title-sm} | 20px | 590 | 26.6px (1.33) | -0.24px | Card titles, issue headers, panel headings | | {typography.label-md} | 16px | 590 | 28px (1.75) | 0 | Subsection labels, property keys | | {typography.body-md} | 15px | 400 | 24px (1.6) | -0.165px | Primary body copy, descriptions | | {typography.body-sm} | 14px | 400 | 21px (1.5) | 0 | Sidebar items, activity feed entries | | {typography.caption} | 13px | 400 | 18px (1.38) | 0 | Timestamps, metadata, nav items | | {typography.button} | 13px | 510 | 16px (1.23) | 0 | CTA buttons, primary actions | | {typography.button-nav} | 13px | 400 | 18px (1.38) | 0 | Navigation links, ghost buttons | | {typography.mono} | 13px | 400 | 20px (1.54) | 0 | Code, identifiers, system labels | | {typography.mono-sm} | 12px | 400 | 16px (1.33) | 0 | Compact code, tiny identifiers |

Principles

Linear's typographic system trusts scale and tightness rather than weight to establish hierarchy. Notice that {typography.display-lg} and {typography.title-md} share the identical fontWeight: 510 — a value deliberately between CSS 500 (medium) and 600 (semi-bold). This avoids the blunt instrument of boldness, instead relying on the dramatic size differential (64px → 48px → 20px) and aggressive negative letter-spacing at larger sizes to create visual authority. The negative tracking (-1.408px at 64px, scaling proportionally down) pulls display characters together into a unified word-shape, giving headlines an engineered, almost architectural quality appropriate for a tool built for engineers.

Body text at {typography.body-md} (15px) sits slightly smaller than the web-standard 16px, a choice that signals information density and screen-real-estate consciousness — this is software for people who value horizontal space. Even here, a microscopic -0.165px letter-spacing prevents the Inter characters from feeling too loose at small sizes. The {typography.title-sm} role bumps to fontWeight: 590 for card-level headings, the one place where weight does meaningful work distinguishing a container's title from its contents.

Uppercase is absent entirely from the Latin character rendering; the system relies entirely on case-sensitive sentence-style capitalization even for navigation items and buttons. Italics are similarly unused in the extracted interface — emphasis comes through color ({colors.ink} vs. {colors.body}) rather than slant.

Note on Font Substitutes

Inter Variable is available as a free Google Font under the name "Inter" (variable font axis support requires the variable font file specifically). For production implementations serving the Google Fonts CDN, use:

:root {
  --font-sans: 'Inter', "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
}

Berkeley Mono is proprietary and cannot be freely substituted. The closest open-source equivalent is JetBrains Mono (available on Google Fonts), which shares similar character widths, legibility at small sizes, and a neutral, technical demeanor. Fallback to ui-monospace (system monospace) provides acceptable degradation on platforms lacking JetBrains Mono.

Layout

Spacing System

• Base unit: 2px — the atomic increment from which all spacing derives.
• Tokens: {spacing.xxs} (2px) for micro-gaps; {spacing.xs} (3px) for icon-to-text kerning; {spacing.xxs-plus} (4px) for compact internal padding; {spacing.sm} (6px) for list item gaps; {spacing.md} (8px) for standard component internal spacing; {spacing.base} (10px) for button padding; {spacing.lg} (12px) for card internal padding; {spacing.xl} (14px) for comfortable touch targets; {spacing.xl-lg} (16px) for section-internal margins; {spacing.section-sm} (24px) for block separation; {spacing.section-md} (32px) for major section breaks; {spacing.section-lg} (48px) for page-section vertical rhythm; {spacing.section-xl} (72px) for hero bottom-padding; {spacing.hero} (120px) for hero top-padding.
• Section padding (vertical): {spacing.section-xl} (72px) — applied below the hero band to create breathing room before content begins.
• Card internal padding: {component.issue-card} uses {spacing.section-md} (32px); {component.properties-panel} uses {spacing.lg} (12px).
• Gutters: Marketing content constrains to approximately 1440px max-width (per extracted container data); app-shell preview fills viewport width.

Grid & Container

• Max content width: 1440px for main content area (both marketing and app preview sections).
• Density choice: Marketing surface uses low-density, single-column editorial layout with generous left-margin for headline; app chrome uses three-column layout (sidebar ~240px, main content fluid, properties rail ~280px).
• Desktop grid behavior: The dashboard preview demonstrates a classic SaaS application grid — fixed-width left sidebar navigation, fluid center content area (issue detail), and fixed-width right rail (properties/metadata). No explicit CSS Grid detected; layout appears flexbox-driven with percentage-based or calc() widths.
• Hero column split: Headline and subheadline occupy left ~60% of container; right side remains empty or holds the app preview card positioned below the text block.

Whitespace Philosophy

Linear employs asymmetric generosity — the marketing hero grants enormous vertical breathing room ({spacing.hero} = 120px above, {spacing.section-xl} = 72px below) while the app chrome compresses information into dense, vertically-scannable lists with 6-8px inter-item gaps. This duality signals that the landing page is editorial (inviting, contemplative) while the product interface is instrumental (efficient, power-user-oriented). Horizontal whitespace within the app shell is minimal; elements hug their container edges with 8-12px internal padding.

Header Architecture

┌─────────────────────────────────────────────────────────────────────┐  ← 56px height ({component.top-nav})
│ [Logo]              Product  Resources  Customers  Pricing  ... │
│                      ↑        ↑          ↑         ↑       ↑      │
│                   {nav-item} {nav-item} {nav-item} {nav-item}     │
│                                                              [Log in] [Sign up] │
└─────────────────────────────────────────────────────────────────────┘
  ↑                                                                          ↑
{component.nav-logo}                                              {component.button-primary}
                                                                    {component.button-primary-invert}

Max-width: 1440px. Logo flush-left. Navigation items centered-left with 12px horizontal padding per {component.nav-item}. Utility actions (Log in, Sign up) flush-right. Sign up button uses {colors.on-dark} background with {rounded.pill} geometry.

Hero Section

┌─────────────────────────────────────────────────────────────────────┐
│                                                                     │
│                                                                     │  ← {spacing.hero} (120px) top pad
│  The product development                                            │
│  system for teams and agents                                        │  ← {typography.display-lg}, {colors.ink}
│                                                                     │
│  Purpose-built for planning and building products.                  │  ← {typography.body-md}, {colors.body}
│  Designed for the AI era.                                           │
│                                                                     │
│                                              [New] [Loops →]       │  ← {component.hero-link}
│                                                                     │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │  ┌──────────┐  ┌──────────────────────────────────────────┐  │   │
│  │  │ Sidebar  │  │     DRV-8852 Faster app launch ★  ...    │  │   │  ← {component.app-shell}
│  │  │          │  │                                          │  │   │
│  │  │ Pulse    │  │     Faster app launch                    │  │   │    rounded: {rounded.xl}
│  │  │ Inbox    │  │     Render UI before vehicle_state...    │  │   │
│  │  │ My Issues │  │                                          │  │   │
│  │  │ Reviews   │  │     Activity                            │  │   │
│  │  │           │  │     ...                                 │  │   │
│  │  └──────────┘  └──────────────────────────────────────────┘  │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘
  ↑ {spacing.section-xl} (72px) bottom pad

App Preview Layout (Dashboard Chrome)

┌──────────────────────────────────────────────────────────────────────┐
│ ┌────────────┐ ┌─────────────────────────────────┐ ┌──────────────┐ │
│ │            │ │ ○ DRV-8852 Faster app launch ★  │ │  Reviews     │ │
│ │  Linear  ▾ │ │                                 │ │  ○ Revert    │ │
│ │  🔍  ✎    │ ├─────────────────────────────────┤ │              │ │
│ │            │ │ Faster app launch               │ │  Properties  │ │
│ │ ⚡ Pulse   │ │ Render UI before [vehicle_state]│ │  ● In Progress│ │
│ │ 📥 Inbox   │ │ sync when minimum req...        │ │  ▮ Medium    │ │
│ │ ⊙ My Issues│ │                                 │ │  👤 Karri    │ │
│ │ ⟡ Reviews  │ │ Activity                        │ │  ● Linear    │ │
│ │            │ │ 👤 Linear created... 2min ago   │ │  ○ Cycle 144 │ │
│ │ Workspace ▾│ │ ⊞ Triage Intelligence added...  │ │              │ │
│ │ ○ Initia.. │ │                                 │ │              │ │
│ │ ○ Projects │ │ 👤 karri · 4 min ago            │ │              │ │
│ │ ⋯ More     │ │                                 │ │              │ │
│ │            │ │                                 │ │              │ │
│ │ Favorites▾ │ │                                 │ │              │ │
│ │ ○ Faster.. │ │                                 │ │              │ │
│ └────────────┘ └─────────────────────────────────┘ └──────────────┘ │
│   ↑sidebar      ↑issue-card (center)              ↑properties-panel │
│   {rounded.xl}  rounded:{rounded.xl}               padding:{spacing.lg}│
└──────────────────────────────────────────────────────────────────────┘

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat baseline | No shadow, {colors.canvas} background | Page background, hero band | | 1 — Hairline outline | {extensions.shadows.hairline-outline} (1px rgba(0,0,0,0.2)) | Button borders, input fields, contained elements | | 2 — Inner highlight | {extensions.shadows.inner-highlight} (inset rgba(255,255,255,0.05)) | Elevated cards receiving light from "above" | | 3 — Inner glow | {extensions.shadows.inner-glow} (inset 0.5px rgba(255,255,255,0.08)) | Hover states on glass cards | | 4 — Inset deep | {extensions.shadows.inset-deep} (inset 12px rgba(0,0,0,0.2)) | Pressed/depressed states, active tabs | | 5 — Modal/dropdown | {extensions.shadows.elevated} (0 2px 32px rgba(0,0,0,0.25)) | Floating panels, modals, dropdowns |

Linear's depth philosophy is inverted relative to light-mode systems. Rather than casting shadows downward (which disappear on black), depth is signaled through inner highlights — thin inset borders of white-at-low-opacity that simulate light catching the top-inner edge of a raised surface. This creates the illusion that cards float above the canvas by reflecting ambient "light" along their upper interior edge. The {extensions.shadows.inner-highlight} token is the workhorse: nearly every {component.app-shell}, {component.issue-card}, and elevated container carries this treatment. True drop shadows ({extensions.shadows.elevated}) are reserved exclusively for floating elements that break out of the document flow — modals, toasts, and popover menus.

Decorative Depth

No gradient washes, no rainbow stripes, no photographic depth treatments detected. Linear's aesthetic rejects decorative layering in favor of flat color-block composition — depth emerges purely from luminance differences between surface tokens (#0f1011 → #121314 → #18191b) and the subtle inner-shadow system described above.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.none} | 0px | Text inputs, textarea containers, full-bleed elements | | {rounded.sm} | 4px | Sidebar items, status pills, inline code, small tags | | {rounded.DEFAULT} | 6px | General-purpose rounding (rarely used directly) | | {rounded.md} | 8px | Workspace switcher, small containers | | {rounded.lg} | 9px | Medium cards, panel corners | | {rounded.xl} | 12px | Major containers: app shell, issue card, modal dialogs | | {rounded.pill} | 9999px | All interactive elements: buttons, nav items, badges, avatars | | {rounded.circle} | 50% | Avatar images, circular status indicators |

Photography Geometry

No photography present in the extracted interface. The app preview is a rendered UI mockup (CSS/SVG-based), not a screenshot bitmap. Imagery, if present on other pages of the site, would likely follow the same {rounded.xl} (12px) container rounding with potential {rounded.pill} avatar crops for user photos.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Navigation

{component.top-nav} — The persistent header bar spanning the full viewport width at 56px height. Background {colors.canvas}, carrying navigation links in {colors.body} via {typography.button-nav}. Contains {component.nav-logo} on the left, centered navigation items ({component.nav-item}), and utility actions (Log in, Sign up) on the right separated by a vertical hairline divider. No visible border-bottom; blends seamlessly into the hero canvas.

{component.nav-item} — Individual navigation trigger (Product, Resources, Customers, Pricing, Now, Contact). Transparent background with {colors.body} text at {typography.button-nav}, {rounded.pill} shape, and 0 12px horizontal padding. These function as both links and dropdown triggers; active/hover states would shift to {colors.ink} or apply {colors.surface-glass} background.

{component.nav-logo} — The Linear wordmark (icon + "Linear" text lockup). Renders in {colors.ink} at approximately 24px height. Clickable, likely routes to home. No background, no rounding.

{component.workspace-switcher} — Found within the app preview's sidebar header ("Linear ▾"). Transparent background, {colors.on-dark} text at {typography.caption}, {rounded.md} (8px) with 0 4px padding. Indicates current workspace context; chevron suggests dropdown behavior.

Hero Section

{component.hero-band} — The full-viewport-width hero container occupying the upper portion of the page. Background {colors.canvas}, padding {spacing.hero} (120px) top and {spacing.section-xl} (72px) bottom. Houses {component.hero-headline}, {component.hero-subheadline}, {component.hero-badge} (the "New" label), and {component.hero-link} ("Loops →").

{component.hero-headline} — "The product development system for teams and agents." Displayed at {typography.display-lg} (64px/510/-1.408px tracking) in {colors.ink}. Line-height equals font size (1.0) for tight, stacked line behavior. Max two-three lines before wrapping.

{component.hero-subheadline} — "Purpose-built for planning and building products. Designed for the AI era." Renders at {typography.body-md} (15px/400) in {colors.body}, positioned immediately below headline with natural flow spacing (~16px gap).

{component.hero-badge} — The "New" label appearing to the right of the subheadline. Uses {typography.caption} in {colors.ink}, likely with subtle background (possibly {colors.surface-glass}). {rounded.pill} geometry.

{component.hero-link} — "Loops →" auxiliary CTA link positioned right-aligned beside the badge. Text in {colors.muted-soft} at {typography.button-nav}, includes right-arrow Unicode or SVG. Functions as secondary navigation to feature spotlight.

Buttons

{component.button-primary} — The primary call-to-action button style. Background {colors.on-dark} (pure white), text {colors.surface-soft} (near-black for contrast), {typography.button} (13px/510), {rounded.pill} shape, 0 12px horizontal padding. Carries {extensions.shadows.button-elevated} — a complex multi-layer shadow creating subtle lift. Used for "Sign up" and "Open app" variants (the latter may invert to {component.button-primary-invert}).

{component.button-primary-invert} — Inverted primary variant seen on "Open app". Background {colors.muted-soft} (#e2e4e7 — light gray), text {colors.surface-soft}, same {typography.button} weight and {rounded.pill} geometry. Used when the button must sit on a lighter context or require visual de-emphasis from the main CTA.

{component.button-secondary} — Ghost/outline-adjacent style. Transparent background, {colors.ink} text at {typography.button-nav}, {rounded.pill}. Used for "Log in" and similar tertiary actions. May gain {colors.hairline} border on hover/focus.

{component.button-ghost} — Most subdued interaction style. Transparent background, {colors.body} text at {typography.button-nav}, {rounded.pill}, 0 12px padding. Used for navigation menu items (Product, Resources, etc.) where clicking should feel low-commitment.

{component.button-icon-only} — Square icon trigger (search, notifications, etc.). Transparent background, {colors.ink} text/icon, 32px × 32px size, {rounded.none} (sharp corners for icon fidelity). Examples: search magnifying glass, compose/edit icon in app preview header.

App Shell & Dashboard Preview

{component.app-shell} — The outermost container of the dashboard/UI preview card displayed beneath the hero text. Background {colors.surface-soft} (#08090a), {rounded.xl} (12px) corner radius, no internal padding (children manage their own). Spans near-full viewport width within the 1440px content constraint. Simulates the actual Linear application window.

{component.sidebar} — Left navigation column within {component.app-shell}, approximately 220-240px wide. Background matches {colors.surface-soft}, text in {colors.body} at {typography.button-nav}. Contains {component.sidebar-item} entries grouped by {component.sidebar-section-header} dividers. Vertical padding {spacing.md} (8px).

{component.sidebar-item} — Individual sidebar navigation row (Pulse, Inbox, My Issues, Reviews, etc.). Transparent background, {colors.body} text, {rounded.sm} (4px), padding 6px 8px. Includes leading icon (⚡, 📥, ⊙, ⟡) rendered in inherited text color or slightly muted. Active item uses {component.sidebar-item-active} variant with {colors.ink} text.

{component.sidebar-item-active} — Active/selected sidebar state. Inherits structure from {component.sidebar-item} but elevates text to {colors.ink}. May include subtle left-edge indicator or {colors.surface-glass} background treatment.

{component.sidebar-section-header} — Grouping label within sidebar ("Workspace", "Favorites"). Text in {colors.muted} at {typography.caption}, padding 12px 8px 6px 8px. Provides visual separation between navigation groups. Includes expansion chevron (▾) where applicable.

{component.sidebar-favorite-item} — Pinned/favorited item under Favorites section (e.g., "Faster app launch"). Text in {colors.ink} (higher prominence than regular items), same {typography.button-nav} and {rounded.sm} geometry. Preceded by star/bullet indicator.

Issue Detail Card

{component.issue-card} — The central content area displaying issue "DRV-8852 — Faster app launch". Background {colors.surface-elevated} (#121314), {rounded.xl} (12px), padding {spacing.section-md} (32px). Houses issue identifier, title, description, activity feed. Separated from sidebar by implicit gutter.

{component.issue-header} — The issue title line: identifier icon + "DRV-8852" in {typography.mono} + "Faster app launch" in {typography.title-sm} + star icon ({colors.accent-amber}) + kebab menu trigger. Text {colors.ink}, transparent background.

{component.issue-description} — Body text below the title: "Render UI before vehicle_state sync when minimum required state is present..." Renders at {typography.body-md} (15px/400) in {colors.body}. Contains inline {component.inline-code} element for vehicle_state reference.

{component.issue-status-badge} — Status indicator (likely "Backlog" or "Unstarted") shown as icon + label. Transparent background, {colors.ink} text at {typography.label-md}, {rounded.sm}. Positioned in header area.

{component.issue-starred-indicator} — Star icon (★) next to issue title indicating favorites. Color {colors.accent-amber} (#ffdf9f), size 16px.

{component.issue-menu-trigger} — Kebab/three-dot menu (⋯) for issue actions. Color {colors.muted}, size 24px, clickable.

Activity Feed

{component.activity-feed} — Container for chronological event list below issue description. Transparent background, text {colors.body} at {typography.body-sm}.

{component.activity-item} — Individual activity entry (user action, comment, label change). Padding {spacing.sm} (8px) vertical. Contains avatar icon + user name + action description + timestamp.

{component.activity-timestamp} — Relative time stamp ("2min ago", "4 min ago") within activity items. Text {colors.muted} at {typography.caption}.

{component.activity-user-link} — User name within activity entry ("Linear", "Karri", "karri"). Text {colors.ink} at {typography.body-sm}, clickable.

Properties Panel (Right Rail)

{component.properties-panel} — Right-side metadata column within the issue card. Transparent background (shares parent {component.issue-card} surface), text {colors.muted-soft} at {typography.caption}, padding {spacing.lg} (12px). Contains labeled key-value pairs: Reviews, Priority, Assignee, Cycle, etc.

{component.property-label} — Property group heading ("Reviews", "Properties"). Text {colors.muted-soft} at {typography.caption}, uppercase or small-caps treatment implied by context.

{component.property-value} — Individual property display value. Text {colors.ink} or {colors.body} at {typography.button-nav}. May wrap in {component.status-pill-*} or {component.assignee-avatar} components depending on property type.

{component.status-pill-in-progress} — Status value showing "In Progress". Likely includes colored dot indicator + label. Transparent bg, {colors.ink} text at {typography.caption}, {rounded.pill}.

{component.priority-pill-medium} — Priority indicator "Medium". May include bar-chart icon. Text {colors.body} at {typography.caption}, {rounded.pill}.

{component.assignee-avatar} — Circular user avatar for assignee field. {rounded.circle} (50%), size 20px, displays user initial or photo thumbnail.

{component.cycle-badge} — Cycle/sprint assignment ("Cycle 144"). Includes clock/cycle icon. Text {colors.body} at {typography.caption}, {rounded.pill}.

Inputs & Forms

{component.text-input-app} — Application-internal text input (seen in app preview header area). Transparent background, text {colors.on-dark} at {typography.mono}, no border radius ({rounded.none}), no padding visible. Appears as bare text cursor for quick-entry fields like issue title editing.

{component.search-input} — Search field in app preview sidebar header. Background {colors.surface-input} (#121212), text {colors.on-dark} at {typography.mono}, sharp corners ({rounded.none}). Magnifying glass icon precedes input area.

{component.textarea-issue} — Multi-line text area for issue description editing. Unusual padding 0 32px 0 63px suggests rich-text editor with toolbar overlay. Text color reads as transparent in static state (placeholder behavior); active state would show {colors.on-dark}.

Action Bar

{component.action-bar} — Toolbar strip above issue content (below header). Contains icon-button group: link, copy, branch, split-view, more-dropdown. Text {colors.muted} at {typography.button-nav}, padding {spacing.base} (10px) vertical.

{component.action-bar-icon-btn} — Individual toolbar icon (link chain, duplicate, git branch, columns, expand). Size 28px, {rounded.pill}, color {colors.muted}. Hover would elevate to {colors.ink}.

{component.pagination-control} — "1 / 84" page indicator with up/down arrows. Text {colors.muted} at {typography.caption}. Positioned top-right of issue card.

Code & Labels

{component.inline-code} — Inline code span within issue description (e.g., vehicle_state). Text {colors.ink} at {typography.mono}, {rounded.sm} (4px), padding 0 4px. May carry subtle {colors.surface-glass-subtle} background.

{component.label-inline} — Generic inline label/tag text. Text {colors.body} at {typography.caption}. Used for small metadata annotations.

Footer

{component.footer-band} — Page footer (implied, below fold). Background {colors.canvas}, text {colors.muted} at {typography.body-sm}. Would contain legal links, social icons, copyright.

Do's and Don'ts

Do

• Do reserve {colors.primary} (#f79ce0) for intentional brand moments — status accents, celebratory states, and rare marketing flourishes; default CTAs should use {colors.on-dark} (white) on dark backgrounds for maximum clarity.
• Do apply {rounded.pill} (9999px) to every interactive element: buttons, nav items, badges, status pills, search inputs. This is the signature shape vocabulary of the system.
• Do use {typography.mono} (Berkeley Mono, 13px) for all machine-readable strings: issue IDs (DRV-8852), code references (vehicle_state), keyboard shortcuts, and cycle numbers.
• Do leverage the inner-shadow depth model ({extensions.shadows.inner-highlight}, {extensions.shadows.inner-glow}) for elevated cards rather than traditional drop shadows — they read correctly on {colors.canvas}.
• Do maintain the 510 font-weight for all headline and title roles ({typography.display-lg}, {typography.title-md}, {typography.title-sm}); do not round up to 600 or down to 500.
• Do apply negative letter-spacing proportionally: -1.408px at 64px, -1.056px at 48px, -0.24px at 20px. Smaller sizes can use 0 or slight negative values.
• Do use {colors.surface-elevated} (#121314) for content cards that sit on {colors.canvas}, and {colors.surface-soft} (#08090a) for nested/app-shell backgrounds — this two-tone surface system creates clear layering.
• Do keep body text at {typography.body-md} (15px) rather than bumping to 16px; the smaller size is intentional for information-dense interfaces.
• Do separate the two dialects: marketing surfaces breathe with {spacing.hero} (120px) padding and large display type; app chrome compresses to {spacing.md} (8px) gaps and {typography.body-sm} (14px) labels.
• Do use {colors.muted-soft} (#d0d6e0) for secondary actionable text (property labels, "Loops →" links) — it's visible enough to read but recedes behind {colors.ink} and {colors.body}.

Don't

• Don't use gradients, rainbow treatments, or colorful background washes. Linear's aesthetic is flat color-block composition — depth comes from luminance steps between surface tokens, not chromatic variation.
• Don't apply {rounded.xl} (12px) or larger to buttons or badges — those shapes are exclusive to containers ({component.app-shell}, {component.issue-card}). Interactive elements stay at {rounded.pill}.
• Don't substitute {colors.link} (which maps to {colors.ink}) for {colors.primary}. Links in this system are nearly invisible — they match body/headline color and rely on underline-or-context to signal clickability.
• Don't use uppercase for navigation items, buttons, or labels. The entire interface is sentence-case; uppercase would violate the understated, technical voice.
• Don't add box-shadow drop shadows to cards on the marketing surface. Use {extensions.shadows.inner-highlight} (inset white glow) instead — it simulates correct lighting on dark canvases.
• Don't let {typography.display-lg} (64px) headlines exceed two lines. The tight 1.0 line-height means multi-line headlines stack densely; if content is longer, consider {typography.title-md} (48px) instead.
• Don't use {colors.ink} (#f7f8f8) for body copy or descriptive text. Reserve it for headlines, titles, and primary interactive labels. Body text must be {colors.body} (#8a8f98) to establish hierarchy.
• Don't invent new surface colors between {colors.surface-soft} (#08090a) and {colors.canvas} (#0f1011). The system's surface palette is intentionally narrow — add depth via shadows and borders, not new hex values.
• Don't apply {typography.mono} to user-facing prose, timestamps, or labels that aren't code/identifiers. Berkeley Mono is strictly for machine-readable content.
• Don't expand the spacing scale beyond the defined tokens. If a gap feels "between" two values (e.g., needing 18px when you have 16px and 24px), pick the closer token rather than interpolating — consistency beats precision.

Motion & Animation

Transition Tokens

/* Fast transitions — border, background, color changes */
--transition-fast: border-color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                   background 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

--transition-color: color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                     background-color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

/* Base transition — comprehensive property coverage */
--transition-base: border 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                   background-color 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                   color 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                   box-shadow 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                   opacity 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                   filter 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                   transform 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);

/* Single-property transitions */
--transition-filter: filter 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-background: background 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-fill: fill 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-color-simple: color 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);

All transitions share the same easing curve: cubic-bezier(0.25, 0.46, 0.45, 0.94) — a gentle ease-out that starts moderately fast and decelerates smoothly, avoiding mechanical linearity. Duration is aggressively short: 100ms for micro-interactions (border flicks, background tints), 160ms for compound state changes (button press, panel reveal). This brevity reinforces the system's precision-tool persona — nothing lingers.

Keyframe Animations

• _6QN9Vq_tooltipOpen — Tooltip entrance: fade + subtle scale from 95% to 100%.
• _6QN9Vq_tooltipClose — Tooltip exit: reverse of open — fade + scale down.
• WinFxq_contextMenuIn — Context menu (right-click) slide-in from click origin point.
• WinFxq_contextMenuOut — Context menu dismissal animation.
• TZTsQG_mobileMenuIn — Mobile navigation drawer entrance (slide from left/right).
• TZTsQG_mobileMenuOut — Mobile navigation drawer exit.
• TZTsQG_slideFromRight — Generic panel slide-in from right edge (used for sidebars, sheets).
• TZTsQG_slideFromLeft — Mirror: panel slide from left edge.
• TZTsQG_slideToRight / TZTsQG_slideToLeft — Exit counterparts for above.
• TZTsQG_scaleIn — Scale-up entrance (modal, dialog, popup appearance).
• TZTsQG_scaleOut — Scale-down exit.
• TZTsQG_fadeIn / TZTsQG_fadeOut — Simple opacity crossfade pair.
• vaulFadeIn / vaulFadeOut — Vaul drawer library-specific fades.
• vaulSlideFromBottom / vaulSlideToBottom — Bottom-sheet slide animations.
• Sz_9La_load — Loading/skeleton shimmer or pulse effect.
• wOrUyW_scaleIn — Alternative scale entrance (possibly staggered or springy).

Interaction Patterns

• Hover lift on glass cards: Cards with {colors.surface-glass} background gain {extensions.shadows.inner-glow} (inset 0.5px white at 8%) on hover, creating a subtle "illumination" effect suggesting the card rises toward a light source.
• Focus rings on inputs: Text inputs and buttons receive a {colors.border-focus} (20% white) outline on keyboard focus, replacing or augmenting the default browser ring.
• Tooltip timing: Tooltips appear after a brief delay (~300-400ms inferred from naming convention) with _6QN9Vq_tooltipOpen scale+fade, dismiss immediately on pointer leave.
• Dropdown/context menus: Triggered by click (not hover) based on contextMenuIn/contextMenuOut naming; animate from origin point with directional slide.
• Mobile menu: Slide-in drawer pattern (TZTsQG_mobileMenuIn/Out) for responsive navigation; direction depends on implementation (left or right sheet).
• Button press state: Immediate {colors.border-inset} shadow (inset black at 20%) on active/:active, creating a "depressed into surface" tactile feedback.
• Loading skeleton: Sz_9La_load likely implements a subtle pulse or shimmer for placeholder content during async data fetch.

Imagery Style

• No photography detected on the extracted landing page hero. The primary visual element is the rendered UI mockup — a precise, pixel-perfect recreation of the Linear application interface presented as a "window within the page."
• UI mockup treatment: The app preview card ({component.app-shell}) uses {rounded.xl} (12px) corners, {colors.surface-soft} background, and contains fully-rendered interface elements (sidebar, issue detail, properties panel) that mirror the actual product. This is not a screenshot — it's constructed HTML/CSS/SVG allowing perfect crispness at any resolution.
• Icon style within preview: Thin-stroke, geometric icons at 16-20px size, rendered in {colors.body} or {colors.muted}. Icons include: lightning bolt (Pulse), inbox tray, target/circle (My Issues, Reviews), star, search magnifying glass, edit/pencil, link chain, git branch, layout columns, ellipsis menu, chevron arrows.
• Avatar treatment: User avatars render as 20px circles ({rounded.circle}) with initials or thumbnail images; assignee avatars appear in {component.properties-panel}.
• Color in imagery: The only color within the app preview beyond the grayscale surface/ink palette is the amber star ({colors.accent-amber}) on the favorited issue — a deliberate focal point drawing eye to that element.
• If imagery exists elsewhere (blog post headers, team avatars, integration logos), expect {rounded.xl} image containers, no heavy filters, and alignment with the dark-mode canvas (images would be either dark-toned themselves or placed on {colors.surface-elevated} cards).

Icon System

• Library: Custom SVG icon set (no external library detected — Lucide, Heroicons, Material, and Bootstrap Icons all returned empty from framework detection). Icons appear hand-designed or sourced from a private set matching Linear's specific geometric, thin-stroke aesthetic.
• Specific icons observed:
  • Linear logo mark (spiral/concentric-circle glyph)
  • Lightning bolt (⚡ — Pulse)
  • Inbox/tray (📥 — Inbox)
  • Target/bullseye (⊙ — My Issues)
  • Quotation/review symbol (⟡ — Reviews)
  • Search magnifying glass (🔍)
  • Compose/edit pencil (✎)
  • Star/favorite (★)
  • Link chain (🔗)
  • Git branch (⎇)
  • Columns/layout (⊞)
  • Ellipsis overflow (⋯)
  • Chevron down/right (▾, →)
  • Up/down arrows (pagination controls)
  • Warning/info circle (● — status indicators)
  • Bar chart (priority indicator)
  • Clock/cycle icon (cycle badge)
  • User/person silhouette (assignee, activity actor)
• Treatment: Exclusively stroke-based (no filled icons except the warning/status dots and star). Stroke width appears consistent at 1.5px equivalent. Color is typically currentColor inheriting from parent text color ({colors.body}, {colors.muted}, or {colors.ink} depending on context). Alignment is optically centered with adjacent text; icons sit on the same baseline or are vertically centered within their 24-32px hit area.
• Size spectrum: 16px (inline/status), 20px (sidebar items, property values), 24px (toolbar actions, standalone buttons).

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Astro — Linear's site exhibits SSR characteristics,
                  route-manifest scripts suggest a meta-framework with file-based routing.
                  The vinext.navigationRuntime hints at a custom/proprietary router layer.
- Styling:        CSS Modules or vanilla CSS with CSS custom properties (design tokens as 
                  :root variables). No Tailwind detected (tailwindLikely: false). 
                  Component-scoped classes follow hashed naming (TZTsQG_*, S36ykG_*).
- Fonts:          Self-hosted Inter Variable (variable font woff2) + Berkeley Mono (proprietary,
                  self-hosted). Fallback to Google Fonts 'Inter' for development; JetBrains Mono
                  as Berkeley substitute.
- Animation:      CSS transitions + @keyframes (no GSAP/Framer Motion detected). Motion is
                  handled entirely in stylesheets with cubic-bezier easing. JS likely toggles
                  classes only (.is-open, .is-active).
- Icons:          Custom SVG components (inline React/Vue components or <svg> sprites).
                  No icon font or external library.
- Component lib:  Custom component library (all class names are unique hashes — TZTsQG, S36ykG,
                  hCgVwa, Mmx1Wq, LSqk9q, _5l06ia, MwJdiW, I_mUeq). This indicates an
                  in-house design-system-to-CSS pipeline (likely Figma-to-code or similar).

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Hero collapses to single column; app preview hides or simplifies; nav becomes hamburger menu (TZTsQG_mobileMenuTrigger detected); hero headline scales down from 64px → ~40-48px. | | Tablet | 768px – 1024px | Two-column hero possible; app preview may show simplified view; sidebar in preview collapses to icons-only. | | Desktop | 1024px – 1440px | Full layout as shown in screenshot: hero headline at 64px, three-column app preview (sidebar + content + properties). | | Wide | > 1440px | Content maxes at 1440px and centers; additional horizontal padding grows. |

Touch Targets

• {component.button-primary}: ~36-40px height (padding 0 12px + inherent line-height) — meets WCAG AAA 44×44px minimum when accounting for total rendered box size including padding.
• {component.nav-item}: ~32-36px hit area (pill shape, 12px h-padding) — may fall slightly short of 44px on mobile; recommend increasing vertical padding to 8px on touch devices.
• {component.sidebar-item}: 6px 8px padding + icon height (~20px) = ~32px total — below 44px recommendation. Should expand to 10px 12px on touch or add invisible padding via ::before pseudo-element.
• {component.action-bar-icon-btn}: 28px × 28px — well below 44px. Must be surrounded by expanded tap region (invisible margin or wrapper padding) for mobile usability.
• {component.button-icon-only}: 32px × 32px — below 44px. Same mitigation needed.

Collapsing Strategy

• Navigation: The TZTsQG_mobileMenuTrigger button (detected in extracted buttons) confirms a hamburger/menu-icon pattern on mobile. The full horizontal nav collapses into a slide-in drawer (TZTsQG_mobileMenuIn/TZTsQG_mobileMenuOut keyframes) triggered by this button. Drawer slides from left or right edge.
• Hero headline: {typography.display-lg} (64px) scales down responsively — likely to 40px or 48px on tablet, 32px on mobile. Letter-spacing should scale proportionally (maintain ~-2.2% of font-size ratio).
• App preview card: The three-column layout (sidebar + issue detail + properties) collapses. Likely behaviors: (a) properties rail moves below issue content or becomes a collapsible section; (b) sidebar becomes a bottom-sheet or icon-only dock; (c) entire app preview may hide on smallest screens with a "Open app" CTA instead.
• Sign up / Log in buttons: Remain visible in mobile nav (either in drawer or fixed bottom bar). {component.button-primary-invert} ("Open app") may promote to primary position on mobile.
• Vertical stacking: Hero text (headline + subtitle + badges) stacks vertically with reduced {spacing.hero} padding (perhaps 60-80px top on mobile vs 120px desktop).

Image Behavior

• App preview mockup: On desktop, spans full content width (within 1440px constraint). On tablet, may constrain to 80-90% width. On mobile, likely hidden entirely or replaced with a static screenshot/illustration at reduced complexity.
• Avatars: Maintain {rounded.circle} at all sizes; scale from 20px (desktop) → 32px (mobile) for easier tapping if they become interactive.
• No hero illustration imagery detected to resize — the sole visual is the UI mockup described above.

Iteration Guide

1. Start with the design token foundation: Define all :root CSS custom properties from the YAML frontmatter — every {colors.*}, {typography.*}, {rounded.*}, {spacing.*}, and {extensions.shadows.*} token becomes a CSS variable. Never hard-code a hex, px value, or font-family string that has a corresponding token.
2. Implement the two dialects explicitly: Create separate component namespaces or CSS-class prefixes for marketing- (hero, landing page) and app-chrome- (dashboard preview, sidebar, issue card) components. They share tokens but differ radically in density, padding, and type scale usage.
3. Build the navigation first: {component.top-nav} with {component.nav-item} pills, {component.nav-logo}, and {component.workspace-switcher} establishes the shape vocabulary ({rounded.pill} everywhere) and sets the 56px height convention. Implement the mobile hamburger trigger (TZTsQG_mobileMenuTrigger) early since it dictates responsive behavior.
4. Construct the hero band second: {component.hero-band} with its {spacing.hero} (120px) top padding creates the editorial breathing room that defines the marketing surface. Get {typography.display-lg} rendering correctly at 64px/510/-1.408px before adding anything else — this headline is the visual anchor of the entire page.
5. Layer the app preview as a "card within a page": Treat {component.app-shell} as a self-contained mini-application. Build {component.sidebar} → {component.issue-card} → {component.properties-panel} as children with their own internal spacing independent of the page grid. This encapsulation mirrors how Linear's own component library works.
6. Apply the inner-shadow depth model: Every elevated container ({component.app-shell}, {component.issue-card}) receives {extensions.shadows.inner-highlight} — don't reach for box-shadow with positive spread values. Test that these inset glows look correct on {colors.canvas} by verifying they appear as 5% white lines along the top-inner edge.
7. Wire up the transition system: Apply var(--transition-base) (160ms, cubic-bezier(0.25, 0.46, 0.45, 0.94)) to all interactive elements' transition property. Add var(--transition-fast) (100ms) for micro-interactions like border-color changes on hover. Avoid transition: all — specify properties.
8. Reserve magenta sparingly: When implementing {colors.primary} (#f79ce0), count its occurrences. In the extracted interface, it appears primarily as a brand signature, not a functional UI color. Most CTAs should remain {colors.on-dark} (white) on {colors.canvas} (black).
9. Test typography at scale: Verify that {typography.display-lg} (64px) wraps acceptably at your max content width (1440px). If the client's headlines run longer than "The product development system for teams and agents," implement a responsive clamp or switch to {typography.title-md} (48px) for longer strings.
10. Validate accessibility contrast ratios: Run a contrast checker on every foreground/background pair in the token set. Critical checks: {colors.body} (#8a8f98) on {colors.canvas} (#0f1011) should exceed 4.5:1 for body text; {colors.muted} (#62666d) on {colors.canvas} should exceed 3:1 for large text. If any pair fails, adjust the lighter token (never darken the canvas — #0f1011 is canonical).

Font Setup

:root {
  /* San-serif family — Inter Variable with full system fallback */
  --font-sans: 'Inter Variable', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
               'Helvetica Neue', sans-serif;
  
  /* Monospace family — Berkeley Mono with open-source fallback */
  --font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Development fallback: swap 'Berkeley Mono' for 'JetBrains Mono' from Google Fonts */
}

/* Import from Google Fonts (for development without licensed Berkeley Mono) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;510;590&family=JetBrains+Mono:wght@400&display=swap');

Known Gaps

• Hover state styling: Per the no-hover policy, all hover appearances (background color shifts on {component.nav-item}, glow intensification on glass cards, color brightening on {component.button-ghost}) are undocumented and must be implemented from inference using the active/disabled states as guidance.
• Loading/skeleton states: The Sz_9La_load keyframe name suggests loading animation exists, but its exact visual treatment (shimmer direction, pulse timing, skeleton shape) was not extractable from the static screenshot.
• Form validation states: Beyond {component.text-input-focus} (inferred), error states ({colors.error-bg}, {colors.error-text}) and success states for form inputs are defined as tokens but their exact border/shadow/icon treatments are unobserved.
• Authenticated/user-specific surfaces: Dashboard views beyond the public preview (settings pages, onboarding flows, billing, team management) are not represented. These may introduce new component patterns (tables, settings panels, permission toggles) outside the current scope.
• Sub-brand palettes: Linear offers variations (Linear for startups, enterprise features) that may carry distinct accent colors or surface treatments on separate subdomains or gated pages — not captured here.
• Pixel-exact surface colors: Some surface tokens ({colors.surface-elevated} at #121314, {colors.surface-strong} at #18191b) were inferred from the extracted CSS background frequency data and may vary ±1-2 hex values in the actual production stylesheet due to anti-aliasing or theme variable indirection.
• Misleading CSS variable names: The hashed class names (TZTsQG_*, S36ykG_*, hCgVwa_*) are build-artifact identifiers and carry no semantic meaning — they should not be interpreted as component names or token references. The actual design token variable names (if they exist in source) were not exposed in the extracted DOM.
• Keyboard navigation focus indicators: While {colors.border-focus} is defined, the exact focus-ring treatment (outline offset, border-radius match, transition timing) for each interactive component type was not observable in a static screenshot and requires implementation-time decisions.
• Dark/light mode toggle mechanics: The site is dark-mode native ({extensions.mode}: "dark"), but the presence of theme-switching logic in embedded scripts (["light", "dark"] array detected) suggests a mode toggle may exist. Light-mode token values (inverted canvas/ink, adjusted surface tones) are completely undetermined from this extraction.