№ tanstack-com

Tanstack

Cool, spacious code sanctuary: crisp monospace on a deep, calming teal expanse.

Feature Stackminimalism swiss brutalism developer toolslight

The hero uses a playful illustration to introduce the product, while the layout is clean and functional, prioritizing clear calls to action and concise information. The overall feel is modern and approachable, avoiding excessive ornamentation. · developer tools hero, saas landing page, technical website, open source design, minimalist tech, modern developer, application stack, website showcase

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: muted · monochrome · earthy

SwatchHexOKLCHSuggested roleCopy

Hex#e6ab35
OKLCHoklch(77.7% 0.144 80)
RoleDominant
find sites →
Hex#16989e
OKLCHoklch(61.9% 0.102 200)
RoleSurface
find sites →
Hex#edc494
OKLCHoklch(84.5% 0.078 71)
RoleInk
find sites →
Hex#3b893e
OKLCHoklch(56.3% 0.134 144)
RoleAccent
find sites →
Hex#b7bbbc
OKLCHoklch(78.9% 0.005 214)
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	Bricolage Grotesque	72px	800	1.06	-0.8px	Aa Bb Cc
h3	Bricolage Grotesque	64px	500	1.05	-0.8px	Aa Bb Cc
body	Inter	16px	500	1.5	0	Aa Bb Cc
caption	Inter	14px	600	1.43	0	Aa Bb Cc
button	Inter	16px	500	1.5	0	Aa Bb Cc

Spacing scale

4px

6px

8px

16px

96px

Radius scale

0px

6px

8px

10px

11px

12px

16px

17px

20px

32px

36px

Export

:root {
  --color-dominant: #e6ab35;
  --color-surface: #16989e;
  --color-ink: #edc494;
  --color-accent: #3b893e;
  --color-detail: #b7bbbc;
}

/* CSS variables exposed by source */
:root {
  --color-ds-terracotta-300: #e06e49;
  --text-ds-mono-2xs--line-height: 14px;
  --text-ds-eyebrow-md: 11px;
  --color-zinc-200: oklch(92% .004 286.32);
  --color-discord: #536bbd;
  --color-ds-neutral-200: #aea691;
  --text-ds-body-xs--font-weight: 500;
  --color-pink-500: oklch(65.6% .241 354.308);
  --color-orange-600: oklch(64.6% .222 41.116);
  --text-ds-display-sm: 40px;
  --color-orange-800: oklch(47% .157 37.304);
  --color-teal-400: oklch(77.7% .152 181.912);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-category-ui-bright: #61adbf;
  --text-ds-display-2xl--font-weight: 800;
  --text-ds-heading-2--font-weight: 600;
  --text-ds-mono-xs--line-height: 16px;
  --color-purple-800: oklch(43.8% .218 303.724);
  --color-ds-amber-200: #fae884;
  --color-background-subtle: #fafafa;
  --text-ds-mono-sm: 14px;
  --color-twine-500: #ae7d44;
  --text-base--line-height: calc(1.5 / 1);
  --font-shop-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-ds-display-sm--font-weight: 600;
  --text-shop-title: 18px;
  --color-cyan-700: oklch(52% .105 223.128);
  --color-gray-300: #d6cfbd;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --text-ds-eyebrow-md--letter-spacing: 1.75px;
  --text-ds-mono-display--line-height: 31px;
  --color-cyan-200: oklch(91.7% .08 205.041);
  --color-amber-300: oklch(87.9% .169 91.605);
  --color-gray-500: #7c7464;
  --text-ds-heading-3--font-weight: 800;
  --color-icon-warning: #ffa216;
  --color-lib-store: #d3481b;
  --color-green-500: oklch(72.3% .219 149.579);
  --text-ds-mono-xs--font-weight: 400;
  --color-white: #fff;
  --color-sky-600: oklch(58.8% .158 241.966);
  --text-ds-body-md--font-weight: 400;
  --color-gray-400: #aea691;
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-pink-50: oklch(97.1% .014 343.198);
  --color-slate-400: oklch(70.4% .04 256.788);
  --radius-sm: .25rem;
  --color-text-accent: #003e53;
  --text-ds-display-xl--line-height: 76px;
  --color-category-performance-tint: #fef6cc;
  --color-ds-amber-100: #fef6cc;
  --color-zinc-950: oklch(14.1% .005 285.823);
  --color-gray-100: #f5f2e9;
  --color-category-tooling-glow: 171 165 148;
  --text-ds-mono-caps-xs--font-weight: 500;
  --color-purple-600: oklch(55.8% .288 302.321);
  --color-violet-500: oklch(60.6% .25 292.717);
  --color-fuchsia-600: oklch(59.1% .293 322.896);
  --text-shop-xs: 10.5px;
  --color-lime-200: oklch(93.8% .127 124.321);
}

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 Tanstack.
Reference design system (extracted from the live site):
- Palette: #e6ab35, #16989e, #edc494, #3b893e, #b7bbbc
- Typefaces: Bricolage Grotesque, Inter
- Macrostructure: Feature Stack
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/tanstack-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Bricolage Grotesque

