№ supaste-com--roadmap

Supaste · Roadmap

Electric cobalt depths, frosted glass layers, crisp white sans-serif floating weightless

Catalogueminimalism swiss saaslight

A clean, high-contrast layout using a multi-column kanban style to organize feature requests. Heavy reliance on white space and a strict grayscale palette with subtle rounded corners. · saas roadmap, kanban board ui, feature request board, minimalist product feedback, clean column layout, white space design

Supaste · Roadmap - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#042edc
OKLCHoklch(43.8% 0.257 264)
RoleDominant
find sites →
Hex#90bcf8
OKLCHoklch(78.6% 0.098 256)
RoleSurface
find sites →
Hex#040c2c
OKLCHoklch(17.1% 0.066 266)
RoleInk
find sites →
Hex#5a74a4
OKLCHoklch(55.9% 0.081 262)
RoleAccent
find sites →
Hex#b4bcc1
OKLCHoklch(79.0% 0.011 235)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Inter Display	60px	700	1	-3px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc
button	sans-serif	12px	500	1.4	0	Aa Bb Cc

Spacing scale

10px

30px

Radius scale

6px

Container

Max content width 710px

Export

:root {
  --color-dominant: #042edc;
  --color-surface: #90bcf8;
  --color-ink: #040c2c;
  --color-accent: #5a74a4;
  --color-detail: #b4bcc1;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 1;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Supaste · Roadmap.
Reference design system (extracted from the live site):
- Palette: #042edc, #90bcf8, #040c2c, #5a74a4, #b4bcc1
- Typefaces: Inter Display, sans-serif
- Macrostructure: Catalogue
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/supaste-com--roadmap

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter Display

60px

700

-3px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

button

sans-serif

12px

500

1.4

Aa Bb Cc

:root { --color-dominant: #042edc; --color-surface: #90bcf8; --color-ink: #040c2c; --color-accent: #5a74a4; --color-detail: #b4bcc1; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Supaste · Roadmap. Reference design system (extracted from the live site): - Palette: #042edc, #90bcf8, #040c2c, #5a74a4, #b4bcc1 - Typefaces: Inter Display, sans-serif - Macrostructure: Catalogue 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/supaste-com--roadmap