Linear

Overview

Linear is a precision-engineered product development system designed for modern teams and AI agents. The brand embodies 'Austere Minimalism'—a philosophy that strips away visual noise to expose pure functional clarity. The interface uses a near-black canvas (#080910) as the dominant surface, allowing a single accent color (#e2e4e7, a cool off-white) to command attention on interactive elements. This creates a stark, almost monastic aesthetic that conveys authority, focus, and technical sophistication. The emotional response is one of calm control: users feel they are working within a precision instrument, not a playful toy.

Linear's voice is direct, technical, and unapologetic. The brand speaks in active verbs and concrete nouns—'Render UI before sync,' 'Faster app launch,' 'Purpose-built for planning.' There is no hedging, no marketing softness. The tone assumes the user is intelligent and values their time. Example sentence in brand voice: 'Sync vehicle_state before rendering to eliminate blocking on iOS startup.'

Colors

The color system is built on a foundation of extreme contrast: a near-black surface (#080910, rgb(8, 9, 10)) paired with a cool off-white primary accent (#e2e4e7, rgb(226, 228, 231)). This pairing creates a 'high-contrast minimalism' aesthetic where the primary color is used sparingly but decisively on CTAs, active states, and focus indicators. The secondary accent (#55cdff, a vivid cyan) and tertiary accent (#f79ce0, a soft magenta) are reserved for status indicators, highlights, and supporting UI elements—they appear frequently in the hero gradient but rarely in interactive components. The error color (#f34e52, a bright red) maintains the high-contrast principle. Surface variants progress from #050608 (surface-dim, for recessed elements) through #0f1117 (surface-container, the standard c

Typography

The type system uses Inter Variable as the sole typeface, leveraging its variable weight axis to create nuance without introducing new font files. Display text (64px, weight 510) sets the hero headline with a tight -0.02em letter-spacing to create density and authority. Headline-lg (40px, weight 600) and headline-md (28px, weight 600) establish section hierarchy with progressively looser tracking (-0.015em, -0.01em). Body text (16px–18px, weight 400) maintains 24–28px line-height for comfortable reading on dark backgrounds. Label-md (13px, weight 510) is used for buttons and UI labels, with a slight letter-spacing of 0.01em to enhance legibility at small sizes. The weight 510 (a mid-weight between 500 and 600) is Linear's signature typographic choice, appearing on CTAs and interactive elem

Layout

The page uses a fixed 1024px container max-width centered on the viewport, with a 12-column grid system. Horizontal gutters are 24px (md spacing token), creating breathing room without excessive whitespace. Vertical rhythm is established through lg spacing (40px) between major sections, with md spacing (24px) between subsections and sm spacing (12px) between related elements. The hero section occupies the full viewport height with the headline positioned at 40% from the top, allowing the gradient background to dominate the visual field. Cards and containers use 8px internal padding (xs spacing) to maintain tightness and visual density. The layout philosophy is 'content-first minimalism': every pixel of whitespace must justify itself by improving clarity or hierarchy. Avoid centering text b

Elevation & Depth

Depth is conveyed through subtle layering rather than dramatic shadows. The base layer is the near-black surface (#080910). Level 1 (standard cards) uses a 1px border at rgba(255, 255, 255, 0.06) with no shadow, creating a crisp outline that defines the card boundary without softness. Level 2 (elevated containers, modals) adds a 1px border at rgba(255, 255, 255, 0.12) and applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), creating a subtle lift. Level 3 (floating panels, tooltips) uses box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) with a 1px border at rgba(255, 255, 255, 0.15). Hover states on in

Shapes

The shape philosophy is 'Functional Geometry'—border-radius values are chosen to balance approachability with technical precision. Buttons use 9999px (full) radius, creating pill-shaped CTAs that feel modern and clickable without sacrificing legibility. Cards and containers use 16px (xl) radius for a softer, more approachable appearance that still maintains geometric clarity. Input fields and smaller interactive elements use 6px (DEFAULT) or 8px (md) radius, creating a subtle roundness that prevents the interface from feeling harsh or grid-locked. The reasoning: full-radius buttons are the pri

Components

Action Elements Buttons are the primary interactive affordance. The primary button uses {colors.primary} (#e2e4e7) background with {colors.on-primary} (#080910) text, {typography.label-md} (13px, weight 510), {rounded.full} (9999px), and 8px 16px padding for a 40px height. On hover, shift to {colors.primary-fixed-dim} (#e2e4e7 with 8% opacity reduction) to signal interactivity without jarring color change. The secondary button uses rgba(255, 255, 255, 0.04) background with {colors.primary} text, a 1px border at rgba(255, 255, 255, 0.08), and {rounded.md} (8px) radius. On hover, increase background opacity to rgba(255, 255, 255, 0.08) and border to rgba(255, 255, 255, 0.12). All button transitions use 150ms ease-out timing to feel responsive without being jarring.

Containers & Surf

Do's and Don'ts

**Do**

• Do use {colors.primary} (#e2e4e7) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain distinctive.
• Do maintain the 1024px container max-width and 24px gutters to preserve the austere, controlled layout rhythm.
• Do apply {typography.label-md} (13px, weight 510) to all interactive labels and buttons to signal actionability through typographic weight.
• Do use rgba(255, 255, 255, 0.06) borders on cards and containers—this is the brand's signature divider and creates visual hierarchy without softness.
• Do layer depth through border opacity and subtle shadows (0 4px 12px rgba(0, 0, 0, 0.1)) rather than dramatic elevation changes.

**Don't**

• Don't use pure white (#ffffff) for text or backgrounds—Linear's palette uses #f7f8f8 (near-white) and #080910 (near-black) to reduce eye strain and maintain visual cohesion.
• Don't apply rounded corners larger than {rounded.xl} (16px) to cards or containers—this softens the austere aesthetic and reduces perceived technical precision.
• Don't use the secondary (#55cdff) or tertiary (#f79ce0) accent colors on interactive elements; reserve them for status indicators and decorative gradients.
• Don't add drop shadows to standard cards—use 1px borders instead to maintain the crisp, geometric aesthetic.
• Don't center-align body text or use variable line-lengths; left-align all copy to maintain visual weight and reading flow.