№ rainbow-me

Rainbow Me

Electric sky-blue expanse, playful rainbow hues, and bold, rounded typography.

Feature Stackplayful maximalism crypto fintechlight

The page uses a bright, pastel color palette with rounded shapes and playful illustrations to create a welcoming and approachable feel. The layout features distinct sections with clear calls to action, guiding the user through the product's features. · crypto wallet, rainbow wallet, mobile wallet, rainbow extension, fintech design, colorful ui, playful design, web app, digital wallet, cryptocurrency

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 · neon · saturated

SwatchHexOKLCHSuggested roleCopy

Hex#f2a119
OKLCHoklch(77.1% 0.160 72)
RoleDominant
find sites →
Hex#1d4244
OKLCHoklch(35.3% 0.042 200)
RoleSurface
find sites →
Hex#84e4fb
OKLCHoklch(86.8% 0.096 215)
RoleInk
find sites →
Hex#905d08
OKLCHoklch(52.2% 0.109 71)
RoleAccent
find sites →
Hex#d2cb9f
OKLCHoklch(83.7% 0.059 100)
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	SF Pro Rounded Black	96px	400	1	-1.92px	Aa Bb Cc
h2	SF Pro Rounded Heavy	56px	400	1.1	-1px	Aa Bb Cc
h3	SF Pro Rounded Heavy	36px	400	1.1	-1px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc

Container

Max content width 1440px

Export

:root {
  --color-dominant: #f2a119;
  --color-surface: #1d4244;
  --color-ink: #84e4fb;
  --color-accent: #905d08;
  --color-detail: #d2cb9f;
}

/* 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 Rainbow Me.
Reference design system (extracted from the live site):
- Palette: #f2a119, #1d4244, #84e4fb, #905d08, #d2cb9f
- Typefaces: SF Pro Rounded Black, SF Pro Rounded Heavy, sans-serif
- Macrostructure: Feature Stack
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/rainbow-me

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

SF Pro Rounded Black

96px

400

-1.92px

Aa Bb Cc

SF Pro Rounded Heavy

56px

400

1.1

-1px

Aa Bb Cc

SF Pro Rounded Heavy

36px

400

1.1

-1px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #f2a119; --color-surface: #1d4244; --color-ink: #84e4fb; --color-accent: #905d08; --color-detail: #d2cb9f; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Rainbow Me. Reference design system (extracted from the live site): - Palette: #f2a119, #1d4244, #84e4fb, #905d08, #d2cb9f - Typefaces: SF Pro Rounded Black, SF Pro Rounded Heavy, sans-serif - Macrostructure: Feature Stack 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/rainbow-me