Claude Code
Cursor
Codex
GitHub Copilot
GrammarlyBrand
DESIGN.md · measured October 21, 2026
Linear design system
Dark monochrome interface measured from linear.app: Inter Variable type, tonal surfaces and pill-shaped controls.
- Background
- #08090A
- Primary
- #E5E5E6
- Type
- Inter Variable
- Corners
- Pill
From linear.app ↗ · 438 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with Linear
Linear colors
19 roles measured on the page, grouped by where each color is used.
Surfaces
Near Black
#08090AbackgroundPage background · 3×Charcoal
#0F1011surface-container-lowRaised areas one step from the page · 3×Charcoal
#121414surface-containerCards and panels · 1×Charcoal
#161718surface-container-highHover and pressed fills · 3×Charcoal
#1C1C1Dsurface-container-highestHighest raised elements · 1×White 2%
#FFFFFF05overlayTranslucent fill for cards and controls · 4×White 5%
#FFFFFF0Doverlay-strong · --sx-1urpf9dStronger translucent fill · 2×Text
Snow
#F7F8F8on-surfacePrimary text and headings · 20×Cool Silver
#D0D6E0on-surface-variant · --color-text-secondarySecondary text · 25×Cool Gray
#8A8F98on-surface-muted · --color-text-tertiaryMuted text and metadata · 25×Cool Slate
#62666Don-surface-subtleSubtle text and placeholders · 33×Near Black
#08090Aon-primaryText and icons on primaryAccents
Mist
#E5E5E6primaryPrimary buttons and calls to action · 4×Vivid Yellow
#E4F222secondaryAccent · 1×Borders
White 8%
#FFFFFF14outlineBorders and dividers · 6×Graphite
#2E2E32outline-variantSecondary dividers · 2×Status
Vivid Amber
#F0BF00warningWarnings and highlights · 6×Green
#27A644successSuccess and positive states · 1×Red
#F34E52errorErrors and destructive states · 1×Gradients
Linear fonts
2 families.
AaInter VariableWeights 400, 510Inter Variable, SF Pro Display, -apple-system, BlinkMacSystemFont
AaBerkeley MonoMonospace · Weights 400Berkeley Mono, ui-monospace, SF Mono, Menlo
headline-displayPage title (h1)Linear64px · 510 · 1 · -0.022em
mobile 38px
mobile 38px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog48px · 510 · 1 · -0.022em
mobile 24px
mobile 24px
headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog32px · 400 · 1.13 · -0.022em
headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog24px · 400 · 1.33 · -0.012em
body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5
body-smSecondary and small textThe quick brown fox jumps over the lazy dog13px · 400 · 1.5 · -0.01em
captionCaptions and fine printThe quick brown fox jumps over the lazy dog12px · 400 · 1.17
label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 510
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog13px · 510
label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog12px · 510 · 1.17
codeCode and technical valuesconst ready = true;12px · 400 · 1.4
Contrast
Text on #08090A
AaAAA
18.7:1AaAAA
13.6:1AaAA
6.1:1AaLarge only
3.5:1Spacing
No strict grid · 54% are multiples of 4px
xs4pxsm8pxmd12pxlg24pxxl36pxgutter8pxsection128pxBreakpoints: 600px 640px 768px 1024px 1280px
Shapes
Corner radii, most used first.
full9999px · 92×
sm4px · 80×
md8px · 80×
Depth
Inset
Shadow
Inset
Ring
Components
Rebuilt from the measured CSS.
Sign up
Performance
Product
Input text
Card
Inline link
Motion
Interface transitions
0.16s0.1s0.2scubic-bezier(0.25, 0.46, 0.45, 0.94)ease
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #08090A for the page and lift surfaces in small steps: #0F1011, #121414, #161718, #1C1C1D.
- Keep text in 4 levels: #F7F8F8, #D0D6E0, #8A8F98, #62666D.
- Let contrast carry emphasis; primary actions use #E5E5E6 on #08090A.
- Set headlines in Inter Variable with tight tracking (-0.022em).
- Reuse the measured spacing steps (8px, 12px, 24px).
- Make buttons and chips fully rounded (9999px); most other elements use 4px corners.
- Use #62666D for body text; it reaches 3.5:1 on #08090A. Keep it for large text or metadata.
- Use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Introduce new font families beyond Inter Variable and Berkeley Mono.
- Add saturated accent colors; the measured palette is almost entirely neutral.
- Make interface transitions slower than 0.2s.
DESIGN.md258 lines
---
version: alpha
name: Linear
description: "Dark monochrome interface measured from linear.app: Inter Variable type, tonal surfaces and pill-shaped controls."
colors:
background: "#08090A"
surface: "#08090A"
on-surface: "#F7F8F8"
on-background: "#F7F8F8"
on-surface-variant: "#D0D6E0"
on-surface-muted: "#8A8F98"
on-surface-subtle: "#62666D"
surface-container-low: "#0F1011"
surface-container: "#121414"
surface-container-high: "#161718"
surface-container-highest: "#1C1C1D"
overlay: "#FFFFFF05"
overlay-strong: "#FFFFFF0D"
outline: "#FFFFFF14"
outline-variant: "#2E2E32"
primary: "#E5E5E6"
on-primary: "#08090A"
secondary: "#E4F222"
warning: "#F0BF00"
success: "#27A644"
error: "#F34E52"
typography:
headline-display:
fontFamily: Inter Variable
fontSize: 64px
fontWeight: 510
lineHeight: 1
letterSpacing: -0.022em
headline-lg:
fontFamily: Inter Variable
fontSize: 48px
fontWeight: 510
lineHeight: 1
letterSpacing: -0.022em
headline-md:
fontFamily: Inter Variable
fontSize: 32px
fontWeight: 400
lineHeight: 1.13
letterSpacing: -0.022em
headline-sm:
fontFamily: Inter Variable
fontSize: 24px
fontWeight: 400
lineHeight: 1.33
letterSpacing: -0.012em
body-md:
fontFamily: Inter Variable
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
body-sm:
fontFamily: Inter Variable
fontSize: 13px
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.01em
caption:
fontFamily: Inter Variable
fontSize: 12px
fontWeight: 400
lineHeight: 1.17
label-lg:
fontFamily: Inter Variable
fontSize: 16px
fontWeight: 510
label-md:
fontFamily: Inter Variable
fontSize: 13px
fontWeight: 510
label-sm:
fontFamily: Inter Variable
fontSize: 12px
fontWeight: 510
lineHeight: 1.17
code:
fontFamily: Berkeley Mono
fontSize: 12px
fontWeight: 400
lineHeight: 1.4
headline-display-mobile:
fontFamily: Inter Variable
fontSize: 38px
fontWeight: 510
lineHeight: 1.1
letterSpacing: -0.022em
headline-lg-mobile:
fontFamily: Inter Variable
fontSize: 24px
fontWeight: 510
lineHeight: 1.33
letterSpacing: -0.012em
rounded:
sm: 4px
md: 8px
full: 9999px
spacing:
xs: 4px
sm: 8px
md: 12px
lg: 24px
xl: 36px
gutter: 8px
section: 128px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.label-md}"
rounded: "{rounded.full}"
padding: 0px 12px
height: 32px
button-primary-hover:
backgroundColor: "#FFFFFF"
button-outline:
textColor: "{colors.on-surface-variant}"
typography: "{typography.caption}"
rounded: 16px
padding: 0px 11px 0px 7px
height: 24px
button-ghost:
textColor: "{colors.on-surface-muted}"
typography: "{typography.body-sm}"
rounded: "{rounded.full}"
padding: 0px 12px
input-field:
backgroundColor: "#3B3B3B"
textColor: "#FFFFFF"
typography: "{typography.body-sm}"
rounded: 0px
padding: 0px
card:
backgroundColor: "{colors.surface-container-high}"
textColor: "{colors.on-surface}"
typography: "{typography.body-md}"
rounded: 6px
padding: 11px
link:
textColor: "{colors.on-surface-muted}"
---
# Linear Design System
## Overview
Linear describes itself as: “Purpose-built for planning and building products with AI agents.” The interface is dark, built on **Near Black (#08090A)** with **Snow (#F7F8F8)** text and almost no color: actions are carried by contrast, not hue.
Type is set in **Inter Variable**, with **Berkeley Mono** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Controls are pill-shaped.
Measured from [linear.app](https://linear.app/) on October 21, 2026 at 1440×900 and 390×844 from 438 rendered elements. Values are computed styles from the live page, not the original source files.
## Colors
The palette has 19 roles, plus gradient stops #B2D5FF, #DFD1FF.
- **Near Black (#08090A):** Page background, seen 3 times. Token `background`.
- **Snow (#F7F8F8):** Primary text and headings, seen 20 times. Token `on-surface`.
- **Cool Silver (#D0D6E0):** Secondary text, seen 25 times. Token `on-surface-variant`, CSS `--color-text-secondary`.
- **Cool Gray (#8A8F98):** Muted text and metadata, seen 25 times. Token `on-surface-muted`, CSS `--color-text-tertiary`.
- **Cool Slate (#62666D):** Subtle text and placeholders, seen 33 times. Token `on-surface-subtle`.
- **Charcoal (#0F1011):** Raised areas one step from the page, seen 3 times. Token `surface-container-low`.
- **Charcoal (#121414):** Cards and panels, seen 1 time. Token `surface-container`.
- **Charcoal (#161718):** Hover and pressed fills, seen 3 times. Token `surface-container-high`.
- **Charcoal (#1C1C1D):** Highest raised elements, seen 1 time. Token `surface-container-highest`.
- **White 2% (#FFFFFF05):** Translucent fill for cards and controls, seen 4 times. Token `overlay`.
- **White 5% (#FFFFFF0D):** Stronger translucent fill, seen 2 times. Token `overlay-strong`, CSS `--sx-1urpf9d`.
- **White 8% (#FFFFFF14):** Borders and dividers, seen 6 times. Token `outline`.
- **Graphite (#2E2E32):** Secondary dividers, seen 2 times. Token `outline-variant`.
- **Mist (#E5E5E6):** Primary buttons and calls to action, seen 4 times. Token `primary`.
- **Near Black (#08090A):** Text and icons on primary. Token `on-primary`.
- **Vivid Yellow (#E4F222):** Accent, seen 1 time. Token `secondary`.
- **Vivid Amber (#F0BF00):** Warnings and highlights, seen 6 times. Token `warning`.
- **Green (#27A644):** Success and positive states, seen 1 time. Token `success`.
- **Red (#F34E52):** Errors and destructive states, seen 1 time. Token `error`.
## Typography
**Inter Variable** and **Berkeley Mono** (monospace) share the interface. Fallback stack: `Inter Variable, SF Pro Display, -apple-system, BlinkMacSystemFont`.
- **headline-display:** Inter Variable 64px at weight 510, line height 1, tracking -0.022em (38px on mobile). Page title (h1).
- **headline-lg:** Inter Variable 48px at weight 510, line height 1, tracking -0.022em (24px on mobile). Section headings (h2).
- **headline-md:** Inter Variable 32px at weight 400, line height 1.13, tracking -0.022em. Sub-section headings.
- **headline-sm:** Inter Variable 24px at weight 400, line height 1.33, tracking -0.012em. Card and feature titles.
- **body-md:** Inter Variable 16px at weight 400, line height 1.5. Body text.
- **body-sm:** Inter Variable 13px at weight 400, line height 1.5, tracking -0.01em. Secondary and small text.
- **caption:** Inter Variable 12px at weight 400, line height 1.17. Captions and fine print.
- **label-lg:** Inter Variable 16px at weight 510. Large buttons and tabs.
- **label-md:** Inter Variable 13px at weight 510. Buttons, navigation and labels.
- **label-sm:** Inter Variable 12px at weight 510, line height 1.17. Small labels and badges.
- **code:** Berkeley Mono 12px at weight 400, line height 1.4. Code and technical values.
## Layout
Spacing does not follow a strict grid: 54% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.
- **Scale:** xs 4px, sm 8px, md 12px, lg 24px, xl 36px.
- **Sections:** 128px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 600px, 640px, 768px, 1024px, 1280px.
## Elevation & Depth
Depth comes mostly from hairline rings and inset highlights on tonal surfaces (#0F1011 → #121414 → #161718 → #1C1C1D):
- `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset`
- `rgba(255, 255, 255, 0.08) 0px 0px 0px 0.5px inset`
- `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
A few raised panels add a soft drop shadow: `rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px`.
## Shapes
Interactive controls are pill-shaped. Measured radii, most used first:
- **full (9999px):** 92 elements.
- **sm (4px):** 80 elements.
- **md (8px):** 80 elements.
## Components
Measured from the rendered page. Token values reference the tokens above.
- **button-primary (“Sign up”):** #E5E5E6 fill, #08090A text, 13px/510, 9999px radius, padding 0px 12px, border 1px solid #E5E5E6, shadow `rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px`.
- **button-primary-hover:** background #FFFFFF, text #08090A on hover.
- **button-outline (“Performance”):** transparent fill, #D0D6E0 text, 12px/400, 16px radius, padding 0px 11px 0px 7px, border 1px solid #2E2E32.
- **button-ghost (“Product”):** transparent fill, #8A8F98 text, 13px/400, 9999px radius, padding 0px 12px.
- **input-field:** #3B3B3B fill, #FFFFFF text, 13.3333px/400, padding 0px.
- **card:** #161718 fill, #F7F8F8 text, 16px/400, 6px radius, padding 11px, border 1px solid #FFFFFF0F.
- **link:** transparent fill, #8A8F98 text, padding 0px.
## Do's and Don'ts
- Do use #08090A for the page and lift surfaces in small steps: #0F1011, #121414, #161718, #1C1C1D.
- Do keep text in 4 levels: #F7F8F8, #D0D6E0, #8A8F98, #62666D.
- Do let contrast carry emphasis; primary actions use #E5E5E6 on #08090A.
- Do set headlines in Inter Variable with tight tracking (-0.022em).
- Do reuse the measured spacing steps (8px, 12px, 24px).
- Do make buttons and chips fully rounded (9999px); most other elements use 4px corners.
- Don't use #62666D for body text; it reaches 3.5:1 on #08090A. Keep it for large text or metadata.
- Don't use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Don't introduce new font families beyond Inter Variable and Berkeley Mono.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.2s.
## Motion
Interface transitions are quick: 0.16s, 0.1s, 0.2s. Longer ambient animations run 2.8s, 1.6s, 3.2s.
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`, `ease`, `cubic-bezier(0.165, 0.84, 0.44, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.
Generated by [Sitepeel](https://sitepeel.dev/design-md/linear.app/), the free DESIGN.md generator.
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need more than one page?
Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.
More designs
See all →
FAQ
Questions
What can I build with the Linear DESIGN.md?
Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, Inter Variable type, spacing, corners and buttons instead of its own defaults.
How do I use it with Claude Code or Cursor?
Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.
Is this Linear’s official design system?
No. Sitepeel measured it from linear.app’s public page on October 21, 2026. It is an independent analysis, not made or approved by Linear.
Can I use Linear’s style in my own product?
Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Linear’s logo, name, pictures or text.
How accurate are the values?
Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.