72px

800

1.06

-0.8px

Aa Bb Cc

Bricolage Grotesque

64px

500

1.05

-0.8px

Aa Bb Cc

body

Inter

16px

500

1.5

Aa Bb Cc

caption

Inter

14px

600

1.43

Aa Bb Cc

button

Inter

16px

500

1.5

Aa Bb Cc

:root { --color-dominant: #e6ab35; --color-surface: #16989e; --color-ink: #edc494; --color-accent: #3b893e; --color-detail: #b7bbbc; } /* CSS variables exposed by source */ :root { --color-ds-terracotta-300: #e06e49; --text-ds-mono-2xs--line-height: 14px; --text-ds-eyebrow-md: 11px; --color-zinc-200: oklch(92% .004 286.32); --color-discord: #536bbd; --color-ds-neutral-200: #aea691; --text-ds-body-xs--font-weight: 500; --color-pink-500: oklch(65.6% .241 354.308); --color-orange-600: oklch(64.6% .222 41.116); --text-ds-display-sm: 40px; --color-orange-800: oklch(47% .157 37.304); --color-teal-400: oklch(77.7% .152 181.912); --color-blue-700: oklch(48.8% .243 264.376); --color-category-ui-bright: #61adbf; --text-ds-display-2xl--font-weight: 800; --text-ds-heading-2--font-weight: 600; --text-ds-mono-xs--line-height: 16px; --color-purple-800: oklch(43.8% .218 303.724); --color-ds-amber-200: #fae884; --color-background-subtle: #fafafa; --text-ds-mono-sm: 14px; --color-twine-500: #ae7d44; --text-base--line-height: calc(1.5 / 1); --font-shop-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --text-ds-display-sm--font-weight: 600; --text-shop-title: 18px; --color-cyan-700: oklch(52% .105 223.128); --color-gray-300: #d6cfbd; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --text-ds-eyebrow-md--letter-spacing: 1.75px; --text-ds-mono-display--line-height: 31px; --color-cyan-200: oklch(91.7% .08 205.041); --color-amber-300: oklch(87.9% .169 91.605); --color-gray-500: #7c7464; --text-ds-heading-3--font-weight: 800; --color-icon-warning: #ffa216; --color-lib-store: #d3481b; --color-green-500: oklch(72.3% .219 149.579); --text-ds-mono-xs--font-weight: 400; --color-white: #fff; --color-sky-600: oklch(58.8% .158 241.966); --text-ds-body-md--font-weight: 400; --color-gray-400: #aea691; --color-blue-400: oklch(70.7% .165 254.624); --color-pink-50: oklch(97.1% .014 343.198); --color-slate-400: oklch(70.4% .04 256.788); --radius-sm: .25rem; --color-text-accent: #003e53; --text-ds-display-xl--line-height: 76px; --color-category-performance-tint: #fef6cc; --color-ds-amber-100: #fef6cc; --color-zinc-950: oklch(14.1% .005 285.823); --color-gray-100: #f5f2e9; --color-category-tooling-glow: 171 165 148; --text-ds-mono-caps-xs--font-weight: 500; --color-purple-600: oklch(55.8% .288 302.321); --color-violet-500: oklch(60.6% .25 292.717); --color-fuchsia-600: oklch(59.1% .293 322.896); --text-shop-xs: 10.5px; --color-lime-200: oklch(93.8% .127 124.321); }

Build a landing page in the visual style of Tanstack. Reference design system (extracted from the live site): - Palette: #e6ab35, #16989e, #edc494, #3b893e, #b7bbbc - Typefaces: Bricolage Grotesque, Inter - Macrostructure: Feature Stack 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/tanstack-com