Deno
Feature Stack
Pastel gradients and playful sans, soft digital space, feeling approachable and bright.




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 | -apple-system | 30px | 500 | 1.2 | 0 | Aa Bb Cc |
| h2 | -apple-system | 60px | 700 | 1.25 | 0 | Aa Bb Cc |
| h3 | -apple-system | 24px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | -apple-system | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | -apple-system | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | -apple-system | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1376px
:root {
--color-dominant: #fc64b4;
--color-surface: #820245;
--color-ink: #fc84c4;
--color-accent: #80878f;
--color-detail: #bcb4cc;
}
/* CSS variables exposed by source */
:root {
--color-purple-200: oklch(90.2% .063 306.703);
--color-mauve-800: oklch(26.3% .024 320.12);
--color-sky-500: oklch(68.5% .169 237.323);
--color-pink-500: oklch(65.6% .241 354.308);
--color-neutral-600: oklch(43.9% 0 0);
--color-mauve-600: oklch(43.5% .029 321.78);
--color-teal-400: oklch(77.7% .152 181.912);
--color-neutral-300: oklch(87% 0 0);
--color-mauve-50: oklch(98.5% 0 0);
--text-base--line-height: 1.5;
--radius-4xl: 2rem;
--color-neutral-200: oklch(92.2% 0 0);
--color-blue-300: oklch(80.9% .105 251.813);
--color-yellow-400: oklch(85.2% .199 91.936);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-mist-600: oklch(45% .017 213.2);
--color-cyan-200: oklch(91.7% .08 205.041);
--color-green-500: oklch(72.3% .219 149.579);
--color-white: #fff;
--color-blue-400: oklch(70.7% .165 254.624);
--color-pink-50: oklch(97.1% .014 343.198);
--radius-sm: .34375rem;
--font-weight-bold: 700;
--color-mist-300: oklch(87.2% .007 219.6);
--text-xs--line-height: calc(1 / .75);
--color-neutral-700: oklch(37.1% 0 0);
--color-violet-500: oklch(60.6% .25 292.717);
--color-lime-200: oklch(93.8% .127 124.321);
--radius-md: .515625rem;
--radius-2xl: 1.375rem;
--color-pink-100: oklch(94.8% .028 342.258);
--color-neutral-900: oklch(20.5% 0 0);
--text-xl: 1.25rem;
--radius-lg: .6765rem;
--color-neutral-100: oklch(97% 0 0);
--color-blue-100: oklch(93.2% .032 255.585);
--color-green-600: oklch(62.7% .194 149.214);
--color-red-300: oklch(80.8% .114 19.571);
--color-sky-300: oklch(82.8% .111 230.318);
--color-cyan-500: oklch(71.5% .143 215.221);
--color-orange-500: oklch(70.5% .213 47.604);
--color-sky-400: oklch(74.6% .16 232.661);
--text-2xl--line-height: calc(2 / 1.5);
--spacing: .25rem;
--color-pink-200: oklch(89.9% .061 343.231);
--text-8xl: 6rem;
--color-mauve-500: oklch(54.2% .034 322.5);
--text-xl--line-height: calc(1.75 / 1.25);
--text-sm: .875rem;
--color-green-400: oklch(79.2% .209 151.711);
--color-emerald-500: oklch(69.6% .17 162.48);
--color-mauve-300: oklch(86.5% .012 325.68);
--color-mauve-100: oklch(96% .003 325.6);
--color-violet-200: oklch(89.4% .057 293.283);
--color-indigo-500: oklch(58.5% .233 277.117);
--color-purple-400: oklch(71.4% .203 305.504);
--color-green-200: oklch(92.5% .084 155.995);
--color-red-600: oklch(57.7% .245 27.325);
--color-black: #000;
--color-neutral-950: oklch(14.5% 0 0);
}Drop-in prompt
Build a landing page in the visual style of Elysiajs — Blog.
Reference design system (extracted from the live site):
- Palette: #fc64b4, #820245, #fc84c4, #80878f, #bcb4cc
- Typefaces: -apple-system
- 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/elysiajs-com--blog