№ linear-app--blog

Linear — Blog

Deep charcoal expanse, crisp sans-serif precision, expansive negative space hums.

Specimenminimalism dark mode monochrome brutalism saas developer toolsdark

The page prioritizes clarity and functionality with a stark, dark aesthetic. Typography is clean and functional, emphasizing content hierarchy. The overall mood is focused and efficient, prioritizing usability over visual embellishment. · saas dashboard, developer tools, issue tracker, linear app, dark ui, minimalist dashboard, technical interface, project management, workflow tool, ai development

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#b69a24
OKLCHoklch(69.2% 0.132 95)
RoleDominant
find sites →
Hex#947c0c
OKLCHoklch(59.2% 0.118 95)
RoleSurface
find sites →
Hex#e9d890
OKLCHoklch(88.0% 0.093 96)
RoleInk
find sites →
Hex#80848c
OKLCHoklch(61.3% 0.013 264)
RoleAccent
find sites →
Hex#c4cacc
OKLCHoklch(83.5% 0.007 220)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Inter Variable	64px	510	1	-1.408px	Aa Bb Cc
h2	Inter Variable	48px	510	1	-1.056px	Aa Bb Cc
h3	Inter Variable	20px	590	1.33	-0.24px	Aa Bb Cc
body	Inter Variable	16px	400	1.5	0	Aa Bb Cc
button	Inter Variable	13px	400	1.5	0	Aa Bb Cc

Spacing scale

8px

14px

17px

20px

24px

32px

40px

72px

80px

128px

224px

Radius scale

0px

2px

4px

6px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #b69a24;
  --color-surface: #947c0c;
  --color-ink: #e9d890;
  --color-accent: #80848c;
  --color-detail: #c4cacc;
}

