---
title: "Rainbow design system"
variant: extended
source: https://rainbow.me/
captured_at: 2026-10-12
theme: dark
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/rainbow-me)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Rainbow · Design System

> A quiet dark canvas for trading every market

**Theme:** dark · **Industry:** crypto · **Source:** https://rainbow.me/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Rainbow presents a mobile trading app through a restrained, near-black interface with bright product details as focal points. Rounded typography, generous vertical spacing, and softly glowing market icons keep the long landing page calm and product-led.

## North star

Keep the page nearly black and spacious, letting crisp white type and isolated, softly glowing product details carry attention.

## Overview

The page is built on an almost uninterrupted #111111 canvas, with no alternating section bands; its spaciousness comes from large vertical intervals rather than decorative containers. White SF Rounded Web headlines create a friendly, high-contrast voice, while #9f9f9f body copy recedes until it is needed. The first viewport balances a tall phone mockup on the left with a compact headline and copy to its right, plus restrained edge navigation and a subdued download control. Across the feature sequence, small, vivid market icons sit above white titles and muted explanatory text, isolated by extensive dark space. Blue, amber, purple, and teal glows belong mainly to product imagery and icon treatments, not to broad page surfaces. Rounded download controls, phone framing, and subtle shadows provide depth; most of the page remains flat and borderless. The result feels mobile-first, focused, and deliberately quiet.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Canvas | `#111111` | `--color-night-canvas` | brand | Dominant page canvas across the hero, every feature section, and the footer. |
| Device Black | `#000000` | `--color-device-black` | surface | Primarily visible inside the phone mockup and device-screen imagery, not as a defining page surface. |
| Clear White | `#ffffff` | `--color-clear-white` | neutral | Hero and section headings, selected copy, navigation links, and download button labels. |
| Haze Gray | `#929292` | `--color-haze-gray` | neutral | A gradient tone in heading rendering; not a primary flat interface color. |
| Graphite Fade | `#4a4a4a` | `--color-graphite-fade` | neutral | A gradient tone in heading rendering; adds subdued depth rather than defining a surface. |
| Soft Gray | `#9f9f9f` | `--color-soft-gray` | neutral | Muted body copy and secondary links, including the right-side section navigation. |
| Muted Bronze | `#88704c` | `--color-muted-bronze` | semantic | Measured border color appearing in a small amount of detail, not a broad brand accent. |
| Icon Violet | `#804388` | `--color-icon-violet` | accent | Small detail color associated with glowing product or market icon imagery, not section backgrounds. |
| Market Teal | `#077f70` | `--color-market-teal` | accent | Small product-detail color used in imagery or interface visuals, not a page-wide accent. |
| Button Mist | `#f2f2f2` | `--color-button-mist` | neutral | A minor light button-related detail; the prominent measured download button uses a dark fill. |

### Semantic aliases

`--color-canvas` → `#111111` (Night Canvas) · `--color-text` → `#ffffff` (Clear White) · `--color-text-muted` → `#000000` (Device Black) · `--color-text-subtle` → `#9f9f9f` (Soft Gray) · `--color-border` → `#88704c` (Muted Bronze)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#000000` | `#111111` | 1.11:1 | fail |
| `#9f9f9f` | `#111111` | 7.13:1 | AAA |

### Gradients

