# Linear — Design System
> Linear's dark geometric system. Engineered for high-speed product UIs with strict density, calm chrome, and a single violet accent.
- **Canonical:** https://uiuxskills.com/library/linear
- **Source:** https://linear.app
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:31.797Z

---

---
version: alpha
name: Linear
tagline: The system for product development
description: Purpose-built for planning and building products with AI agents.
tone: Professional, precise, high-performance, and minimalist.
color-scheme: dark
colors:
  primary: "#F7F8F8"
  secondary: "#9C9DA1"
  background: "#000000"
  surface: "#121212"
  surface-container: "#191D20"
  outline: "#383B3F"
  accent-blue: "#02B8CC"
  accent-indigo: "#6366F1"
  error: "#EB5757"
  success: "#27A644"
  on-primary: "#000000"
  on-surface: "#F7F8F8"
typography:
  display-lg:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 3.5rem
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.03em"
  display-md:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 2.5rem
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  headline-lg:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 2rem
    fontWeight: 600
    lineHeight: "1.25"
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: "-0.01em"
  headline-sm:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 1.25rem
    fontWeight: 500
    lineHeight: "1.4"
    letterSpacing: "0"
  body-md:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.6"
    letterSpacing: "0"
  body-sm:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "0"
  label-md:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 0.875rem
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: "0"
  label-sm:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 0.75rem
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  page-container:
    backgroundColor: "{colors.background}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#ffffff"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    width: 100%
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.accent-indigo}"
    outlineOffset: 0px
  link:
    textColor: "{colors.secondary}"
    typography: "{typography.body-sm}"
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-sm}"
  badge-success:
    backgroundColor: rgba(39, 166, 68, 0.07)
    textColor: "{colors.success}"
    typography: "{typography.label-sm}"
  badge-error:
    backgroundColor: rgba(243, 78, 82, 0.1)
    textColor: "{colors.error}"
    typography: "{typography.label-sm}"
  badge-info:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.accent-blue}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  swatch-accent-indigo:
    backgroundColor: "{colors.accent-indigo}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 100ms
  duration-medium: 200ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.5)
  md: 0 4px 12px rgba(0, 0, 0, 0.6)
  lg: 0 12px 24px rgba(0, 0, 0, 0.8)
---

## Overview

Linear features a highly refined, dark-mode first aesthetic that emphasizes extreme precision, high contrast, and subtle depth. The brand conveys a sense of speed, focus, and professional-grade quality through crisp borders, fine typography, and restrained accent colors. It is designed to feel like a high-performance utility for engineering and product teams.

## Colors

The color strategy is built around a dark-mode first scheme, utilizing absolute blacks and deep grays to establish a high-contrast, low-distraction canvas. Saturated accents are applied with extreme restraint to direct focus and denote status.

