HeyClicky · Changelog
Long Document




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 | Cash Sans | 64px | 400 | 1.02 | -1.92px | Aa Bb Cc |
| h2 | Cash Sans | 32px | 500 | 1.1 | -0.64px | Aa Bb Cc |
| body | Cash Sans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Cash Sans | 16px | 400 | 0.9 | -0.32px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d4dc3c;
--color-surface: #d3db54;
--color-ink: #595727;
--color-accent: #999944;
--color-detail: #787e1a;
}
/* CSS variables exposed by source */
:root {
--border: oklch(92.2% 0 0);
--color-zinc-100: oklch(96.7% .001 286.375);
--text-2xl: 1.5rem;
--color-slate-700: oklch(37.2% .044 257.287);
--text-lg: 1.125rem;
--primary-foreground: oklch(98.5% 0 0);
--color-blue-700: oklch(48.8% .243 264.376);
--text-5xl--line-height: 1;
--color-emerald-700: oklch(50.8% .118 165.612);
--text-base--line-height: 1.5;
--color-teal-50: oklch(98.4% .014 180.72);
--color-red-200: oklch(88.5% .062 18.334);
--color-blue-300: oklch(80.9% .105 251.813);
--color-cyan-700: oklch(52% .105 223.128);
--font-cash-sans: "Cash Sans";
--accent-foreground: oklch(20.5% 0 0);
--font-mono: "Cash Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-amber-300: oklch(87.9% .169 91.605);
--color-emerald-600: oklch(59.6% .145 163.225);
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--color-fuchsia-50: oklch(97.7% .017 320.058);
--color-pink-50: oklch(97.1% .014 343.198);
--color-indigo-50: oklch(96.2% .018 272.314);
--font-sans: "Cash Sans", system-ui, sans-serif;
--radius: .625rem;
--color-red-800: oklch(44.4% .177 26.899);
--text-xs--line-height: calc(1 / .75);
--color-indigo-600: oklch(51.1% .262 276.966);
--color-amber-800: oklch(47.3% .137 46.201);
--color-fuchsia-600: oklch(59.1% .293 322.896);
--color-sky-50: oklch(97.7% .013 236.62);
--radius-2xl: 1rem;
--color-sky-700: oklch(50% .134 242.749);
--color-blue-800: oklch(42.4% .199 265.638);
--text-xl: 1.25rem;
--color-cyan-50: oklch(98.4% .019 200.873);
--color-violet-700: oklch(49.1% .27 292.581);
--color-blue-100: oklch(93.2% .032 255.585);
--accent: oklch(97% 0 0);
--color-stone-100: oklch(97% .001 106.424);
--color-teal-700: oklch(51.1% .096 186.391);
--color-lime-700: oklch(53.2% .157 131.589);
--color-zinc-800: oklch(27.4% .006 286.033);
--radius-3xl: 1.5rem;
--color-lime-50: oklch(98.6% .031 120.757);
--color-rose-50: oklch(96.9% .015 12.422);
--text-2xl--line-height: calc(2 / 1.5);
--secondary-foreground: oklch(20.5% 0 0);
--spacing: .25rem;
--background: oklch(100% 0 0);
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--color-rose-600: oklch(58.6% .253 17.585);
--color-slate-100: oklch(96.8% .007 247.896);
--text-sm: .875rem;
--bg-top: rgb(215, 215, 46);
--color-emerald-500: oklch(69.6% .17 162.48);
--color-blue-500: oklch(62.3% .214 259.815);
--color-pink-700: oklch(52.5% .223 3.958);
}Drop-in prompt
Build a landing page in the visual style of Buzz · Docs.
Reference design system (extracted from the live site):
- Palette: #d4dc3c, #d3db54, #595727, #999944, #787e1a
- Typefaces: Cash Sans
- Macrostructure: Long Document
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/buzz-xyz--support