Rainbow — design system & UI screens

Fintech · 1 screen · 11 sections · rainbow.me

This is a landing page for a cryptocurrency wallet and DeFi platform ("Experience Crypto in Color") designed to help users manage digital assets on-chain. The layout uses a tall scrolling page with modular sections: a hero with 3D device mockups and gradient backgrounds, feature cards with icons and descriptions (Rainbow Extension browser integration, keyboard shortcuts, transaction management, token tracking), testimonials with circular avatars, pricing/stats, download CTAs, and FAQs. Bright neon gradients (orange, pink, purple) are layered over soft pastel backgrounds to create visual interest and guide the eye through distinct product benefits.

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

Product Launch Landing Page