№ nuxt-com

Nuxt

Deep indigo code, crisp sans-serif lines float in a spacious, subtly luminous void.

Feature Stackminimalism dark mode monochrome futurist swiss developer toolsdark

The page uses a stark, dark color palette with a focus on typography and code snippets. The layout is structured with distinct sections, creating a sense of organized information delivery. Visual hierarchy is established through size and weight of text. · vue framework, nuxt js, javascript framework, developer tools, dark ui, code examples, technical website, minimalist design, javascript, web 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: muted · high-contrast · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#04d982
OKLCHoklch(77.9% 0.188 156)
RoleDominant
find sites →
Hex#048454
OKLCHoklch(54.1% 0.123 159)
RoleSurface
find sites →
Hex#7cfcc8
OKLCHoklch(90.4% 0.137 165)
RoleInk
find sites →
Hex#6e7c94
OKLCHoklch(58.4% 0.041 261)
RoleAccent
find sites →
Hex#b4b4bc
OKLCHoklch(77.2% 0.011 286)
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	Public Sans	72px	700	1	-1.8px	Aa Bb Cc
h2	Public Sans	18px	500	1.56	0	Aa Bb Cc
h3	Public Sans	14px	600	1.43	0	Aa Bb Cc
body	Public Sans	16px	400	1.5	0	Aa Bb Cc
caption	Public Sans	14px	500	1.43	0	Aa Bb Cc
button	Public Sans	12px	600	1	0	Aa Bb Cc

Spacing scale

6px

12px

16px

32px

48px

64px

80px

96px

128px

160px

Radius scale

0px

4px

6px

8px

12px

16px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #04d982;
  --color-surface: #048454;
  --color-ink: #7cfcc8;
  --color-accent: #6e7c94;
  --color-detail: #b4b4bc;
}

/* CSS variables exposed by source */
:root {
  --color-sky-500: oklch(68.5% .169 237.323);
  --color-pink-500: oklch(65.6% .241 354.308);
  --color-neutral-600: oklch(44.6% 0.043 257.281);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-old-neutral-800: oklch(26.9% 0 none);
  --color-old-neutral-600: oklch(43.9% 0 none);
  --color-neutral-300: oklch(86.9% 0.022 252.894);
  --text-base--line-height: 1.5;
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-yellow-400: oklch(85.2% .199 91.936);
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-primary-500: #00c16a;
  --color-green-500: #00c16a;
  --color-white: #fff;
  --color-slate-400: oklch(70.4% .04 256.788);
  --font-weight-bold: 700;
  --color-gray-100: oklch(96.7% .003 264.542);
  --text-xs--line-height: 1.33333;
  --color-neutral-700: oklch(37.2% 0.044 257.287);
  --color-old-neutral-950: oklch(14.5% 0 none);
  --color-green-900: #0a5331;
  --text-xl: 1.25rem;
  --color-neutral-100: oklch(96.8% 0.007 247.896);
  --color-green-600: #00a155;
  --color-green-950: #052e16;
  --text-2xl--line-height: 1.33333;
  --spacing: .25rem;
  --text-xl--line-height: 1.4;
  --color-old-neutral-100: oklch(97% 0 none);
  --text-sm: .875rem;
  --color-green-400: #00dc82;
  --color-gray-950: oklch(13% .028 261.692);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-green-200: #b3f5d1;
  --color-old-neutral-200: oklch(92.2% 0 none);
  --color-black: #000;
  --color-neutral-400: oklch(70.4% .04 256.788);
  --text-4xl--line-height: 1.11111;
  --color-old-neutral-400: oklch(70.8% 0 none);
  --text-2xl: 1.5rem;
  --color-indigo-400: oklch(67.3% .182 276.935);
  --text-7xl: 4.5rem;
  --text-lg: 1.125rem;
  --color-neutral-500: oklch(55.4% 0.046 257.417);
  --color-pink-400: oklch(71.8% .202 349.761);
  --text-5xl--line-height: 1;
  --color-green-100: #d9fbe8;
  --color-old-neutral-500: oklch(55.6% 0 none);
  --text-lg--line-height: 1.55556;
  --color-red-400: oklch(70.4% .191 22.216);
  --color-red-500: oklch(63.7% .237 25.331);
  --text-6xl: 3.75rem;
  --text-7xl--line-height: 1;
  --color-old-neutral-900: oklch(20.5% 0 none);
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-green-50: #effdf5;
  --color-slate-950: oklch(12.9% .042 264.695);
  --color-green-800: #016538;
  --font-weight-semibold: 600;
  --color-blue-500: oklch(62.3% .214 259.815);
}

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 Nuxt.
Reference design system (extracted from the live site):
- Palette: #04d982, #048454, #7cfcc8, #6e7c94, #b4b4bc
- Typefaces: Public Sans
- 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/nuxt-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Public Sans

