Penpot
Ecosystem Index
Deep charcoal expanse, crisp sans-serif geometry, glowing accent highlights.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Source Sans Pro | 48px | 700 | 1 | 0 | Aa Bb Cc |
| h2 | Source Sans Pro | 18px | 600 | 1.56 | 0 | Aa Bb Cc |
| h3 | Source Sans Pro | 20px | 600 | 1.4 | 0 | Aa Bb Cc |
| body | Source Sans Pro | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Source Sans Pro | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Source Sans Pro | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fcd41f;
--color-surface: #1c3b68;
--color-ink: #f3d484;
--color-accent: #5472b0;
--color-detail: #b8b8bc;
}
/* CSS variables exposed by source */
:root {
--color-slate-200: oklch(92.9% .013 255.508);
--color-sky-500: oklch(68.5% .169 237.323);
--color-pink-500: oklch(65.6% .241 354.308);
--color-orange-600: oklch(64.6% .222 41.116);
--color-violet-600: oklch(54.1% .281 293.009);
--color-red-900: oklch(39.6% .141 25.723);
--color-orange-800: oklch(47% .157 37.304);
--color-neutral-600: oklch(43.9% 0 none);
--color-teal-400: oklch(77.7% .152 181.912);
--color-pink-950: oklch(28.4% .109 3.907);
--color-blue-700: oklch(48.8% .243 264.376);
--color-slate-500: oklch(55.4% .046 257.417);
--color-orange-900: oklch(40.8% .123 38.172);
--text-base--line-height: 1.5rem;
--color-orange-50: oklch(98% .016 73.684);
--radius-4xl: 2rem;
--color-cyan-700: oklch(52% .105 223.128);
--color-blue-300: oklch(80.9% .105 251.813);
--color-gray-300: oklch(87.2% .01 258.338);
--color-slate-300: oklch(86.9% .022 252.894);
--color-cyan-200: oklch(91.7% .08 205.041);
--color-amber-300: oklch(87.9% .169 91.605);
--color-gray-500: oklch(55.1% .027 264.364);
--text-9xl--line-height: 1;
--color-white: #fff;
--color-sky-600: oklch(58.8% .158 241.966);
--color-gray-400: oklch(70.7% .022 261.325);
--color-blue-400: oklch(70.7% .165 254.624);
--color-slate-400: oklch(70.4% .04 256.788);
--color-pink-50: oklch(97.1% .014 343.198);
--radius-sm: .25rem;
--font-weight-bold: 700;
--color-gray-100: oklch(96.7% .003 264.542);
--color-teal-950: oklch(27.7% .046 192.524);
--color-emerald-200: oklch(90.5% .093 164.15);
--text-smd: .94rem;
--color-teal-900: oklch(38.6% .063 188.416);
--color-violet-800: oklch(43.2% .232 292.759);
--text-xs--line-height: 1rem;
--color-violet-500: oklch(60.6% .25 292.717);
--color-fuchsia-600: oklch(59.1% .293 322.896);
--color-sky-50: oklch(97.7% .013 236.62);
--color-lime-200: oklch(93.8% .127 124.321);
--radius-2xl: 1rem;
--radius-md: .375rem;
--color-blue-800: oklch(42.4% .199 265.638);
--color-pink-100: oklch(94.8% .028 342.258);
--radius-lg: .5rem;
--text-xl: 1.25rem;
--color-cyan-50: oklch(98.4% .019 200.873);
--color-blue-100: oklch(93.2% .032 255.585);
--color-violet-950: oklch(28.3% .141 291.089);
--text-9xl: 8rem;
--color-violet-300: oklch(81.1% .111 293.571);
--color-red-300: oklch(80.8% .114 19.571);
--color-cyan-500: oklch(71.5% .143 215.221);
--color-sky-300: oklch(82.8% .111 230.318);
--color-orange-500: oklch(70.5% .213 47.604);
--color-slate-800: oklch(27.9% .041 260.031);
--color-emerald-900: oklch(37.8% .077 168.94);
}Drop-in prompt
Build a landing page in the visual style of Huggingface.
Reference design system (extracted from the live site):
- Palette: #fcd41f, #1c3b68, #f3d484, #5472b0, #b8b8bc
- Typefaces: Source Sans Pro
- Macrostructure: Ecosystem Index
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/huggingface-co