№ gusto-com

Gusto

Warm, playful, balloon-like forms float across a soft, airy expanse of gentle pastels.

Marquee Heroplayful minimalism saas fintechlight

The oversized, inflated 'SMALL' text creates a sense of playful scale and emphasizes the core message. The color palette is limited to shades of pink and white, contributing to a clean, modern feel. · saas showcase, product update, minimalist hero, playful design, fintech showcase, gusto showcase, small updates, modern design

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: saturated · muted · warm

SwatchHexOKLCHSuggested roleCopy

Hex#b63854
OKLCHoklch(53.3% 0.162 11)
RoleDominant
find sites →
Hex#90121f
OKLCHoklch(42.1% 0.158 23)
RoleSurface
find sites →
Hex#f47c6c
OKLCHoklch(72.0% 0.150 29)
RoleInk
find sites →
Hex#b59293
OKLCHoklch(69.3% 0.042 16)
RoleAccent
find sites →
Hex#daacb2
OKLCHoklch(78.8% 0.054 10)
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	clearface	56px	600	1.14	0.28px	Aa Bb Cc
h2	clearface	42px	600	1.19	-0.546px	Aa Bb Cc
h3	clearface	42px	600	1.19	-0.546px	Aa Bb Cc
body	GCentra	16px	400	1.5	0	Aa Bb Cc
button	GCentra	16px	400	1.15	0	Aa Bb Cc

Spacing scale

20px

24px

64px

72px

Radius scale

0px

4px

8px

14px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #b63854;
  --color-surface: #90121f;
  --color-ink: #f47c6c;
  --color-accent: #b59293;
  --color-detail: #daacb2;
}

/* CSS variables exposed by source */
:root {
  --font-family-matter: Matter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

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 Gusto.
Reference design system (extracted from the live site):
- Palette: #b63854, #90121f, #f47c6c, #b59293, #daacb2
- Typefaces: clearface, GCentra
- 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/gusto-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

clearface

56px

600

1.14

0.28px

Aa Bb Cc

clearface

42px

600

1.19

-0.546px

Aa Bb Cc

clearface

42px

600

1.19

-0.546px

Aa Bb Cc

body

GCentra

16px

400

1.5

Aa Bb Cc

button

GCentra

16px

400

1.15

Aa Bb Cc

:root { --color-dominant: #b63854; --color-surface: #90121f; --color-ink: #f47c6c; --color-accent: #b59293; --color-detail: #daacb2; } /* CSS variables exposed by source */ :root { --font-family-matter: Matter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }

Build a landing page in the visual style of Gusto. Reference design system (extracted from the live site): - Palette: #b63854, #90121f, #f47c6c, #b59293, #daacb2 - Typefaces: clearface, GCentra - 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/gusto-com