72px

700

-1.8px

Aa Bb Cc

Public Sans

18px

500

1.56

Aa Bb Cc

Public Sans

14px

600

1.43

Aa Bb Cc

body

Public Sans

16px

400

1.5

Aa Bb Cc

caption

Public Sans

14px

500

1.43

Aa Bb Cc

button

Public Sans

12px

600

Aa Bb Cc

:root { --color-dominant: #04d982; --color-surface: #048454; --color-ink: #7cfcc8; --color-accent: #6e7c94; --color-detail: #b4b4bc; } /* CSS variables exposed by source */ :root { --color-sky-500: oklch(68.5% .169 237.323); --color-pink-500: oklch(65.6% .241 354.308); --color-neutral-600: oklch(44.6% 0.043 257.281); --color-blue-700: oklch(48.8% .243 264.376); --color-old-neutral-800: oklch(26.9% 0 none); --color-old-neutral-600: oklch(43.9% 0 none); --color-neutral-300: oklch(86.9% 0.022 252.894); --text-base--line-height: 1.5; --color-gray-300: oklch(87.2% .01 258.338); --color-yellow-400: oklch(85.2% .199 91.936); --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-primary-500: #00c16a; --color-green-500: #00c16a; --color-white: #fff; --color-slate-400: oklch(70.4% .04 256.788); --font-weight-bold: 700; --color-gray-100: oklch(96.7% .003 264.542); --text-xs--line-height: 1.33333; --color-neutral-700: oklch(37.2% 0.044 257.287); --color-old-neutral-950: oklch(14.5% 0 none); --color-green-900: #0a5331; --text-xl: 1.25rem; --color-neutral-100: oklch(96.8% 0.007 247.896); --color-green-600: #00a155; --color-green-950: #052e16; --text-2xl--line-height: 1.33333; --spacing: .25rem; --text-xl--line-height: 1.4; --color-old-neutral-100: oklch(97% 0 none); --text-sm: .875rem; --color-green-400: #00dc82; --color-gray-950: oklch(13% .028 261.692); --color-gray-600: oklch(44.6% .03 256.802); --color-green-200: #b3f5d1; --color-old-neutral-200: oklch(92.2% 0 none); --color-black: #000; --color-neutral-400: oklch(70.4% .04 256.788); --text-4xl--line-height: 1.11111; --color-old-neutral-400: oklch(70.8% 0 none); --text-2xl: 1.5rem; --color-indigo-400: oklch(67.3% .182 276.935); --text-7xl: 4.5rem; --text-lg: 1.125rem; --color-neutral-500: oklch(55.4% 0.046 257.417); --color-pink-400: oklch(71.8% .202 349.761); --text-5xl--line-height: 1; --color-green-100: #d9fbe8; --color-old-neutral-500: oklch(55.6% 0 none); --text-lg--line-height: 1.55556; --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --text-6xl: 3.75rem; --text-7xl--line-height: 1; --color-old-neutral-900: oklch(20.5% 0 none); --color-gray-800: oklch(27.8% .033 256.848); --color-green-50: #effdf5; --color-slate-950: oklch(12.9% .042 264.695); --color-green-800: #016538; --font-weight-semibold: 600; --color-blue-500: oklch(62.3% .214 259.815); }

Build a landing page in the visual style of Nuxt. Reference design system (extracted from the live site): - Palette: #04d982, #048454, #7cfcc8, #6e7c94, #b4b4bc - Typefaces: Public Sans - 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/nuxt-com