Rainbow — design system & UI screens

Fintech · 1 screen · 11 sections · rainbow.me

The hero sits on a glossy sky-blue gradient with floating 3D-rendered rainbow, Saturn, and sparkle objects, an ultra-bold rounded black headline reading "Experience Crypto in Color," and dual pill CTAs (orange "Download Rainbow Extension" / pink "Download Rainbow Mobile") each carrying an embossed rainbow app-icon. The signature element is the candy-glossy maximalist art direction: every section pairs the same heavy rounded display type with vivid 3D product mockups, a literal orange mechanical keyboard, a radial "all the chains" token cluster orbiting a phone, and color-saturated tilted phone hardware. Closing sections deliver an NFT showcase trio, a minimal two-column FAQ, and a giant "Download Rainbow to get started" CTA over a soft rainbow-tinted footer with emoji-prefixed link pills.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/rainbow.

Decoded design system

Rainbow's decoded design system: background #FFFFFF, text #0F101A, accent #FF8A00, link #0000EE, primary #FF8A00; type scale h1 96px / h2 56px / body 20px; 8px spacing base; 32px base radius. The single interactive/action color is #FF8A00 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F0F0F1`
border	`#DBDBDC`
text	`#0F101A`
text_muted	`#6A6A71`
primary	`#FF8A00`
accent	`#FF8A00`
link	`#0000EE`
secondary	`#FF54BB`
button_bg	`#FF8A00`
button_text	`#0000EE`

Using these colors

Action color #FF8A00 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #FF8A00 — one role, not several (the action color).
accent #FF8A00 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #0000EE — inline text links and link-styled controls.
secondary #FF54BB — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: SF Pro Rounded Black
Body: SF Pro Rounded
h1: 96px
h2: 56px
body: 20px

Spacing

base unit: 8px
scale: 8px, 10px, 12px, 16px, 20px, 24px, 32px, 48px, 60px, 64px

Radii

base: 32px
button: 40px

Shadow

rgba(255, 255, 255, 0.59) 0px 0.48175px 0.86715px -1px inset, rgba(255, 255, 255, 0.553) 0px 1.83083px 3.29549px -2px inset, rgba(255, 255, 255, 0.4) 0px 8px 14.4px -3px inset, rgba(255, 255, 255, 0.196) 0px -0.362176px 0.217306px -0.5px inset, rgba(255, 255, 255, 0.576) 0px -3px 1.8px -1px inset

Shadows (elevation)

subtle: rgba(15, 16, 26, 0.086) 0px 0.602187px 0.602187px -1.25px, rgba(15, 16, 26, 0.075) 0px 2.28853px 2.28853px -2.5px, rgba(15, 16, 26, 0.03) 0px 10px 10px -3.75px
card: rgba(0, 0, 0, 0.23) 0px 0.722625px 1.30072px -1.25px, rgba(0, 0, 0, 0.204) 0px 2.74624px 4.94323px -2.5px, rgba(0, 0, 0, 0.08) 0px 12px 21.6px -3.75px

Motion

Micro-interactions run at 300ms (dominant) with cubic-bezier(0.44, 0, 0.56, 1).

durations: 300ms
easings: cubic-bezier(0.44, 0, 0.56, 1)
animated properties: color

Button states (measured)

primary focus: outline 1px auto rgb(16, 16, 16)

Motion choreography (measured)

Scroll reveal: 1 elements rest at translateY(-54px), animate in over 580ms.

Responsive (measured)

breakpoints: 1200px · 1599px · 1799px
mobile (390px): hero 56px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Playful crypto wallet landing with sky-blue hero, 3D rainbow art, and oversized rounded type