/* CSS variables exposed by source */
:root {
  --font-variations: "opsz" auto;
  --text-large-line-height: 1.6;
  --color-overlay-dim-rgb: 255, 255, 255;
  --text-micro-size: .75rem;
  --font-size-title1: 2.25rem;
  --font-settings: "cv01", "ss03";
  --color-text-secondary: #d0d6e0;
  --color-text-tertiary: #8a8f98;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
  --text-mini-letter-spacing: -.01em;
  --text-regular-size: .9375rem;
  --text-regular-letter-spacing: -.011em;
  --font-size-miniPlus: .75rem;
  --shadow-low: 0px 2px 4px #0000001a;
  --font-size-microPlus: .6875rem;
  --color-line-tertiary: #18191a;
  --color-white: #fff;
  --text-tiny: .625rem / 1.5 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --text-small-line-height: calc(21 / 14);
  --color-accent: #7170ff;
  --font-weight-bold: 680;
  --text-large: 1.0625rem / 1.6 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --text-tiny-letter-spacing: -.015em;
  --color-border-translucent: #ffffff0d;
  --color-selection-bg: color-mix(in lch, #5e6ad2, black 10%);
  --text-small-size: .875rem;
  --color-line-secondary: #202122;
  --color-bg-level-3: #191a1b;
  --color-line-primary: #37393a;
  --text-micro: .75rem / 1.4 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --radius-rounded: 9999px;
  --color-fg-primary: #f7f8f8;
  --font-size-micro: .6875rem;
  --color-bg-quinary: #282828;
  --radius-circle: 50%;
  --font-size-title2: 1.5rem;
  --color-text-quaternary: #62666d;
  --color-alpha: 255;
  --text-mini: .8125rem / 1.5 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --radius-8: 8px;
  --font-size-small: .8125rem;
  --shadow-high: 0px 7px 32px #00000059;
  --radius-12: 12px;
  --shadow-tiny: 0px 0px 0px transparent;
  --text-micro-letter-spacing: 0;
  --color-border-secondary: #34343a;
  --font-size-large: 1.125rem;
  --radius-32: 32px;
  --color-accent-tint: #18182f;
  --text-regular: .9375rem / 1.6 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --color-accent-hover: #828fff;
  --font-regular: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --color-line-quaternary: #141515;
  --font-size-regularPlus: .9375rem;
  --rounded-full: 9999px;
  --color-black: #000;
  --color-border-tertiary: #3e3e44;
  --text-mini-size: .8125rem;
  --color-link-hover: #fff;
  --font-monospace: "Berkeley Mono", ui-monospace, "SF Mono", "Menlo", monospace;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Linear — Blog.
Reference design system (extracted from the live site):
- Palette: #b69a24, #947c0c, #e9d890, #80848c, #c4cacc
- Typefaces: Inter Variable
- Macrostructure: Specimen
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/linear-app--blog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter Variable

64px

510

-1.408px

Aa Bb Cc

Inter Variable

48px

510

-1.056px

Aa Bb Cc

Inter Variable

20px

590

1.33

-0.24px

Aa Bb Cc

body

Inter Variable

16px

400

1.5

Aa Bb Cc

button

Inter Variable

13px

400

1.5

Aa Bb Cc

:root { --color-dominant: #b69a24; --color-surface: #947c0c; --color-ink: #e9d890; --color-accent: #80848c; --color-detail: #c4cacc; } /* CSS variables exposed by source */ :root { --font-variations: "opsz" auto; --text-large-line-height: 1.6; --color-overlay-dim-rgb: 255, 255, 255; --text-micro-size: .75rem; --font-size-title1: 2.25rem; --font-settings: "cv01", "ss03"; --color-text-secondary: #d0d6e0; --color-text-tertiary: #8a8f98; --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"; --text-mini-letter-spacing: -.01em; --text-regular-size: .9375rem; --text-regular-letter-spacing: -.011em; --font-size-miniPlus: .75rem; --shadow-low: 0px 2px 4px #0000001a; --font-size-microPlus: .6875rem; --color-line-tertiary: #18191a; --color-white: #fff; --text-tiny: .625rem / 1.5 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif; --text-small-line-height: calc(21 / 14); --color-accent: #7170ff; --font-weight-bold: 680; --text-large: 1.0625rem / 1.6 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif; --text-tiny-letter-spacing: -.015em; --color-border-translucent: #ffffff0d; --color-selection-bg: color-mix(in lch, #5e6ad2, black 10%); --text-small-size: .875rem; --color-line-secondary: #202122; --color-bg-level-3: #191a1b; --color-line-primary: #37393a; --text-micro: .75rem / 1.4 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif; --radius-rounded: 9999px; --color-fg-primary: #f7f8f8; --font-size-micro: .6875rem; --color-bg-quinary: #282828; --radius-circle: 50%; --font-size-title2: 1.5rem; --color-text-quaternary: #62666d; --color-alpha: 255; --text-mini: .8125rem / 1.5 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif; --radius-8: 8px; --font-size-small: .8125rem; --shadow-high: 0px 7px 32px #00000059; --radius-12: 12px; --shadow-tiny: 0px 0px 0px transparent; --text-micro-letter-spacing: 0; --color-border-secondary: #34343a; --font-size-large: 1.125rem; --radius-32: 32px; --color-accent-tint: #18182f; --text-regular: .9375rem / 1.6 "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif; --color-accent-hover: #828fff; --font-regular: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif; --color-line-quaternary: #141515; --font-size-regularPlus: .9375rem; --rounded-full: 9999px; --color-black: #000; --color-border-tertiary: #3e3e44; --text-mini-size: .8125rem; --color-link-hover: #fff; --font-monospace: "Berkeley Mono", ui-monospace, "SF Mono", "Menlo", monospace; }

Build a landing page in the visual style of Linear — Blog. Reference design system (extracted from the live site): - Palette: #b69a24, #947c0c, #e9d890, #80848c, #c4cacc - Typefaces: Inter Variable - Macrostructure: Specimen Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/linear-app--blog