Linear

Overview

Linear is a purpose-built product development system designed for modern teams and AI agents, embodying a philosophy of **Austere Technical Minimalism**—where visual restraint amplifies functional clarity. The brand operates in a near-monochromatic dark canvas (rgb(8, 9, 10) as the foundational surface), punctuated by a precise violet accent (primary: #4354b8) that signals interactivity and agency. The UI avoids decorative flourishes; every pixel serves a structural purpose. The emotional response is one of calm authority: users feel they are working with a tool built by engineers for engineers, where complexity is managed through hierarchy and restraint, not ornamentation.

The voice is direct, technical, and unapologetically modern. Linear speaks in the language of product teams: "Faster app launch," "In Progress," "High priority." Sentences are short, active, and outcome-focused. The brand personality rejects softness—no rounded corners on critical inputs, no blur effects on core surfaces. Example sentence in Linear's voice: "Render UI before vehicle_state sync when minimum required state is present, instead of blocking on full refresh during iOS startup."

Colors

Linear's color system is rooted in **high-contrast dark minimalism** with surgical accent placement. The surface stack descends from #08090a (surface) through carefully calibrated grays (#161819 for containers, #2e3032 for elevated surfaces) to create visual separation without relying on shadows or blur. On-surface text is rgb(247, 248, 248)—a near-white that maintains 15:1 contrast against the dark base, ensuring readability without eye strain in extended work sessions.

The primary accent, #4354b8 (a mid-tone violet), is reserved exclusively for actionable elements: CTA buttons, focus states, and interactive indicators. This color appears sparingly—perhaps 3–5% of the interface—making it unmissable when present. Secondary accent #e5591d (a warm orange-red) is used for status indicators a

Typography

Linear's type system prioritizes **legibility under cognitive load**. The display tier (64px, fontWeight 510) anchors hero messaging with a measured weight that avoids heaviness; headline-lg (40px, 600) and headline-md (28px, 600) establish information hierarchy without theatrical scale. Body text (16px, fontWeight 400, lineHeight 24px) is set in Inter Variable with precise 0.01em letter-spacing to maintain crispness at small sizes. Labels (13px, fontWeight 510) use a slightly heavier weight to distinguish UI controls from body content. All type is rendered with -webkit-font-smoothing: antialiased to ensure consistent rendering across platforms. When labels appear over busy backgrounds (e.g., status badges on dark cards), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to maintain legibili

Layout

Linear uses a **fluid 12-column grid** with a 1024px container max-width, allowing content to breathe on desktop while remaining compact on tablets. The spacing scale is semantic: {spacing.gutter} (24px) is the default horizontal margin for page sections, {spacing.lg} (40px) separates major content blocks, and {spacing.md} (24px) is used for card padding and internal component spacing. Vertical rhythm follows a 8px unit grid: buttons are 40px tall (5 units), inputs 32px (4 units), and list items 12px padding (1.5 units). White-space is aggressive—sections are separated by 40–64px of breathing room, preventing visual fatigue. The interface avoids centered layouts; left-aligned content with right-aligned CTAs creates a natural reading flow. Container backgrounds use rgba(0, 0, 0, 0) with 1px

Elevation & Depth

Depth in Linear is achieved through **border definition and subtle color shifts**, not shadows or blur. The elevation system has three levels: Level 1 (Base Surface, #08090a) is the page background with no border. Level 2 (Container, #161819) uses a 1px solid border at rgba(255, 255, 255, 0.08) and sits 8px above the base via padding/margin. Level 3 (Elevated/Modal, #232527) uses the same border treatment but with a 2px outline at rgba(0, 0, 0, 0.2) for modal dialogs, paired with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2). Hover states lift containers by shifting b

Shapes

Linear employs **Functional Geometry**—a shape philosophy where border-radius is determined by component purpose, not aesthetic whim. Buttons use {rounded.full} (9999px) for primary CTAs, creating a pill shape that signals finality and commitment; secondary buttons use {rounded.DEFAULT} (6px) for a more restrained, utilitarian appearance. Cards and containers use {rounded.xl} (22px) for a softer, more approachable feel that contrasts with the austere dark background. Inputs and form fields use {rounded.DEFAULT} (6px) to maintain visual consistency with secondary buttons and suggest they are pa

Components

Action Elements Primary buttons (button-primary) use {colors.primary} (#4354b8) with {rounded.full} (9999px), 12px horizontal padding, and 40px height. On hover, shift backgroundColor to #7b85d4 with a 150ms ease transition. The label uses {typography.label-md} (13px, fontWeight 510) in {colors.on-primary} (rgb(247, 248, 248)). Secondary buttons (button-secondary) use rgba(255, 255, 255, 0.04) background with a 1px border at rgba(255, 255, 255, 0.08), {rounded.DEFAULT} (6px), and 32px height. On hover, lift to rgba(255, 255, 255, 0.08) background. Ghost buttons (button-ghost) have transparent background and {colors.on-surface-variant} text; on hover, apply rgba(255, 255, 255, 0.04) background and shift text to {colors.on-surface}.

Containers & Surfaces Cards (card) use transparent

Do's and Don'ts

**Do**

• Do use {colors.primary} (#4354b8) exclusively for primary CTAs and focus states—this violet is the brand's signature and must remain rare and impactful.
• Do maintain 15:1 contrast between on-surface text (rgb(247, 248, 248)) and surface backgrounds (#08090a) to ensure readability in extended work sessions.
• Do apply 1px borders at rgba(255, 255, 255, 0.08) to define containers instead of relying on shadows; this maintains the austere, flat aesthetic.
• Do use {rounded.full} (9999px) for primary buttons and {rounded.DEFAULT} (6px) for secondary controls to create a clear visual hierarchy of action importance.
• Do transition hover states over 150ms with ease timing to provide tactile feedback without distraction.

**Don't**

• Don't use blur effects (backdrop-filter) on core surfaces or cards; reserve blur for modal overlays only to maintain clarity.
• Don't apply shadows to containers; use border-color shifts and background rgba adjustments instead to preserve the flat, technical aesthetic.
• Don't mix rounded corner sizes arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use secondary accent colors (#e5591d, #55cdff) for primary CTAs; these are reserved for status indicators and secondary actions.
• Don't add decorative elements or gradients; every visual element must serve a functional purpose in the information hierarchy.