Linear

Overview

Linear is a purpose-built product development system designed for modern engineering teams and AI-powered workflows. The brand embodies 'Minimalist Precision'—a design philosophy that strips away visual noise to expose functional clarity. The aesthetic is deliberately austere: a near-black canvas (rgb(8, 9, 10)) paired with high-contrast light text (rgb(247, 248, 248)) and surgical accent colors (cyan #55cdff, magenta #f79ce0, neutral white #e5e5e6). This creates an environment where information hierarchy is absolute and every pixel serves a purpose. The UI evokes the precision of a code editor merged with the collaborative warmth of a modern SaaS platform.

Linear's voice is direct, technical, and unadorned. The brand speaks to product builders—engineers, designers, and AI agents—who value speed and clarity over decoration. Vocabulary is concrete: 'sync', 'render', 'state', 'workflow', 'issue', 'cycle'. The tone is confident but never arrogant; helpful but never patronizing. Example sentence in Linear's voice: 'Render UI before vehicle_state syncs when minimum required state is present, instead of blocking on full refresh during iOS startup.'

Colors

Linear's color system is rooted in dark-mode minimalism with surgical accent placement. The surface stack uses near-black foundations (surface: #080a0a, surface-dim: #050607) to establish a calm, focused environment that reduces eye strain during extended work sessions. The on-surface palette (#f7f8f8 for primary text, #d0d6e0 for secondary) provides 16:1 WCAG AAA contrast, ensuring readability across all UI densities.

Primary (#e5e5e6) is a neutral light gray used exclusively for high-emphasis CTAs and interactive states—the 'Sign up' button, active navigation, and focus indicators. It is not a brand color but a functional accent that signals actionability. Secondary (#55cdff, a vivid cyan) and Tertiary (#f79ce0, a magenta-pink) are brand-distinctive accents reserved for status indicator

Typography

Linear's type system uses Inter Variable as the sole typeface, leveraging variable font technology to achieve precise weight control across the 400–600 range. The hierarchy is strict: display (64px, weight 510) anchors hero sections with -0.02em letter-spacing to tighten the visual mass; headline-lg (40px, weight 600) and headline-md (28px, weight 600) structure content sections; body-md (16px, weight 400, 24px line-height) is the default reading size with 1.5x line-height for comfortable scanning; label-md (13px, weight 510) is used for UI labels, button text, and metadata. The weight 510 (between 500 and 600) is Linear's signature—it provides visual emphasis without the heaviness of 600, creating a 'technical precision' feel. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) on small label

Layout

Linear uses a fixed 1024px container max-width centered on the viewport, creating a focused reading and interaction zone that prevents content from sprawling across ultra-wide displays. The grid is 12 columns with 24px gutters, enabling flexible 2-column, 3-column, and 4-column layouts. Page rhythm is established through lg spacing (40px) for section separation, md spacing (24px) for component padding, and sm spacing (12px) for internal element spacing. The hero section uses a 64px top margin to create breathing room below the fixed header; subsequent sections use 40px vertical separation. Cards and containers use 8px internal padding (xs spacing) to maintain compact density while preserving visual breathing room. The design favors white-space as a design tool: negative space around text a

Elevation & Depth

Linear rejects traditional shadow-based elevation in favor of a flat, layered approach rooted in border and background opacity. The elevation system has three levels: Level 1 (Base Canvas) is the surface background (#080a0a) with no border or shadow. Level 2 (Standard Card) uses a 1px solid border at rgba(255, 255, 255, 0.06) with backgroundColor: rgba(0, 0, 0, 0) to create subtle separation without visual weight. Level 3 (Elevated/Modal) uses a 1px solid border at rgba(255, 255, 255, 0.12) with backgroundColor: rgba(255, 255, 255, 0.02) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) to create

Shapes

Linear's shape language is 'Technical Precision'—a philosophy that favors sharp, geometric corners over organic curves, signaling engineering rigor and functional clarity. Buttons use rounded: full (9999px) for primary CTAs ('Sign up'), creating a pill-shaped form that feels modern and approachable while remaining geometric. Secondary buttons and cards use rounded: md (8px), a subtle corner radius that softens the interface without introducing visual softness. Input fields use rounded: DEFAULT (6px), a compromise between sharpness and usability. Modals and elevated containers use rounded: xl (

Components

Action Elements Buttons follow a two-tier system: primary (button-primary) uses backgroundColor: {colors.primary} (#e5e5e6) with textColor: {colors.on-primary} (#080a0a), rounded: full, padding: 8px 16px, and height: 40px. On hover, the background shifts to {colors.primary-fixed-dim} (#c9c9ca) with a transition: background-color 150ms ease. Secondary buttons (button-secondary) use backgroundColor: rgba(255, 255, 255, 0.04) with a 1px border at rgba(255, 255, 255, 0.08), rounded: md, and the same 40px height. On hover, the background becomes rgba(255, 255, 255, 0.08) and the border shifts to rgba(255, 255, 255, 0.12). Both button types use typography: label-md (13px, weight 510) and support a disabled state with opacity: 0.5 and cursor: not-allowed.

Containers & Surfaces Cards (car

Do's and Don'ts

**Do**

• Do use primary (#e5e5e6) exclusively for high-emphasis CTAs and focus indicators—never use it for body text or backgrounds.
• Do apply lg spacing (40px) between major sections and md spacing (24px) for component padding to maintain consistent rhythm.
• Do use rgba-based overlays (rgba(255, 255, 255, 0.04–0.12)) for interactive states rather than solid color changes to preserve the dark aesthetic.
• Do pair Inter Variable weight 510 with display and label text to create the signature 'technical precision' feel.
• Do use rounded: full only for primary CTAs; use rounded: md for secondary elements to establish clear visual hierarchy.

**Don't**

• Don't use shadows as the primary elevation mechanism—rely on borders (1px solid rgba(255, 255, 255, 0.06–0.12)) and background opacity instead.
• Don't apply secondary (#55cdff) or tertiary (#f79ce0) colors to large surface areas; reserve them for status indicators and accent highlights.
• Don't use system fonts or fallback sans-serif; always load Inter Variable to maintain the brand's technical precision.
• Don't exceed 1024px container max-width on desktop; content sprawl dilutes the focused, minimalist aesthetic.
• Don't use rounded corners larger than xl (16px) on standard components; excessive rounding contradicts the geometric, engineering-focused brand identity.