- `linear-gradient(170deg, rgba(255, 255, 255, 0.54) 9%, rgba(255, 255, 255, 0.24) 110%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Rounded Web | `--font-body` | webfont | 500, 700, 600 | Headings, body copy, navigation, and download controls | Nunito Sans |

- **SF Rounded Web:** Rounded sans-serif throughout; headings use bold or medium weights, while body and controls use medium weight. Sentence case and subtly tight body tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.343, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 700 | normal | 0.007em | — | SF Rounded Web | Hero headline; bold, prominent, sentence case. |
| h2 | 42px | 700 | normal | 0.008em | — | SF Rounded Web | Feature-section headings and other major content titles. |
| h3 | 30px | 500 | normal | 0.007em | — | SF Rounded Web | Supporting feature or subsection headings. |
| h4 | 20px | 600 | 1 | 0.019em | — | SF Rounded Web | Compact labels and small heading-level interface text. |
| body | 16px | 500 | 1.25 | -0.012em | — | SF Rounded Web | Muted explanatory copy beneath hero and feature titles. |
| button | 16px | 500 | 1.25 | -0.012em | — | SF Rounded Web | Download controls, set in medium-weight rounded text. |
| link | 16px | 500 | 1.25 | -0.012em | — | SF Rounded Web | Navigation and secondary text links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 14, 16, 18, 24, 32, 36, 40, 42, 64, 120, 148, 160 px.
- Section rhythm 160px · element gap 42px · card padding — · max content width 1280px.

A measured maximum width of 1280px anchors the desktop composition, with the hero arranged as a phone mockup and aligned text rather than a dense grid. The main headline and copy sit left-aligned; small navigation elements hug the page edges. Feature sections continue in a single-column rhythm on the same canvas, with large measured section gaps and sparse content. The density is intentionally low: each icon-and-copy feature receives substantial breathing room, followed by a minimal closing download area and footer.

## Shape & elevation

- Radius: button `9999px` · card `41px` · link `24px` · xs `18px` · sm `41px` · pill `9999px`
- Shadow `xl` (button): `rgba(0, 0, 0, 0.15) 0px 4px 9px 0px, rgba(255, 255, 255, 0.04) 0px 0px 64px 0px`
- Shadow `xl-2` (other, link): `rgba(60, 112, 216, 0.5) 0px 2px 100px 0px, rgba(0, 0, 0, 0.32) 0px 4px 16px 0px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.16) 0px 8px 9px 0px inset`
- Shadow `md` (card): `rgba(0, 0, 0, 0.4) 0px 4px 24px 0px`
- Shadow `inset-2` (other): `rgb(255, 201, 119) 0px 11px 12px 0px inset, rgba(255, 155, 6, 0.5) 0px 2px 100px 0px`
- Shadow `inset-3` (other): `rgba(177, 44, 220, 0.5) 0px 2px 100px 0px, rgb(229, 147, 255) 0px 11px 12px 0px inset`
- Motion: standard transition `0.2s cubic-bezier(0.25, 1, 0.5, 1)` on interactive elements.

The page is mostly flat: section bands and cards do not define the design. Depth comes from the phone mockup's measured shadow, subtle shadows around download controls, and restrained glow around product details. Use borders sparingly; the dark canvas should remain uninterrupted.

## Imagery

The hero uses a realistic, dark phone-screen mockup showing the trading app, framed as a tall device against the page canvas. Later features rely on small, isolated market icons with colored glow rather than large photography or decorative illustrations. Keep imagery tightly framed and legible, preserving dark device screens and vivid icon details without adding unrelated scenes.

## Components

### Download control

A dark, pill-shaped control with white SF Rounded Web text and a soft shadow; the primary action reads “Download Rainbow.”

### Hero phone mockup

A tall, rounded device frame containing a dense trading interface; its black screen contrasts with the sparse outer page.

### Feature icon

A small market-specific icon centered above feature content, with localized colored glow against the dark canvas.

### Feature copy block

A white title paired with concise, muted explanatory copy; left-aligned and surrounded by generous vertical breathing room.

### Edge navigation

Compact section links positioned near the right edge, with subdued gray inactive text and clear, restrained labels.

### Closing brand area

A centered download action and Rainbow mark near the bottom, followed by a low-emphasis footer with small utility links.

### Measured component styles

- **Primary button** (“Download”): background #1f1f1f · text #ffffff · border 2px solid · radius 80px · padding 14px 36px · 600 16px SF Rounded Web · shadow rgba(0, 0, 0, 0.15) 0px 4px 9px 0px, rgba(255, 255, 255, 0.04) 0px 0px 64px 0px
- **Link** (“Support”): transparent background · text #ffffff · radius 0px · padding 0px · 500 16px SF Rounded Web
- **Card**: transparent background · text #000000 · radius 41.4px · padding 0px · 400 20px SF Rounded Web · shadow rgba(0, 0, 0, 0.4) 0px 4px 24px 0px

## Do

- Use #111111 as the uninterrupted page canvas.
- Reserve white text for headlines and important controls.
- Keep explanatory copy subdued in #9f9f9f.
- Give feature blocks generous vertical breathing room.
- Use vivid color locally in product icons and app imagery.
- Use rounded forms for the phone and download controls.

## Don't

- Do not introduce alternating bright section backgrounds.
- Do not turn illustrative colors into full-page accents.
- Do not crowd feature sections with dense cards.
- Do not use sharp, angular display typography.
- Do not add heavy borders around every content block.
- Do not compete with the product mockup using extra imagery.

## Agent prompt

Build a new Rainbow-style landing page on a near-black #111111 canvas, preserving large quiet areas between content. Use SF Rounded Web, or a close rounded sans-serif substitute, with bold white headlines and medium-weight #9f9f9f supporting copy. Create a clear hero composition around a tall mobile product mockup, with a restrained pill-shaped download control and subtle shadow. Organize follow-on content as sparse, left-aligned feature blocks: a small glowing product icon, a concise white title, and muted explanatory text. Keep decorative color local to product visuals; #804388 and #077f70 are detail colors, not section fills. Favor rounded silhouettes, minimal borders, and simple navigation. Finish with a centered download action, brand mark, and understated utility footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Phone mockup on the left, hero copy to its right, with compact navigation and download elements at the page edges. | Product introduction, Download entry point, Section navigation | Dark phone mockup, Large white headline, Muted supporting copy, Pill download control |
| 2 | feature-split | Sparse single-column feature block with a market icon above its title and copy. | Feature explanation, Market category introduction | Glowing Bitcoin icon, White title, Muted copy |
| 3 | feature-split | Single-column feature treatment with a centered icon and text block. | Feature explanation, Market category introduction | Purple glowing icon, White title, Muted copy |
| 4 | feature-split | Single-column feature block, icon first, followed by title and explanatory text. | Feature explanation, Trading capability overview | Teal glowing icon, White title, Muted copy |
| 5 | feature-split | Sparse icon-and-copy block in the repeated single-column feature rhythm. | Feature explanation, Real-time capability overview | Small red-lit visual, White title, Muted copy |
| 6 | feature-split | Single-column feature block with an icon above concise explanatory copy. | Rewards explanation, Product benefit overview | Gold-toned icon, White title, Muted copy |
| 7 | other | Minimal single-column statement with substantial surrounding dark space. | Brand positioning, Market breadth statement | Large restrained title, Dark canvas |
| 8 | footer | Centered download and brand area above a low-emphasis row of footer links. | Download conversion, Utility navigation | Pill download control, Rainbow brand mark, Small muted links |

## Source CSS custom properties (selected)

```css
--phone-radius: 41.4px;
--phone-shadow: 0 4px 24px 0 rgba(0, 0, 0, .4);
--bg: #111111;
--stagger-ease: cubic-bezier(.22, 1, .36, 1);
--screen-in-ease: cubic-bezier(.4, 0, .2, 1);
--modal-ease: cubic-bezier(.175, .885, .135, 1.1);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/rainbow-me