Dovetail
Feature Stack
Loading
Superlist — Task Management & To-Do List App for Work and Life
Deep indigo expanse, crisp sans-serif clarity, subtly luminous, focused efficiency.
Click any value to copy. Roles are suggestions, not gospel.
- #048ce4oklch(62.4% 0.165 247)Dominant
- #75c1f2oklch(78.0% 0.103 238)Surface
- #08367coklch(35.1% 0.128 260)Ink
- #7d75b3oklch(59.5% 0.094 289)Accent
- #b67daeoklch(66.3% 0.097 332)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Haffer XH SemiBold | 88px | 600 | 0.95 | -1.76px | Aa Bb Cc |
| h2 | Haffer XH SemiBold | 30px | 600 | 1.2 | -0.6px | Aa Bb Cc |
| h3 | Haffer XH SemiBold | 24px | 400 | 1.2 | -0.48px | Aa Bb Cc |
| body | sans-serif | 12px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Haffer XH SemiBold Italic | 16px | 600 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #048ce4;
--color-surface: #75c1f2;
--color-ink: #08367c;
--color-accent: #7d75b3;
--color-detail: #b67dae;
}
/* CSS variables exposed by source */
:root {
--ticker-offset: 0px;
--one-if-corner-shape-supported: 1;
}Drop-in prompt
Build a landing page in the visual style of Superlist — Task Management & To-Do List App for Work and Life.
Reference design system (extracted from the live site):
- Palette: #048ce4, #75c1f2, #08367c, #7d75b3, #b67dae
- Typefaces: Haffer XH SemiBold, sans-serif, Haffer XH SemiBold Italic
- 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/superlist-com
