I’m using linear.app as a reference for a new product site. T…

I'll pull linear.app's design profile from saved references, then build the starter kit. I have the linear.app home page profile. Let me get the colors and inspect the screenshot…

I’m using linear.app as a reference for a new product site. Turn its visual language into a practical starter kit I can hand to a developer: a palette, font choices, spacing and radius tokens, a Tailwind theme, a short DESIGN.md, and concrete implementation notes.

I'll pull linear.app's design profile from saved references, then build the starter kit.

I have the linear.app home page profile. Let me get the colors and inspect the screenshot to confirm the visual language.

Here's the starter kit, built from the saved linear.app profile plus the screenshot. The structured color data wasn't retained on this capture, so the palette below is proposed from the rendered pixels and Linear's known brand — treat it as a starting point to validate against the live site.

Captured pages

Palette

Linear reads as a near-black canvas with a single violet accent and very low-contrast dividers. The accent is a soft purple gradient on the primary CTA, not a flat brand color.

Colors

  • #08090a
  • #131316
  • #1b1c1f
  • #2a2b2e
  • #8a8b8d
  • #f7f8f8
  • #5e6ad2
  • #8e8ae0
  • canvas #08090a — page background
  • surface #131316 — card/panel base
  • surface-raised #1b1c1f — elevated card (the issue panel in the screenshot)
  • border #2a2b2e — hairline divider
  • muted #8a8b8d — secondary text, meta
  • ink #f7f8f8 — primary text
  • accent #5e6ad2 — Linear purple, primary action
  • accent-soft #8e8ae0 — gradient end, hover/secondary

Typography

Inter carries the UI and body. Berkeley Mono handles code-like fragments (the vehicle_state snippet in the screenshot). The hero is Inter at 64px with tight tracking.

Typography used on linear.app

Type scale observed: 12, 13, 14, 16, 64. Line-heights cluster at 1.5× for body, 1.0× for the hero. Letter-spacing tightens to roughly −0.13px on small text and −1.4px on the hero.

Spacing, radius, shadow, borders

Linear design tokens

Spacing · Hairline
2px
Spacing · Tight
4px
Spacing · Small
8px
Spacing · Base
12px
Spacing · Medium
16px
Spacing · Section
24px
Spacing · Large
48px
Spacing · Hero pad
72px
Spacing · Hero gutter
146px
Radius · Small
4px
Radius · Button
6px
Radius · Card
12px
Radius · Pill
9999px
Border · Hairline
1px solid #2a2b2e
Shadow · xs
0 0 2px rgba(0,0,0,0.4)
Shadow · sm
0 1px 1px rgba(0,0,0,0.3)
Shadow · md
0 3px 2px rgba(0,0,0,0.25)
Shadow · lg
0 8px 2px rgba(0,0,0,0.2)
Type · Caption
12px / 1.4
Type · Small
13px / 1.5
Type · Body
16px / 1.5
Type · Hero
64px / 1.0, tracking -0.022em

Tailwind v4 theme

CSS-first, @theme block. Color names avoid the xs–9xl range so they don't collide with font-size utilities.

DESIGN.md

Implementation notes

  • Tailwind v4 only. No tailwind.config.js. The theme lives in CSS via @theme { ... } and is consumed by utilities automatically.
  • Color naming. Tokens are bg-canvas, text-ink, border-border, bg-accent, text-accent-foreground. Avoid xs/sm/base/lg/xl for colors — those collide with font-size utilities.
  • Font loading. Self-host Inter (variable, 400–600) and Berkeley Mono. Add font-feature-settings: "cv11", "ss01" on Inter for the Linear-style alternate g.
  • Dark mode. This theme is dark-only. If you need a light variant, duplicate the @theme block under a @media (prefers-color-scheme: light) or a .light class scope and remap the same token names.
  • Borders. Use border-border (1px) by default. Reserve border-accent for focus rings.
  • Shadows. Apply via shadow-xs / shadow-sm / shadow-md / shadow-lg. The ladder is short on purpose — don't add custom shadows.
  • Spacing. Prefer the named tokens (p-medium, gap-section) over arbitrary values. The hero gutter (146px) is the one exception — use px-[146px] or a --spacing-hero-gutter token if you reuse it.
  • Type pairing. Inter for everything UI. Berkeley Mono only inside <code>, <kbd>, or .font-mono blocks. Don't mix them in the same paragraph.
  • Buttons. Primary = bg-accent text-accent-foreground. Secondary = bg-surface-raised text-ink border-border. Ghost = text-muted hover:text-ink.
  • Cards. bg-surface-raised border border-border rounded-card p-medium shadow-sm. Reserve shadow-md/shadow-lg for popovers and modals.
  • Hero block. text-hero text-ink max-w-[720px] tracking-[-0.022em] leading-[1]. Subhead is text-body text-muted.
  • Validation. The palette above is proposed from the rendered screenshot — confirm against the live linear.app before shipping. The exact color_role data wasn't retained on this saved capture, so the hex values are a starting point, not a measured fact.