№ slush-app

Slush

Electric blue maximalism, chunky black sans-serifs floating over tactile neon textures

Marquee Heroplayful maximalism cryptolight

High-energy composition featuring massive black sans-serif typography overlaid on a 3D blue organic shape. Playful 3D icons and pill-shaped navigation buttons create a tactile, modern web3 aesthetic. · crypto hero, 3d playful web design, bold typography fintech, saturated blue landing page, web3 playful aesthetic

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 · cool · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#0b83ef
OKLCHoklch(61.1% 0.187 253)
RoleDominant
find sites →
Hex#6bc3f1
OKLCHoklch(78.0% 0.107 233)
RoleSurface
find sites →
Hex#0454ac
OKLCHoklch(45.8% 0.157 257)
RoleInk
find sites →
Hex#757066
OKLCHoklch(54.7% 0.016 85)
RoleAccent
find sites →
Hex#bca4cc
OKLCHoklch(75.3% 0.062 312)
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
h2	Aeonik Pro	64px	500	1	-0.64px	Aa Bb Cc
h3	Aeonik Pro	64px	500	1	-0.64px	Aa Bb Cc
body	Aeonik Pro	16px	500	1.25	0	Aa Bb Cc
button	Aeonik Pro	16px	500	1.25	0	Aa Bb Cc

Spacing scale

6px

100px

166px

180px

192px

Radius scale

0px

30px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #0b83ef;
  --color-surface: #6bc3f1;
  --color-ink: #0454ac;
  --color-accent: #757066;
  --color-detail: #bca4cc;
}

/* CSS variables exposed by source */
:root {
  --color--orange-800: #fb4903;
  --color-ease: cubic-bezier(.216, .62, .356, 1);
  --gap-ml: 1.5em;
  --gap-xl: 3em;
  --radius-container: 2.5em;
  --color--yellow-700: #ffd731;
  --color--green-700: #55db9c;
  --gap-xxl: 4em;
  --size-unit: 16;
  --gap-sm: 1em;
  --color--blue-100: #dceeff;
  --gap-s: .75em;
  --color--violet-100: #f8f0ff;
  --color--green-100: #99e9c4;
  --size-font: calc(clamp(992px, 100vw, 2250px) / (1440 / 16));
  --gap-l: 2em;
  --color--blue-700: #4da2ff;
  --gap-xs: .5em;
  --gap-m: 1.25em;
  --size-container: clamp(992px, 100vw, 2250px);
  --size-container-min: 992px;
  --size-container-ideal: 1440;
  --color--yellow-100: #ffefad;
  --color--purple-800: #5c4ade;
  --color--dark: black;
  --color--violet-700: #e9ccff;
  --size-container-max: 2250px;
  --gap-xxs: .25em;
  --color--light: white;
  --duration-fade: 0.15s;
  --page-padding: .75em;
  --cubic-bounce: linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%);
  --smooth-ease: cubic-bezier(.32, .72, 0, 1);
  --duration-medium: 0.85s;
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.75s;
}

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 Slush.
Reference design system (extracted from the live site):
- Palette: #0b83ef, #6bc3f1, #0454ac, #757066, #bca4cc
- Typefaces: Lateral, Aeonik Pro
- 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/slush-app

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Aeonik Pro

64px

500

-0.64px

Aa Bb Cc

Aeonik Pro

64px

500

-0.64px

Aa Bb Cc

body

Aeonik Pro

16px

500

1.25

Aa Bb Cc

button

Aeonik Pro

16px

500

1.25

Aa Bb Cc

:root { --color-dominant: #0b83ef; --color-surface: #6bc3f1; --color-ink: #0454ac; --color-accent: #757066; --color-detail: #bca4cc; } /* CSS variables exposed by source */ :root { --color--orange-800: #fb4903; --color-ease: cubic-bezier(.216, .62, .356, 1); --gap-ml: 1.5em; --gap-xl: 3em; --radius-container: 2.5em; --color--yellow-700: #ffd731; --color--green-700: #55db9c; --gap-xxl: 4em; --size-unit: 16; --gap-sm: 1em; --color--blue-100: #dceeff; --gap-s: .75em; --color--violet-100: #f8f0ff; --color--green-100: #99e9c4; --size-font: calc(clamp(992px, 100vw, 2250px) / (1440 / 16)); --gap-l: 2em; --color--blue-700: #4da2ff; --gap-xs: .5em; --gap-m: 1.25em; --size-container: clamp(992px, 100vw, 2250px); --size-container-min: 992px; --size-container-ideal: 1440; --color--yellow-100: #ffefad; --color--purple-800: #5c4ade; --color--dark: black; --color--violet-700: #e9ccff; --size-container-max: 2250px; --gap-xxs: .25em; --color--light: white; --duration-fade: 0.15s; --page-padding: .75em; --cubic-bounce: linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%); --smooth-ease: cubic-bezier(.32, .72, 0, 1); --duration-medium: 0.85s; --cubic-default: cubic-bezier(0.65, 0.05, 0, 1); --duration-default: 0.75s; }

Build a landing page in the visual style of Slush. Reference design system (extracted from the live site): - Palette: #0b83ef, #6bc3f1, #0454ac, #757066, #bca4cc - Typefaces: Lateral, Aeonik Pro - 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/slush-app