*   **Primary** (`{colors.primary}`): A crisp off-white (#F7F8F8) used for primary text and high-contrast interactive elements.
*   **Secondary** (`{colors.secondary}`): A muted gray (#9C9DA1) for secondary text, icons, and inactive states.
*   **Background (inferred)** (`{colors.background}`): A deep black (#000000) background that anchors the dark-mode aesthetic.
*   **Surface (inferred)** (`{colors.surface}`): A dark gray (#121212) surface for cards and structural elements.
*   **Surface Container** (`{colors.surface-container}`): A slightly lighter container surface (#191D20) for nested elements and interactive states.
*   **Outline** (`{colors.outline}`): A subtle dark gray border/outline (#383B3F) used to define boundaries in dark mode.
*   **Accent Blue** (`{colors.accent-blue}`): A teal/cyan accent (#02B8CC) used for specific status indicators and highlights.
*   **Accent Indigo** (`{colors.accent-indigo}`): An indigo accent (#6366F1) used for primary focus rings and brand highlights.
*   **Error** (`{colors.error}`): A red error color (#EB5757) used for destructive actions and negative diffs.
*   **Success** (`{colors.success}`): A green success color (#27A644) used for completed states and positive diffs.
*   **On-Primary (inferred)** (`{colors.on-primary}`): A solid black (#000000) text used on primary off-white buttons for maximum contrast.
*   **On-Surface (inferred)** (`{colors.on-surface}`): An off-white (#F7F8F8) text used on dark surfaces.

## Typography

Built on Inter and system sans-serif fallbacks, the typography relies on tight letter-spacing and high contrast to deliver a technical, high-performance feel.

*   **Display Large (inferred)** (`{typography.display-lg}`): Large hero display typography with tight letter spacing for main marketing headings.
*   **Display Medium (inferred)** (`{typography.display-md}`): Medium display typography for section headers.
*   **Headline Large (inferred)** (`{typography.headline-lg}`): Large headline for feature titles.
*   **Headline Medium (inferred)** (`{typography.headline-md}`): Medium headline for card titles.
*   **Headline Small (inferred)** (`{typography.headline-sm}`): Small headline for sub-sections.
*   **Body Medium (inferred)** (`{typography.body-md}`): Standard body copy for high readability.
*   **Body Small (inferred)** (`{typography.body-sm}`): Small body copy for secondary descriptions and metadata.
*   **Label Medium (inferred)** (`{typography.label-md}`): Medium label for buttons and navigation items.
*   **Label Small (inferred)** (`{typography.label-sm}`): Small label for badges and micro-copy.

## Layout

Linear uses a strict grid system with generous container padding and structured vertical rhythm. Layouts are highly organized, utilizing modular cards, clear section dividers, and consistent spacing to present complex product development workflows cleanly. The observed section order top-to-bottom is `nav`, `hero`, `features`, `use-cases`, and `footer`. The hero composition pattern features a centered headline and subhead with a single primary CTA, followed by a large, high-fidelity dark-mode product interface screenshot. Below 768px, navigation collapses to a mobile hamburger drawer, and multi-column grids stack vertically.

## Elevation & Depth

Subtle single-layer shadows across three levels are used to convey depth, though depth is primarily established through subtle color steps (from pure black backgrounds to dark gray surfaces) and fine, low-opacity borders. Where shadows are used, they are dark and tightly bounded to maintain a crisp, flat-yet-layered appearance.
*   `elevation.sm` (inferred) — Used for subtle card lift.
*   `elevation.md` (inferred) — Used for floating elements like dropdowns, command menus, or elevated cards.
*   `elevation.lg` (inferred) — Used for modal overlays and drawer elements.

## Shapes

The shape language is defined by precise, small-radius corners that reinforce the tool's professional, utility-first character. Standard interactive elements like buttons and inputs use `{rounded.md}` (8px), while structural containers like cards use `{rounded.lg}` (12px). Pill shapes (`rounded.full`) are reserved strictly for status badges and avatars to prevent the interface from looking overly casual.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### page-container
The structural wrapper for all views. It uses `{colors.background}` as its base to establish the dark canvas and ensures consistent padding using `{spacing.lg}` and `{spacing.xl}`.

### button-primary
The main call-to-action button. It features `{colors.primary}` background with `{colors.on-primary}` text, utilizing `{typography.label-md}`. On hover, it transitions to `#ffffff` using `{motion.duration-short}`.

### button-secondary
Used for secondary actions. It features `{colors.surface-container}` background, `{colors.on-surface}` text, and a border of `{colors.outline}`. It uses `{rounded.md}` for its corners.

### card
The primary content container. It uses `{colors.surface}` background, `{colors.outline}` border, and `{rounded.lg}` corner radius. Use this to group related features or content blocks.

### card-elevated
An elevated variant of the card component. It uses `{colors.surface-container}` background, `{colors.outline}` border, and `{rounded.lg}` corner radius, combined with `{elevation.md}` for visual separation.

### input-field
Standard text input. It features `{colors.surface}` background, `{colors.on-surface}` text, and a border of `{colors.outline}`. On focus, the border color transitions to `{colors.accent-indigo}` with `{motion.duration-short}`.

### badge
A small status or category indicator. It uses `{colors.surface-container}` background, `{colors.secondary}` text, `{typography.label-sm}`, and `{rounded.full}` corner radius.

### divider
A thin structural line used to separate content sections. It has a height of 1px and uses `{colors.outline}` for its background color.

### swatch-accent-indigo
A decorative or functional color swatch. It uses `{colors.accent-indigo}` background, `{rounded.sm}` corner radius, and has a fixed size of 32px.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Set background colors to `{colors.background}` for main page areas to maintain the signature dark aesthetic. | Never use bright, saturated backgrounds for large layout sections; stick to `{colors.background}` or `{colors.surface}`. |
| Apply `{colors.outline}` for subtle borders to separate content blocks without adding visual noise. | Never omit the `{colors.outline}` border on `{components.card}` elements when they sit on `{colors.background}`. |
| Use `{colors.primary}` for primary text and high-contrast interactive elements. | Do not use pure white text for secondary body copy; use `{colors.secondary}` instead of `{colors.primary}`. |
| Use `{rounded.md}` for standard interactive elements like buttons and input fields. | Avoid using large border radiuses like `{rounded.xl}` on functional components like `{components.button-primary}`. |
| Apply `{elevation.md}` only to floating elements like dropdowns, command menus, or elevated cards. | Do not apply heavy, colorful drop shadows; keep elevation subtle using `{elevation.sm}` or `{elevation.md}`. |
| Use `{colors.accent-indigo}` or `{colors.accent-blue}` sparingly for focus states and key brand highlights. | Avoid using multiple accent colors simultaneously; stick to either `{colors.accent-blue}` or `{colors.accent-indigo}` for a given context. |
| Style secondary descriptions and metadata with `{typography.body-sm}` and `{colors.secondary}`. | Do not use `{typography.body-md}` with `{colors.primary}` for low-priority metadata. |
| Reserve `{rounded.full}` strictly for status badges and avatars. | Do not apply `{rounded.full}` to structural components like `{components.card}` or `{components.input-field}`. |

## Content Style

CTA labels are direct, action-oriented, and written in lowercase or sentence-case, often appended with a directional arrow (e.g., "Issue tracking is dead linear.app/next →", "1.0 Intake →"). They avoid generic phrasing and focus on immediate utility.

Headlines are confident, direct, and focused on speed, efficiency, and engineering excellence. They avoid marketing fluff and state the product's value proposition with technical clarity.

The copy density is high but highly structured. Paragraphs are kept short and are broken up by bullet points, inline code blocks, and structured metadata tables to ensure rapid scannability for technical users.

## Imagery & Icons

The imagery treatment is a mix of highly stylized UI mockups with glowing borders, dark-mode screenshots, and crisp vector icons with subtle gradients. Icons use sharp, precise vector lines with minimal decoration. Screenshots must always represent the product in dark mode, showcasing clean layouts, fine borders, and high-contrast text. No colorful or heavy drop shadows should be applied to images; instead, use fine `{colors.outline}` borders to integrate them into the layout.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Linear, a minimal enterprise-grade product development tool. Match its high-performance, precise, zero-distraction tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-sm}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font weights.
2. Use only components defined under `components:`. Do not invent variants; if a needed variant is absent, surface the gap to the user before generating.
3. Follow the Shapes section literally: `{rounded.md}` on buttons and inputs, `{rounded.lg}` on cards, `{rounded.full}` only on badges and avatars.
4. Treat the Do's and Don'ts table as authoritative. If a user's request conflicts with a rule (e.g., adding a saturated section background), state the conflict before generating.
5. Apply motion tokens (`{motion.duration-short}`, `{motion.easing-standard}`) to all interactive state transitions. Do not hardcode transition values.

## Output contract

**Must:**
- Use token names for every color, type style, radius, spacing, shadow, and motion value.
- Render hover, focus, and disabled states for every interactive component where the spec defines them (button-primary-hover, input-field-focus, link-hover).
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, gap, and margin values.
- Apply `{elevation.md}` to dropdowns and floating elements; `{elevation.lg}` to modals and drawers; `{elevation.sm}` for subtle card lift.
- Match CTA copy style: sentence-case, direct, action-oriented, no generic labels.

**Must NOT:**
- Invent colors, radii, font sizes, or spacing values not present in the spec.
- Use generic system defaults when a brand token exists.
- Apply `{rounded.xl}` or `{rounded.full}` to buttons, inputs, or cards.
- Use multiple accent colors in the same context — pick either `{colors.accent-indigo}` or `{colors.accent-blue}`, not both.
- Use `{colors.primary}` for secondary body copy or metadata; use `{colors.secondary}`.
- Apply colorful or heavy drop shadows to images or layout sections.
- Rewrite page copy, button labels, headlines, or alter navigation structure.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source (theme file, Storybook) exists, defer to it.
- For background roles, default to `{colors.background}`; for nested surfaces, use `{colors.surface}` then `{colors.surface-container}`.
- Below 768px, collapse multi-column grids to single-column and follow the mobile-first responsive notes in Layout.
- When composing new layouts, prefer combining existing components over introducing new tokens.