№ tokens-studio

Tokens Studio

Electric neon accents, bold geometric sans, floating candy-colored blocks on white

Marquee Herominimalism playful developer tools saaslight

High-contrast bold typography paired with floating 3D isometric UI elements in pastel hues. The layout uses a clean, centered composition with a soft off-white background. · design system tool, isometric 3d ui, bold typography hero, pastel saas landing page, developer tool hero

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: pastel · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#11c8d5
OKLCHoklch(76.0% 0.128 203)
RoleDominant
find sites →
Hex#fc79a4
OKLCHoklch(74.0% 0.165 1)
RoleSurface
find sites →
Hex#251d5c
OKLCHoklch(28.3% 0.108 283)
RoleInk
find sites →
Hex#605ea7
OKLCHoklch(51.8% 0.113 283)
RoleAccent
find sites →
Hex#c6cdaa
OKLCHoklch(83.4% 0.048 117)
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	Almarena Neue Display ExtraBold	80px	400	0.9	-2.4px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc
button	Lato	14px	400	1.75	0	Aa Bb Cc

Spacing scale

60px

200px

Radius scale

0px

42px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #11c8d5;
  --color-surface: #fc79a4;
  --color-ink: #251d5c;
  --color-accent: #605ea7;
  --color-detail: #c6cdaa;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 1;
  --selection-text: #211C4D;
  --selection-bg: #A499FF;
}

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 Tokens Studio.
Reference design system (extracted from the live site):
- Palette: #11c8d5, #fc79a4, #251d5c, #605ea7, #c6cdaa
- Typefaces: Almarena Neue Display ExtraBold, sans-serif, Lato
- 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/tokens-studio

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Almarena Neue Display ExtraBold

80px

400

0.9

-2.4px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

button

Lato

14px

400

1.75

Aa Bb Cc

:root { --color-dominant: #11c8d5; --color-surface: #fc79a4; --color-ink: #251d5c; --color-accent: #605ea7; --color-detail: #c6cdaa; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; --selection-text: #211C4D; --selection-bg: #A499FF; }

Build a landing page in the visual style of Tokens Studio. Reference design system (extracted from the live site): - Palette: #11c8d5, #fc79a4, #251d5c, #605ea7, #c6cdaa - Typefaces: Almarena Neue Display ExtraBold, sans-serif, Lato - 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/tokens-studio