№ ui-shadcn-com

Ui Shadcn

Cool, precise, grayscale grid – crisp sans-serif geometry, vast open digital space.

Component Playgroundminimalism swiss brutalism developer toolslight

The design prioritizes clarity and functionality through a stark, grid-based layout. Typography is clean and legible, with a focus on hierarchy and modularity. The overall mood is efficient and straightforward, reflecting a developer-focused tool. · ui library, component documentation, developer tools, shadcn ui, design system, code examples, interactive preview

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#7f7f7f
OKLCHoklch(59.6% 0.000 90)
RoleDominant
find sites →
Hex#424242
OKLCHoklch(37.9% 0.000 90)
RoleSurface
find sites →
Hex#bcbcbc
OKLCHoklch(79.5% 0.000 90)
RoleInk
find sites →
Hex#7c7c7c
OKLCHoklch(58.6% 0.000 90)
RoleAccent
find sites →
Hex#c0c0c0
OKLCHoklch(80.8% 0.000 90)
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	Geist	48px	600	1.1	-2.4px	Aa Bb Cc
body	Geist	16px	400	1.5	0	Aa Bb Cc
caption	Geist	14px	500	1.43	0	Aa Bb Cc
button	Geist	14px	500	1.43	0	Aa Bb Cc

Spacing scale

4px

6px

8px

12px

16px

20px

24px

48px

80px

Radius scale

0px

4px

5px

6px

8px

10px

14px

18px

20px

22px

24px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #7f7f7f;
  --color-surface: #424242;
  --color-ink: #bcbcbc;
  --color-accent: #7c7c7c;
  --color-detail: #c0c0c0;
}

/* CSS variables exposed by source */
:root {
  --border: lab(90.952% 0 -.0000119209);
  --color-zinc-100: lab(96.1634% .0993311 -.364041);
  --color-zinc-200: lab(90.6853% .399232 -1.45452);
  --color-slate-200: lab(91.7353% -.998765 -4.76968);
  --color-sky-500: lab(63.3038% -18.433 -51.0407);
  --color-pink-500: lab(56.9303% 76.8162 -8.07021);
  --color-violet-600: lab(41.088% 68.9966 -91.995);
  --color-orange-600: lab(57.1026% 64.2584 89.8886);
  --color-red-900: lab(28.5139% 44.5539 29.0463);
  --color-orange-800: lab(37.1566% 46.6433 50.5562);
  --color-neutral-600: lab(34.924% 0 0);
  --color-teal-400: lab(76.0109% -53.3483 -2.27906);
  --primary-foreground: lab(98.26% 0 0);
  --color-blue-700: lab(36.9089% 35.0961 -85.6872);
  --color-neutral-300: lab(84.92% 0 -.0000119209);
  --color-slate-500: lab(48.0876% -2.03595 -16.5814);
  --color-purple-800: lab(30.6017% 56.7637 -64.4751);
  --color-orange-900: lab(30.2951% 36.0434 37.671);
  --surface-foreground: lab(0% 0 0);
  --text-base--line-height: calc(1.5 / 1);
  --radius-4xl: calc(.625rem * 2.6);
  --color-orange-50: lab(97.7008% 1.53735 5.90649);
  --color-neutral-200: lab(90.952% 0 -.0000119209);
  --color-blue-300: lab(77.5052% -6.4629 -36.42);
  --color-card-foreground: lab(0% 0 0);
  --color-yellow-400: lab(83.2664% 8.65132 106.895);
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-amber-300: lab(86.4156% 6.13147 78.3961);
  --color-gray-500: lab(47.7841% -.393182 -10.0268);
  --color-primary-foreground: lab(98.26% 0 0);
  --color-zinc-50: lab(98.26% 0 0);
  --color-sidebar: lab(98.26% 0 0);
  --color-green-500: lab(70.5521% -66.5147 45.8073);
  --color-sidebar-border: lab(90.952% 0 -.0000119209);
  --color-white: #fff;
  --color-sky-600: lab(51.7754% -11.4712 -49.8349);
  --color-gray-400: lab(65.9269% -.832707 -8.17473);
  --color-blue-400: lab(65.0361% -1.42065 -56.9802);
  --color-popover: lab(100% 0 0);
  --color-slate-400: lab(65.5349% -2.25151 -14.5072);
  --color-stone-900: lab(9.03835% 1.15298 1.92955);
  --radius-sm: calc(.625rem * .6);
  --color-accent: lab(96.52% -.0000298023 .0000119209);
  --color-yellow-300: lab(89.7033% -.480294 84.4917);
  --font-weight-bold: 700;
  --color-zinc-950: lab(2.51107% .242703 -.886115);
  --color-gray-100: lab(96.1596% -.0823438 -1.13575);
  --color-input: lab(90.952% 0 -.0000119209);
  --color-purple-600: lab(43.0295% 75.21 -86.5669);
  --color-teal-900: lab(29.506% -21.4706 -3.59886);
  --color-violet-800: lab(29.3188% 57.7986 -76.1493);
  --text-xs--line-height: calc(1 / .75);
  --color-neutral-700: lab(27.036% 0 0);
  --color-violet-500: lab(49.9355% 55.1776 -81.8963);
  --color-sky-50: lab(97.3623% -2.33802 -4.13098);
  --radius-2xl: calc(.625rem * 1.8);
  --radius-md: calc(.625rem * .8);
  --color-blue-800: lab(30.2514% 27.7853 -70.2699);
  --color-neutral-900: lab(7.78201% -.0000149012 0);
  --radius-lg: .625rem;
}

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 Ui Shadcn.
Reference design system (extracted from the live site):
- Palette: #7f7f7f, #424242, #bcbcbc, #7c7c7c, #c0c0c0
- Typefaces: Geist
- Macrostructure: Component Playground
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/ui-shadcn-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Geist

