Buzz · Docs
Long Document
Loading
HeyClicky · Changelog
Soft desktop collage, playful sans serif floating over a milky white void
Click any value to copy. Roles are suggestions, not gospel.
- #ce685foklch(63.5% 0.131 27)Dominant
- #a0c2e5oklch(80.1% 0.062 249)Surface
- #7c3224oklch(41.8% 0.107 33)Ink
- #6284a3oklch(60.0% 0.061 247)Accent
- #d1b4a9oklch(79.2% 0.037 42)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter | 56px | 500 | 1.2 | -1.68px | Aa Bb Cc |
| h2 | Inter | 26px | 500 | 1.2 | -0.78px | Aa Bb Cc |
| h3 | Inter | 12px | 600 | 1.5 | 0.4px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 980px
:root {
--color-dominant: #ce685f;
--color-surface: #a0c2e5;
--color-ink: #7c3224;
--color-accent: #6284a3;
--color-detail: #d1b4a9;
}
/* CSS variables exposed by source */
:root {
--font-geist-mono: "Geist Mono", "Geist Mono Fallback";
--font-inter: "Inter", "Inter Fallback";
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-instrument-serif: "Instrument Serif", "Instrument Serif Fallback";
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow-alpha: 100%;
--default-transition-duration: .15s;
--tw-drop-shadow-alpha: 100%;
--tw-border-style: solid;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--tw-shadow: 0 0 #0000;
--page-zoom: 1;
--tw-ring-offset-width: 0px;
--ease-out: cubic-bezier(0, 0, .2, 1);
--default-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--default-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--tw-inset-shadow: 0 0 #0000;
}Drop-in prompt
Build a landing page in the visual style of HeyClicky · Changelog.
Reference design system (extracted from the live site):
- Palette: #ce685f, #a0c2e5, #7c3224, #6284a3, #d1b4a9
- Typefaces: Inter
- 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/heyclicky-com--changelog
