Skip to content
DesignMunkDesignMunk Submit a site

Linear

linear.app
Technology Homepage Inter
Share Visit site
linear.app DESKTOP · 1440
Linear

AI Breakdown

Design export

---
version: alpha
name: Linear
description: Purpose-built for modern teams. Powered by agents. Built for speed.
colors:
  primary: "#f7f8f8"
  secondary: "#7c7c7c"
  tertiary: "#7170ff"
  neutral: "#08090a"
  brand-silver-polish: "#c6c6c6"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter Variable
    fontSize: 56px
    fontWeight: 510
    lineHeight: 1.1
    letterSpacing: -0.022em
  headline-md:
    fontFamily: Inter Variable
    fontSize: 40px
    fontWeight: 510
    lineHeight: 1.1
    letterSpacing: -0.022em
  headline-sm:
    fontFamily: Inter Variable
    fontSize: 20px
    fontWeight: 510
    lineHeight: 1.33
    letterSpacing: -0.012em
  headline-xs:
    fontFamily: Inter Variable
    fontSize: 16px
    fontWeight: 510
    lineHeight: 1.5
  body-md:
    fontFamily: Inter Variable
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.011em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 64px
components:
  button-primary:
    backgroundColor: "#e5e5e6"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 14px 20px
    height: 44px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 14px 20px
    height: 44px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#0f1011"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 0px 24px 28px
---

# Linear — The Product Development System for Teams and Agents

## Overview

Linear is a product-development platform for engineering and product teams, increasingly built for AI agents working alongside humans. The tone is precise, technical, and low-noise: dark, dense, confident, with no decorative filler. An agent building in this style should favor restraint over ornament — every element should read as functional UI first, marketing surface second.

## Colors