48px

600

1.1

-2.4px

Aa Bb Cc

body

Geist

16px

400

1.5

Aa Bb Cc

caption

Geist

14px

500

1.43

Aa Bb Cc

button

Geist

14px

500

1.43

Aa Bb Cc

:root { --color-dominant: #7f7f7f; --color-surface: #424242; --color-ink: #bcbcbc; --color-accent: #7c7c7c; --color-detail: #c0c0c0; } /* CSS variables exposed by source */ :root { --border: lab(90.952% 0 -.0000119209); --color-zinc-100: lab(96.1634% .0993311 -.364041); --color-zinc-200: lab(90.6853% .399232 -1.45452); --color-slate-200: lab(91.7353% -.998765 -4.76968); --color-sky-500: lab(63.3038% -18.433 -51.0407); --color-pink-500: lab(56.9303% 76.8162 -8.07021); --color-violet-600: lab(41.088% 68.9966 -91.995); --color-orange-600: lab(57.1026% 64.2584 89.8886); --color-red-900: lab(28.5139% 44.5539 29.0463); --color-orange-800: lab(37.1566% 46.6433 50.5562); --color-neutral-600: lab(34.924% 0 0); --color-teal-400: lab(76.0109% -53.3483 -2.27906); --primary-foreground: lab(98.26% 0 0); --color-blue-700: lab(36.9089% 35.0961 -85.6872); --color-neutral-300: lab(84.92% 0 -.0000119209); --color-slate-500: lab(48.0876% -2.03595 -16.5814); --color-purple-800: lab(30.6017% 56.7637 -64.4751); --color-orange-900: lab(30.2951% 36.0434 37.671); --surface-foreground: lab(0% 0 0); --text-base--line-height: calc(1.5 / 1); --radius-4xl: calc(.625rem * 2.6); --color-orange-50: lab(97.7008% 1.53735 5.90649); --color-neutral-200: lab(90.952% 0 -.0000119209); --color-blue-300: lab(77.5052% -6.4629 -36.42); --color-card-foreground: lab(0% 0 0); --color-yellow-400: lab(83.2664% 8.65132 106.895); --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-amber-300: lab(86.4156% 6.13147 78.3961); --color-gray-500: lab(47.7841% -.393182 -10.0268); --color-primary-foreground: lab(98.26% 0 0); --color-zinc-50: lab(98.26% 0 0); --color-sidebar: lab(98.26% 0 0); --color-green-500: lab(70.5521% -66.5147 45.8073); --color-sidebar-border: lab(90.952% 0 -.0000119209); --color-white: #fff; --color-sky-600: lab(51.7754% -11.4712 -49.8349); --color-gray-400: lab(65.9269% -.832707 -8.17473); --color-blue-400: lab(65.0361% -1.42065 -56.9802); --color-popover: lab(100% 0 0); --color-slate-400: lab(65.5349% -2.25151 -14.5072); --color-stone-900: lab(9.03835% 1.15298 1.92955); --radius-sm: calc(.625rem * .6); --color-accent: lab(96.52% -.0000298023 .0000119209); --color-yellow-300: lab(89.7033% -.480294 84.4917); --font-weight-bold: 700; --color-zinc-950: lab(2.51107% .242703 -.886115); --color-gray-100: lab(96.1596% -.0823438 -1.13575); --color-input: lab(90.952% 0 -.0000119209); --color-purple-600: lab(43.0295% 75.21 -86.5669); --color-teal-900: lab(29.506% -21.4706 -3.59886); --color-violet-800: lab(29.3188% 57.7986 -76.1493); --text-xs--line-height: calc(1 / .75); --color-neutral-700: lab(27.036% 0 0); --color-violet-500: lab(49.9355% 55.1776 -81.8963); --color-sky-50: lab(97.3623% -2.33802 -4.13098); --radius-2xl: calc(.625rem * 1.8); --radius-md: calc(.625rem * .8); --color-blue-800: lab(30.2514% 27.7853 -70.2699); --color-neutral-900: lab(7.78201% -.0000149012 0); --radius-lg: .625rem; }

Build a landing page in the visual style of Ui Shadcn. Reference design system (extracted from the live site): - Palette: #7f7f7f, #424242, #bcbcbc, #7c7c7c, #c0c0c0 - Typefaces: Geist - Macrostructure: Component Playground 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/ui-shadcn-com