Alloy
Feature Stack
Loading
Cleanshot — Changelog
Crisp, cool tech—brutalist geometry, clean sans-serif, expansive white space.
Click any value to copy. Roles are suggestions, not gospel.
- #0f71faoklch(58.2% 0.221 259)Dominant
- #1f7559oklch(50.5% 0.092 167)Surface
- #cddffboklch(89.9% 0.043 259)Ink
- #4bad9eoklch(68.5% 0.095 182)Accent
- #cdacb4oklch(77.6% 0.040 2)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter | 48px | 700 | 1.25 | 0 | Aa Bb Cc |
| h2 | Inter | 48px | 700 | 1.25 | 0 | Aa Bb Cc |
| h3 | Inter | 20px | 700 | 1.6 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Inter | 14px | 700 | 1.35 | 0 | Aa Bb Cc |
:root {
--color-dominant: #0f71fa;
--color-surface: #1f7559;
--color-ink: #cddffb;
--color-accent: #4bad9e;
--color-detail: #cdacb4;
}
/* CSS variables exposed by source */
:root {
--vc-pgn-background-color: #090f207f;
--vc-icn-width: 1.2em;
--vc-pgn-active-color: #000;
--vc-pgn-height: 4px;
--vc-pgn-width: 12px;
--vc-pgn-margin: 4px;
--vc-nav-width: 30px;
--vc-nav-color-hover: #090f207f;
--vc-nav-background: transparent;
--vc-clr-primary: #000;
--vc-clr-white: #fff;
--vc-nav-border-radius: 0;
--vc-nav-height: 30px;
--vc-nav-color: #000;
--vc-clr-secondary: #090f207f;
--vc-pgn-border-radius: 0;
}Drop-in prompt
Build a landing page in the visual style of Cleanshot — Changelog.
Reference design system (extracted from the live site):
- Palette: #0f71fa, #1f7559, #cddffb, #4bad9e, #cdacb4
- Typefaces: Inter
- 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/cleanshot-com--changelog
