<!-- Generated: 2026-04-05 | Source: https://linear.app | Pages: 3 | Framework: tailwind --> <!-- This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. -->

Design System: Linear

1. Visual Theme & Atmosphere

Linear's website is a masterclass in dark-mode-first product design -- a near-black canvas (#08090a) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (rgba(255,255,255,0.05)) to soft, luminous text (#f7f8f8). This is not a dark theme applied to a light design -- it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.

The typography system is built entirely on Inter Variable with OpenType features "cv01" and "ss03" enabled globally, giving the typeface a geometric, single-story 'a' and adjusted letterforms that transform Inter into something distinctly Linear. The system uses three weights with strict roles: 400 for reading, 510 for emphasis and navigation, 590 for strong headings. The 510 weight is the signature -- it sits between regular and medium, creating a subtle emphasis that avoids the heaviness of traditional medium or semibold. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), producing compressed, authoritative headlines that feel engineered rather than designed.

The color system is almost entirely achromatic -- near-black backgrounds with white-gray text -- punctuated by a single brand accent: Linear's indigo-violet (#5e6ad2). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (rgba(255,255,255,0.05) to rgba(255,255,255,0.08)) that create structure without visual noise.

Key Characteristics:

• Dark-mode-native: #08090a marketing background, #0f1011 panel background, #202122 elevated surfaces
• Inter Variable with "cv01", "ss03" globally -- geometric alternates that transform Inter into Linear's proprietary typeface
• Signature weight 510 (between regular and medium) for emphasis and UI -- the workhorse weight
• Aggressive negative letter-spacing at display sizes: -1.584px at 72px, -1.408px at 64px, -1.056px at 48px
• Brand indigo-violet #5e6ad2 -- the only chromatic color in the entire system
• Semi-transparent white borders throughout: rgba(255,255,255,0.05) to rgba(255,255,255,0.08)
• Button backgrounds at near-zero opacity: rgba(255,255,255,0.05) with rgba(0,0,0,0.03) 0px 1.2px 0px micro-shadow
• Multi-layered shadow stacks with inset variants for depth on dark surfaces
• Radix UI primitives as the component foundation
• Berkeley Mono as the monospace companion for code and technical labels

2. Color Palette & Roles

Background Surfaces

