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

[Open the live Fudge conversation](https://design.withfudge.com/share/3f43igw13a/i_m_using_linear_app_as_a_reference_for_a_new_product_site_t/)

Last updated: 2026-07-30

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

[![Linear – The system for product development](https://pin.fontofweb.com/10441?format=jpg)](https://design.withfudge.com/share/pin-10441)

[Linear – The system for product development](https://design.withfudge.com/share/pin-10441)

## 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

- **Inter** — weight 400 · size 16px
- **Inter** — weight 500 · size 13px
- **Inter** — weight 400 · size 64px
- **Berkeley Mono** — weight 400 · size 13px

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

```fudge-values
{"title":"Linear design tokens","values":[{"category":"Spacing","label":"Hairline","value":"2px"},{"category":"Spacing","label":"Tight","value":"4px"},{"category":"Spacing","label":"Small","value":"8px"},{"category":"Spacing","label":"Base","value":"12px"},{"category":"Spacing","label":"Medium","value":"16px"},{"category":"Spacing","label":"Section","value":"24px"},{"category":"Spacing","label":"Large","value":"48px"},{"category":"Spacing","label":"Hero pad","value":"72px"},{"category":"Spacing","label":"Hero gutter","value":"146px"},{"category":"Radius","label":"Small","value":"4px"},{"category":"Radius","label":"Button","value":"6px"},{"category":"Radius","label":"Card","value":"12px"},{"category":"Radius","label":"Pill","value":"9999px"},{"category":"Border","label":"Hairline","value":"1px solid #2a2b2e"},{"category":"Shadow","label":"xs","value":"0 0 2px rgba(0,0,0,0.4)"},{"category":"Shadow","label":"sm","value":"0 1px 1px rgba(0,0,0,0.3)"},{"category":"Shadow","label":"md","value":"0 3px 2px rgba(0,0,0,0.25)"},{"category":"Shadow","label":"lg","value":"0 8px 2px rgba(0,0,0,0.2)"},{"category":"Type","label":"Caption","value":"12px / 1.4"},{"category":"Type","label":"Small","value":"13px / 1.5"},{"category":"Type","label":"Body","value":"16px / 1.5"},{"category":"Type","label":"Hero","value":"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.

```css
@import "tailwindcss";

@theme {
  /* Color */
  --color-canvas: #08090a;
  --color-surface: #131316;
  --color-surface-raised: #1b1c1f;
  --color-border: #2a2b2e;
  --color-muted: #8a8b8d;
  --color-ink: #f7f8f8;
  --color-accent: #5e6ad2;
  --color-accent-soft: #8e8ae0;
  --color-accent-foreground: #ffffff;

  /* Spacing (extends Tailwind's 0.25rem grid) */
  --spacing-hairline: 2px;
  --spacing-tight: 4px;
  --spacing-small: 8px;
  --spacing-base: 12px;
  --spacing-medium: 16px;
  --spacing-section: 24px;
  --spacing-large: 48px;
  --spacing-hero: 72px;

  /* Radius */
  --radius-button: 6px;
  --radius-card: 12px;
  --radius-pill: 9999px;

  /* Shadow */
  --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 */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Berkeley Mono", ui-monospace, "JetBrains Mono", monospace;

  --text-caption: 12px;
  --text-caption--line-height: 1.4;
  --text-small: 13px;
  --text-small--line-height: 1.5;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-hero: 64px;
  --text-hero--line-height: 1;
  --text-hero--letter-spacing: -0.022em;
}
```

## DESIGN.md

```markdown
# Design language

A dark, restrained system built for product surfaces. One accent, lots of
whitespace, very subtle elevation.

## Principles

1. **Dark by default.** Canvas is near-black. Cards sit one step lighter.
   Borders are hairlines, not boxes.
2. **One accent.** Violet for primary action only. Everything else is gray.
3. **Type does the work.** Inter at 16px for body, 64px for hero. Tracking
   tightens as size grows.
4. **Flat with depth.** Surfaces are flat; depth comes from a 4-step shadow
   ladder and a single raised surface color.
5. **Mono for code.** Berkeley Mono for identifiers, snippets, and any
   machine-readable string.

## Tokens

- Color: canvas, surface, surface-raised, border, muted, ink, accent,
  accent-soft, accent-foreground.
- Spacing: hairline 2, tight 4, small 8, base 12, medium 16, section 24,
  large 48, hero 72.
- Radius: button 6, card 12, pill 9999.
- Shadow: xs / sm / md / lg.
- Type: caption 12, small 13, body 16, hero 64.

## Component rules

- **Button.** Radius 6, padding 8 × 12, accent background, ink foreground.
  Hover lifts to accent-soft.
- **Card.** Surface-raised background, 1px border, radius 12, padding 16.
- **Input.** Surface background, border, radius 6, padding 8 × 12.
- **Hero.** 64px Inter, tracking −0.022em, line-height 1.0, max-width 720px.
- **Meta.** 13px Inter, muted color.

## Don't

- Don't introduce a second accent color.
- Don't use borders thicker than 1px.
- Don't use shadows outside the four-step ladder.
- Don't set body type below 13px.
```

## 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.