- **Primary (#f7f8f8):** Near-white, used for headline text and primary UI text on dark surfaces.
- **Secondary (#7c7c7c):** Muted gray for secondary copy, timestamps, and de-emphasized labels.
- **Tertiary (#7170ff):** Violet accent reserved for interactive highlights and brand marks.
- **Neutral (#08090a):** Near-black base, the dominant background across the entire page.
- **Brand Silver Polish (#c6c6c6):** Secondary light tone for muted headline or icon treatments.
- **Surface:** Maps to neutral; the base fill for page and panel backgrounds.
- **On-surface:** Maps to primary; default text color placed on surface fills.

## Typography

All type runs on Inter Variable, a Google-available family (weight 510 for headlines, 400 for body), so an agent can load it directly with no substitution needed. headline-lg (56px/1.1, -0.022em tracking) carries the hero statement; headline-md (40px) steps down for section intros like 'Make product operations self-driving'; headline-sm (20px/1.33) labels cards and feature blocks; headline-xs (16px) handles UI chrome and small headers; body-md (15px/1.6, -0.011em) is the workhorse for descriptions and paragraph copy. Weight 510 (not full bold) is deliberate — it keeps large type crisp without shouting.

## Layout

Spacing runs on a tight scale — xs 6px, sm 16px, md 24px, lg 32px, xl 64px — favoring compact UI rhythms over generous marketing whitespace. Sections stack with xl (64px) gaps between major blocks, while internal card and list spacing stays in the sm–md range, matching the density of an actual issue tracker rather than a typical landing page.

## Elevation & Depth

Shadows are almost entirely absent (sm is a near-invisible 1.2px line at 3% opacity; md, lg, xl are none), so hierarchy comes from tonal contrast instead: the neutral #08090a page background against the slightly lighter #0f1011 card fill, plus thin borders on panels like the ENG-2703 detail pane and the agent chat window. An inner shadow (12px, 20% opacity) appears only for recessed input-like surfaces.

## Shapes

Two radii only — 8px (rounded-sm) for cards, code blocks, and inputs, and full/9999px for pill buttons and avatar/status chips. The contrast between sharp-ish card corners and fully rounded buttons signals 'structural UI' versus 'actionable control.'

## Components

Buttons: button-primary uses a light #e5e5e6 fill with neutral text, full pill radius, 44px height, 14px/20px padding — used sparingly for primary CTAs like 'Sign up' or 'Get started.' button-secondary is text-only in primary color on the same pill geometry. button-link strips all radius and rounding for inline text actions. Card uses the #0f1011 fill, 8px radius, and 0/24/28px padding, forming the base for feature tiles and changelog entries.

### Issue Detail Panel
The 'Faster app launch' view pairs a main thread (title, description, Activity log) with a right-hand metadata rail showing status ('In Progress'), priority ('High'), assignee, labels, cycle, and project — a dense three-column layout typical of the product itself.

### Agent Chat Panel
A floating panel (labeled 'Linear · Opus 5') docked bottom-right shows an agent narrating its reasoning ('Examining the startup path… Thinking…') with a text input ('Tell Linear what to do next…') below — this is the recurring agent-conversation pattern used across Intake, Build, and Diffs sections.

### Kanban/Cycle Board
Columns (Backlog, Todo, In Progress, Done) with issue counts, ID codes (ENG-2085), colored label chips (Bug, Design, AI, Performance), and inline metadata — reused in the 'Make product operations self-driving' section.

### Roadmap Timeline
A horizontal month-by-month Gantt-style bar (FEB–SEP) with project bars (UI Refresh, Split Fares, Autonomy status clarity) staged through Alpha/Beta/GA phases.

### Code Diff Viewer
Side-by-side before/after code panels with filename tabs and monospace syntax, used in the 'Review PRs and agent output' section to show structural diffs.

### Changelog List
Repeating rows pairing a bold title, one-line description, and a date, used for shipped-feature announcements.

### Customer Quote Cards
Short pull-quotes paired with name, title, and company (e.g., Gabriel Peal, OpenAI), set in body-md with a name/role byline beneath.

## Do's and Don'ts

- Do keep primary buttons light and neutral (#e5e5e6 on #08090a) — do not introduce saturated color for CTAs; the tertiary violet (#7170ff) is an accent, not a button fill.
- Do use monospace styling for code tokens like `vehicle_state` inline in prose, matching the product's own issue descriptions.
- Do rely on the #0f1011-vs-#08090a tonal step plus thin borders for panel separation; don't add drop shadows to simulate elevation.
- Do pair full-pill buttons with 8px-radius cards — don't mix radii within the same component family.
- Don't set headline text heavier than weight 510; the system deliberately avoids full bold for display type.
- Do keep spacing dense (6–24px) inside UI-replica components, reserving 64px gaps only for separating major page sections.

## Agent Prompt Guide

Quick reference — Text: #f7f8f8 (primary) / #7c7c7c (secondary). Background: #08090a (neutral/surface), card fill #0f1011. Accent: #7170ff (tertiary). Border: thin, low-opacity lines on #0f1011 panels.

1. Build a hero section on #08090a background with an Inter Variable headline at 56px, weight 510, -0.022em letter-spacing, in #f7f8f8, followed by a 15px #7c7c7c subhead and a full-radius #e5e5e6 button, 44px tall, 14px/20px padding.
2. Create a card component: #0f1011 background, 8px border radius, 24px horizontal / 28px bottom padding, no top padding, with headline-sm (20px, weight 510) title and body-md (15px, 1.6 line-height) description in #f7f8f8/#7c7c7c.
3. Build an agent-chat floating panel: #0f1011 background, thin border, docked corner, header row with avatar and label, message area with #7c7c7c 'Thinking…' text, and a bottom input field with rounded corners matching the 8px card radius.
4. Design a kanban column: header with column name and count in headline-xs (16px, weight 510), issue rows below with ID text in #7c7c7c, title in #f7f8f8, and small pill-shaped label chips using the full radius token.
5. Lay out a changelog list: repeating rows with headline-sm title, body-md 15px description, and #7c7c7c date, separated by 32px (lg) vertical spacing, all on the #08090a surface.

## Similar Brands

- **Vercel:** Same near-black surface, restrained accent color, and Inter-adjacent type system for a developer audience.
- **Raycast:** Shares the dense dark-UI-as-marketing approach, showing real product panels rather than illustrations.
- **Notion:** Comparable product-led homepage structure with stacked feature sections, though Notion leans lighter and more colorful.
- **GitHub:** Similar audience and the same instinct to embed real code/diff UI directly into marketing pages, though GitHub's palette is less monochrome.

More like this

Browse Technology →
cubefabs.com
Cubefabs AI
Cubefabs
Revolutionize manufacturing with AI factories for next-gen materials.
Homepage · 6 days ago
standardbots.com
Standard Bots AI
Standard Bots
AI-native robots for serious manufacturing—fast, safe, high-ROI.
Homepage · 7 days ago
ouster.com
Ouster Logistics & Mobility
Ouster
Transforming autonomy with high-performance digital lidar sensors.
Homepage · 7 days ago
podab.com
Podab Ecommerce
Podab
Gentle, efficient drying cabinets that extend textile lifespan.
Homepage · 1 week ago