• Marketing Black (#08090a): The deepest background -- the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.
• Panel Dark (#0f1011): Sidebar and panel backgrounds. One step up from the marketing black, used exclusively for bgColor (18 occurrences).
• Surface Dark (#161718): Recessed panel backgrounds. A subtle lift from panel dark for nested containers.
• Elevated Surface (#202122): Card backgrounds, dropdowns, and elevated regions. The lightest structural dark with gradient and border usage across all pages.
• Secondary Surface (#28282c): Hover states and slightly elevated components. Appears on all three crawled pages as a background color.
• Border Dark (#323334): Solid dark border color and icon tint. Used where semi-transparent borders would be too subtle.
• Mid Surface (#383b3f): The lightest dark structural color -- used for borders (36 occurrences) and occasional icon fills.

Text & Content

• Primary Text (#f7f8f8): Near-white with a barely-warm cast. The dominant text color across 8,265 text instances -- not pure white, preventing eye strain on dark backgrounds. Also mapped to --normal-bg.
• Light Text (#e2e4e7): Slightly subdued white for secondary headings and emphasized body text. 488 text occurrences.
• Silver Body (#d0d6e0): Cool silver-gray for descriptions and secondary content. 784 text instances with a blue undertone that keeps it cool against the warm primary text.
• Mid Gray (#9c9da1): Neutral mid-tone for icons and subtle background fills. Appears across all pages.
• Tertiary Text (#8a8f98): Muted cool-gray for placeholders, metadata, and de-emphasized content. 726 text occurrences.
• Quaternary Text (#62666d): The most subdued text -- timestamps, disabled states, subtle labels. 1,435 text instances, also heavily used as a border color (2,612).

Brand & Accent

• Brand Indigo (#5e6ad2): Primary brand color -- CTA button backgrounds, brand marks, and interactive surfaces. The only saturated hue in the system. Used as background (6), shadow (2), and icon (2).
• Indigo Periwinkle (#6d78d5): Slightly lighter indigo variant for text accents (4 occurrences) and secondary brand elements.
• Indigo Bright (#6366f1): Higher-saturation indigo variant used exclusively for backgrounds (10 occurrences). Tailwind's indigo-500.
• Violet (#8b5cf6): Purple variant for accent backgrounds. Used exclusively as background color (6 occurrences).
• Periwinkle Light (#8fa4ff): Desaturated blue-violet for text highlights and border accents. 108 total frequency.

Workflow Colors

• Soft Green (#89d196): Muted sage green for completion and progress states. Used as text (32) and border (64).
• Active Green (#27a644): Saturated green for active/in-progress status indicators.
• Forest Green (#008d2c): Deep green for confirmed success states.
• Emerald (#10b981): Secondary success -- pill badges, completion dots. Tailwind's emerald-500.
• Sky Blue (#55cdff): Bright cyan-blue for informational highlights. 88 text occurrences.
• Warm Amber (#ffc47c): Soft gold for warning states and attention indicators.
• Hot Pink (#f79ce0): Bright pink for labels and category differentiation. 164 text occurrences.
• Alert Red (#d6303d): Error and destructive action indicator.
• Coral Red (#eb5757): Secondary error -- used for both text (4) and background (6).

Overlay

• Shadow Base (rgba(0,0,0,0.2)): Primary shadow opacity for elevated elements and ring shadows.
• Deep Shadow (rgba(0,0,0,0.4)): Modal backdrops and floating element shadows.
• Brand Shadow (rgba(8,9,10,0.6)): Branded dark shadow using the marketing black hue at 60% opacity.

3. Typography Rules

Font Family

• Primary: Inter Variable, with fallbacks: SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue
• Monospace: Berkeley Mono, with fallbacks: ui-monospace, SF Mono, Menlo
• OpenType Features: "cv01", "ss03" enabled globally -- cv01 provides a single-story 'a', ss03 adjusts letterforms for a geometric appearance.

Hierarchy

Principles

• 510 is the signature weight: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold -- it appears in 12 of 25 typography levels.
• Compression at scale: Display sizes use progressively tighter letter-spacing: -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.
• OpenType as identity: "cv01", "ss03" are not decorative -- they transform Inter into Linear's distinctive typeface, giving it a geometric, purposeful character across every text element.
• Three-tier weight system: 400 (reading), 510 (emphasis/UI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts like chat message previews.

4. Component Stylings

Buttons

Ghost Button (Default)

• Background: rgba(0,0,0,0)
• Text: #ffffff
• Padding: 0px 4px
• Radius: 4px
• Transition: background 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94)
• Use: Toolbar actions, icon-only controls, contextual buttons

Secondary Button

• Background: rgba(255,255,255,0.05)
• Text: #62666d (quaternary)
• Radius: 2px
• Border: 1px solid rgba(255,255,255,0.05)
• Shadow: rgba(0,0,0,0.03) 0px 1.2px 0px 0px
• Use: Toolbar buttons, quick-access controls

Primary Link Button

• Background: rgba(255,255,255,0.05)
• Text: #f7f8f8
• Font: 13px weight 510
• Radius: 4px
• Shadow: rgba(255,255,255,0.03) 0px 0px 0px 1px inset, rgba(255,255,255,0.04) 0px 1px 0px 0px inset, rgba(0,0,0,0.6) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 4px 4px 0px
• Transition: background 0.1s
• Use: Primary CTAs ("Get started", "Contact sales")

Icon Button (Circle)

• Background: rgba(255,255,255,0.05)
• Text: #ffffff
• Radius: 50%
• Use: Close, menu toggle, icon-only actions

Cards & Containers

• Background: rgba(255,255,255,0.05) (never solid -- always translucent)
• Border: 1px solid rgba(255,255,255,0.08) (standard) or inset shadow rgb(35,37,42) 0px 0px 0px 1px inset
• Radius: 8px (standard), 12px (featured), 22px (large panels)
• Shadow: rgba(0,0,0,0.2) 0px 0px 0px 1px ring shadow or rgba(0,0,0,0.4) 0px 2px 4px 0px elevation
• Hover: subtle background opacity increase

Inputs & Forms

Text Area

• Background: rgba(255,255,255,0.05)
• Text: #f7f8f8
• Border: rgba(0,0,0,0.2) 0px 0px 0px 1px ring shadow
• Padding: 12px 14px
• Radius: 6px
• Font: 14px Berkeley Mono weight 400

Badges & Pills

Status Pill

• Background: transparent
• Text: #62666d or workflow color
• Radius: 9999px
• Font: 10px Inter Variable weight 510
• Use: Tags, filter chips, status labels

Subtle Badge

• Background: rgba(255,255,255,0.05)
• Text: #f7f8f8
• Radius: 2px
• Border: 1px solid rgba(255,255,255,0.05)
• Shadow: rgba(0,0,0,0.03) 0px 1.2px 0px 0px
• Font: 12px weight 510
• Use: Inline labels, category tags

Navigation

• Dark sticky header on #08090a background
• Bottom shadow: rgba(0,0,0,0.4) 0px 1px 0px 0px
• Links: Inter Variable 13px weight 400, #f7f8f8 text, -0.13px letter-spacing
• CTA: 13px weight 510 with multi-layer inset shadow stack
• Top-rounded panels: 12px 12px 0px 0px radius

Image Treatment

• Product screenshots on dark backgrounds with inset shadow: rgba(0,0,0,0.2) 0px 0px 12px 0px inset
• Top-rounded images: 12px 12px 0px 0px radius
• Shadow beneath screenshots: rgba(0,0,0,0.4) 0px 2px 4px 0px

5. Layout Principles

Spacing System

• Base unit: 4px (detected from frequency analysis)
• Primary scale: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 56px, 60px, 64px, 80px, 96px, 128px
• Highest frequency values: 32px (825 occurrences), 8px (617), 14px (412), 12px (215), 24px (175)
• The 8px and 32px values dominate -- the system uses an 8px grid with 32px as the primary structural spacing unit

Grid & Container

• Max content width: 100% with internal constraints
• Hero: centered single-column with generous vertical padding
• Feature sections: 2-3 column grids for feature cards
• Full-width dark sections with internal max-width constraints

Whitespace Philosophy

• Darkness as space: On Linear's dark canvas, empty space is not white -- it is absence. The near-black background (#08090a) IS the whitespace, and content emerges from it through luminance steps.
• Compressed headlines, expanded surroundings: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. Section spacing reaches 128px+ at the largest breakpoints.
• Section isolation: Each feature section is separated by generous vertical padding (80px-128px) with no visible dividers -- the dark background provides natural separation.

Border Radius Scale

• Micro (2px): Inline badges, toolbar buttons, subtle tags
• Standard (4px): Navigation links, code snippets, small containers
• Comfortable (5-6px): Buttons, inputs, functional elements
• Card (8px): Cards, dropdowns, popovers
• Panel (12px): Panels, featured cards, section containers
• Large (22px): Large panel elements
• Full Pill (9999px): Chips, filter pills, status tags
• Circle (50%): Icon buttons, avatars, status dots

6. Depth & Elevation

Shadow Philosophy: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this through two complementary strategies: semi-transparent white borders as the primary depth indicator, and background luminance stepping where each elevation level slightly increases the white opacity of the surface (rgba(255,255,255,0.05)). The inset shadow technique (rgba(0,0,0,0.2) 0px 0px 12px 0px inset) creates a unique "sunken" effect for embedded content areas. The primary CTA buttons use a four-layer shadow stack combining inset white highlights (rgba(255,255,255,0.03) and rgba(255,255,255,0.04)) with outer dark rings (rgba(0,0,0,0.6)) to create a three-dimensional bevel on flat dark surfaces.

7. Do's and Don'ts

Do

• Use Inter Variable with font-feature-settings: "cv01", "ss03" on ALL text -- these features are fundamental to Linear's typeface identity and appear on every detected typography level
• Use weight 510 as your default emphasis weight -- it is Linear's signature between-weight, appearing in navigation, labels, badges, and headings
• Apply aggressive negative letter-spacing at display sizes: -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px
• Build on near-black backgrounds: #08090a for marketing, #0f1011 for panels, #202122 for elevated surfaces
• Use semi-transparent white borders (rgba(255,255,255,0.05) to rgba(255,255,255,0.08)) instead of solid dark borders -- they create structure that breathes
• Keep button backgrounds nearly transparent: rgba(255,255,255,0.05) with rgba(0,0,0,0.03) 0px 1.2px 0px micro-shadow
• Reserve brand indigo (#5e6ad2) for primary CTAs and brand marks only -- it is the sole chromatic color in the system
• Use #f7f8f8 for primary text -- not pure #ffffff, which would be too harsh on the near-black canvas
• Apply the luminance stacking model for elevation: deeper = darker bg, elevated = slightly lighter bg via white opacity
• Use Berkeley Mono for any code or technical content -- it appears in code blocks, issue IDs, and terminal output

Don't

• Don't use pure white (#ffffff) as primary text -- #f7f8f8 prevents eye strain and has 25,002 frequency vs occasional #ffffff usage
• Don't use solid colored backgrounds for buttons -- transparency is the system (rgba(255,255,255,0.05)), never a flat hex
• Don't apply the brand indigo (#5e6ad2) decoratively -- it is reserved for interactive/CTA elements only, with just 10 total frequency
• Don't use positive letter-spacing on display text -- Inter at sizes above 24px always runs negative (-0.288px to -1.584px)
• Don't use visible opaque borders on dark backgrounds -- borders should be semi-transparent white or shadow-based ring borders (rgba(0,0,0,0.2) 0px 0px 0px 1px)
• Don't skip the OpenType features "cv01", "ss03" -- without them, it is generic Inter, not Linear's Inter
• Don't use weight 700 (bold) -- Linear's maximum weight is 590, with 510 as the workhorse
• Don't introduce warm colors into the UI chrome -- the palette is cool gray (#62666d, #8a8f98, #d0d6e0) with blue-violet accent only
• Don't use drop shadows for primary elevation on dark surfaces -- use background luminance stepping and inset shadows instead
• Don't use positive radius values above 22px except for full-pill (9999px) and circle (50%) patterns

8. Responsive Behavior

Breakpoints

Touch Targets

• Ghost buttons use minimum 4px horizontal padding with 4px radius
• Secondary buttons have rgba(0,0,0,0.03) 0px 1.2px 0px shadow for tactile affordance
• Navigation links at 13px with adequate spacing for mobile tap targets
• Pill elements use 9999px radius for easy thumb targeting
• Icon buttons at 50% radius ensure circular, easy-to-tap targets

Collapsing Strategy

• Hero: 72px display -> 48px -> 32px text, letter-spacing adjusts proportionally (-1.584px -> -1.056px -> -0.704px)
• Navigation: horizontal links + CTA -> hamburger menu at 768px
• Feature cards: 3-column -> 2-column -> single column stacked
• Product screenshots: maintain aspect ratio and inset shadow treatment
• Section spacing: 128px+ -> 80px -> 48px on mobile
• Footer: multi-column -> stacked single column

Image Behavior

• Product screenshots maintain rgba(0,0,0,0.2) 0px 0px 12px 0px inset shadow at all sizes
• Top-rounded images use 12px 12px 0px 0px radius consistently
• Dark background ensures screenshots blend naturally at any viewport
• Floating UI element complexity may reduce on mobile for performance

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Brand Indigo (#5e6ad2)
• Page Background: Marketing Black (#08090a)
• Panel Background: Panel Dark (#0f1011)
• Elevated Surface: (#202122)
• Heading text: Primary White (#f7f8f8)
• Body text: Silver Body (#d0d6e0)
• Muted text: Tertiary Gray (#8a8f98)
• Subtle text: Quaternary Gray (#62666d)
• Light heading: Light Text (#e2e4e7)
• Workflow green: Soft Green (#89d196)
• Workflow blue: Sky Blue (#55cdff)
• Workflow pink: Hot Pink (#f79ce0)

Example Component Prompts

• "Create a hero section on #08090a background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color #f7f8f8, font-feature-settings 'cv01', 'ss03'. Subtitle at 15px weight 400, line-height 1.60, letter-spacing -0.165px, color #8a8f98. Primary CTA button: rgba(255,255,255,0.05) background, #f7f8f8 text, 13px weight 510, 4px radius, shadow rgba(255,255,255,0.03) 0px 0px 0px 1px inset, rgba(255,255,255,0.04) 0px 1px 0px 0px inset, rgba(0,0,0,0.6) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 4px 4px 0px."
• "Design a feature card on dark background: rgba(255,255,255,0.05) background, inset shadow rgb(35,37,42) 0px 0px 0px 1px inset, 12px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color #f7f8f8, font-feature-settings 'cv01', 'ss03'. Body at 15px weight 400, color #8a8f98, letter-spacing -0.165px, line-height 1.60."
• "Build a status pill: transparent background, #62666d text, 9999px radius, 10px Inter Variable weight 510, font-feature-settings 'cv01', 'ss03'. For active status, use #89d196 text with the same structure."
• "Create navigation: dark sticky header on #08090a. Inter Variable 13px weight 400 for links, #f7f8f8 text, letter-spacing -0.13px, font-feature-settings 'cv01', 'ss03'. CTA link: 13px weight 510, rgba(255,255,255,0.05) background, 4px radius, four-layer shadow stack. Bottom border: rgba(0,0,0,0.4) 0px 1px 0px 0px shadow."
• "Design a command palette / panel: #202122 background, inset shadow rgb(35,37,42) 0px 0px 0px 1px inset, 12px radius, outer shadow rgba(0,0,0,0.4) 0px 2px 4px 0px. Input at 14px Berkeley Mono weight 400, #f7f8f8 text. Results list with 13px Inter Variable weight 510 labels in #d0d6e0 and 12px metadata in #62666d, font-feature-settings 'cv01', 'ss03'."
• "Build a toolbar button: rgba(255,255,255,0.05) background, #62666d text, 2px radius, 1px solid rgba(255,255,255,0.05) border, shadow rgba(0,0,0,0.03) 0px 1.2px 0px 0px, 12px Inter Variable weight 510, font-feature-settings 'cv01', 'ss03'."

Iteration Guide

1. Always set font-feature-settings: "cv01", "ss03" on all Inter Variable text -- this is non-negotiable for Linear's look
2. Letter-spacing scales with font size: -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px, -0.288px at 24px, -0.165px at 15px, normal below 14px
3. Three weights, strict roles: 400 (read), 510 (emphasize/navigate), 590 (announce). Never use 700.
4. Surface elevation via background opacity: rgba(255,255,255,0.05) on dark backgrounds -- never solid background colors
5. Brand indigo (#5e6ad2) is the only chromatic color -- everything else is grayscale with cool blue undertone
6. Borders use two techniques: semi-transparent white (rgba(255,255,255,0.05)) or inset ring shadows (rgb(35,37,42) 0px 0px 0px 1px inset) -- never solid border-color on dark surfaces
7. Berkeley Mono for any code or technical content, Inter Variable for everything else
8. Button transitions use background 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94) for ghost variants and background 0.1s for primary CTAs