№ supaste-com

Supaste

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

Marquee Herominimalism glassmorphism saaslight

A high-saturation blue gradient hero with centered white typography and a floating app interface preview. The design utilizes soft shadows and glassmorphism to create a modern, macOS-native aesthetic. · macos app landing page, blue gradient hero, software tool showcase, minimalist saas hero, glassmorphism ui

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: cool · saturated

SwatchHexOKLCHSuggested roleCopy

Hex#087cf8
OKLCHoklch(60.2% 0.206 256)
RoleDominant
find sites →
Hex#8ad8fc
OKLCHoklch(84.5% 0.092 229)
RoleSurface
find sites →
Hex#0a508f
OKLCHoklch(42.8% 0.122 252)
RoleInk
find sites →
Hex#ac6853
OKLCHoklch(58.7% 0.093 38)
RoleAccent
find sites →
Hex#b5bcc6
OKLCHoklch(79.3% 0.016 257)
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	20px	600	1	-0.4px	Aa Bb Cc
h2	Inter Display	60px	700	1	-3px	Aa Bb Cc
h3	Inter Display	50px	700	1	-2.5px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc

Spacing scale

10px

30px

Container

Max content width 710px

Export

:root {
  --color-dominant: #087cf8;
  --color-surface: #8ad8fc;
  --color-ink: #0a508f;
  --color-accent: #ac6853;
  --color-detail: #b5bcc6;
}

/* 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.
Reference design system (extracted from the live site):
- Palette: #087cf8, #8ad8fc, #0a508f, #ac6853, #b5bcc6
- Typefaces: Inter Display, sans-serif
- Macrostructure: Marquee Hero
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

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter Display

20px

600

-0.4px

Aa Bb Cc

Inter Display

60px

700

-3px

Aa Bb Cc

Inter Display

50px

700

-2.5px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #087cf8; --color-surface: #8ad8fc; --color-ink: #0a508f; --color-accent: #ac6853; --color-detail: #b5bcc6; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Supaste. Reference design system (extracted from the live site): - Palette: #087cf8, #8ad8fc, #0a508f, #ac6853, #b5bcc6 - Typefaces: Inter Display, sans-serif - Macrostructure: Marquee Hero 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