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

# RainbowKit · Design System

> A dark canvas for a brighter wallet experience

**Theme:** dark · **Industry:** devtools · **Source:** https://rainbowkit.com/ · **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._

RainbowKit pairs a nearly black canvas and compact, friendly typography with vivid blue accents and wallet interface previews. The page moves from a centered product introduction through a saturated customization showcase to developer benefits and a light community footer.

## North star

Keep the page grounded in near-black, then use restrained electric-blue accents and clear wallet UI previews to make the product immediately legible.

## Overview

The visual strategy starts with a nearly black canvas, making the white headline and vivid blue RainbowKit wordmark the first points of focus. Soft charcoal bands distinguish content areas without relying on prominent borders; a blue-to-violet field gives the customization demo its own visual chapter. Bright blues carry primary actions and selected interface details, while pink, purple, orange, and green appear sparingly in controls and product imagery. SFRounded supplies a compact, friendly voice across headings, body copy, and buttons; SFMono separates the install command as technical content. The hero is centered and spacious, with a large wallet modal and phone preview layered beneath the copy. Later content stays tightly centered, while the developer checklist uses two columns. Rounded pill actions and soft shadows keep controls approachable. The closing light surface creates a clear contrast and signals a shift from product demonstration to community information.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | neutral | Primary page canvas and text color in measured data; anchors the dark hero and full-bleed demo. |
| Bright White | `#ffffff` | `--color-bright-white` | neutral | Headline, body, button, and link text against dark backgrounds; also appears in the wallet preview. |
| Graphite Panel | `#1b1c1e` | `--color-graphite-panel` | surface | Charcoal section bands and dark wallet-interface surfaces, separating content from the black canvas. |
| Royal Blue | `#1f4fcc` | `--color-royal-blue` | brand | Broad blue section treatment, especially the customization showcase background. |
| Electric Blue | `#0e76fd` | `--color-electric-blue` | accent | Secondary blue action and small interface details; also occurs in wallet-customization controls. |
| Quiet Gray | `#8a8e8e` | `--color-quiet-gray` | neutral | Muted supporting copy on dark sections, where it recedes beneath bright headings. |
| Cloud Surface | `#f0f1f5` | `--color-cloud-surface` | surface | Light closing section background, contrasting the preceding charcoal developer section. |
| Silver Copy | `#c0c3c9` | `--color-silver-copy` | neutral | Secondary text and subdued details within the dark interface and supporting content. |
| Slate Ink | `#25292e` | `--color-slate-ink` | neutral | Dark text and interface detail; use for low-emphasis copy or subtle tonal variation. |
| Signal Blue | `#3898ff` | `--color-signal-blue` | accent | Primary Connect Wallet button and vivid blue link or heading accents. |
| Ribbon Pink | `#ff5ca0` | `--color-ribbon-pink` | accent | Small pink gradient or feedback-action accent; not a dominant page surface. |
| Indigo Violet | `#5f5afa` | `--color-indigo-violet` | accent | Secondary customization control and violet end of blue-violet accent treatments. |
| Coral Signal | `#fa423c` | `--color-coral-signal` | semantic | Small warm-colored wallet theme control, appearing within the customization interface. |
| Tangerine Pop | `#ff801f` | `--color-tangerine-pop` | semantic | Orange customization swatch and occasional wallet-brand imagery, not a page-wide color. |
| Fresh Green | `#1db847` | `--color-fresh-green` | semantic | Green customization swatch and checklist-status accents in the developer section. |
| Deep Iris | `#38228f` | `--color-deep-iris` | accent | Dark violet within product-demo imagery and blue-purple visual treatments. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#1b1c1e` (Graphite Panel) · `--color-surface-2` → `#f0f1f5` (Cloud Surface) · `--color-surface-3` → `#ffffff` (Bright White) · `--color-text` → `#ffffff` (Bright White) · `--color-text-muted` → `#000000` (Canvas Black) · `--color-text-subtle` → `#8a8e8e` (Quiet Gray) · `--color-accent` → `#1f4fcc` (Royal Blue) · `--color-accent-2` → `#0e76fd` (Electric Blue) · `--color-accent-3` → `#3898ff` (Signal Blue) · `--color-on-accent` → `#ffffff` (Bright White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1b1c1e` | 17.05:1 | AAA |
| `#ffffff` | `#f0f1f5` | 1.13:1 | fail |
| `#000000` | `#1b1c1e` | 1.23:1 | fail |
| `#000000` | `#f0f1f5` | 18.61:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#8a8e8e` | `#000000` | 6.34:1 | AA |
| `#8a8e8e` | `#1b1c1e` | 5.15:1 | AA |
| `#8a8e8e` | `#f0f1f5` | 2.93:1 | fail |
| `#8a8e8e` | `#ffffff` | 3.31:1 | AA-large |

### Gradients

- `linear-gradient(rgb(0, 0, 0), rgb(28, 29, 31))`
- `linear-gradient(to right, rgb(56, 152, 255), rgb(122, 112, 255))`
- `linear-gradient(270deg, rgb(255, 98, 87), rgb(255, 92, 160))`
- `linear-gradient(270deg, rgb(29, 161, 242), rgb(29, 125, 242))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SFRounded | `--font-body` | webfont | 600, 700, 500, 800 | Primary display and interface type for headings, body copy, actions, and links. | Nunito Sans |
| SFMono | `--font-mono` | webfont | 400 | Install command and other code-like snippets. | Roboto Mono |

- **SFRounded:** Rounded sans character; measured weights span 500–800, with bold headings and buttons. Mixed case; slightly open tracking.
- **SFMono:** Regular monospace treatment for technical strings; preserve a code-like, clearly distinct texture.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 700 | 1 | 0.007em | — | SFRounded | Large, bold hero statement and primary page headline. |
| h2 | 40px | 700 | 1 | 0.009em | — | SFRounded | Major section headings, including customization and community blocks. |
| h3 | 24px | 600 | 1.17 | 0.015em | — | SFRounded | Supporting feature or subsection headings. |
| h4 | 20px | 700 | 1.05 | 0.017em | — | SFRounded | Compact card and interface headings. |
| body | 16px | 600 | 1.31 | 0.022em | — | SFRounded | Introductory copy, descriptions, and supporting explanatory text. |
| caption | 14px | 500 | 1.29 | 0.025em | — | SFRounded | Small labels, muted supporting details, and interface captions. |
| button | 16px | 700 | normal | 0 | — | SFRounded | Bold, compact labels on primary actions. |
| link | 20px | 700 | 1.05 | 0.017em | — | SFRounded | Prominent documentation and section links. |
| code | 14px | 400 | 1 | 0.025em | — | SFMono | Monospaced package-install command in the hero. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 5, 6, 8, 12, 16, 18, 19, 20, 24, 28, 32, 40, 48, 64 px.
- Section rhythm 128px · element gap 12px · card padding — · max content width 944px.

Use a centered, single-column page with a measured maximum content width of 944px and generous vertical separation between major sections. The hero stacks brand, headline, supporting line, command field, documentation action, and product imagery on the center axis. The customer logo area becomes a six-column grid; the developer benefits use two columns. Alternate full-width dark, black, blue, and light section bands to establish pacing. Keep copy centered and compact, with broad breathing room around the wallet previews and section transitions.

## Shape & elevation

- Radius: button `50%` · card `24px` · media `12px` · link `9999px` · xs `6px` · sm `10px` · md `12px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.4) 0px 8px 24px 0px`
- Shadow `inset` (button): `rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`
- Shadow `hairline` (other): `rgb(255, 255, 255) 0px 0px 0px 4px`
- Shadow `lg` (link): `rgba(27, 29, 31, 0.1) 0px 10px 30px 0px, rgba(27, 29, 31, 0.04) 0px 5px 15px 0px`
- Shadow `inset-2` (media): `rgba(3, 35, 98, 0.4) 0px 4px 10px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px inset`
- Shadow `md-2` (button): `rgba(0, 0, 0, 0.1) 0px 4px 12px 0px`
- Motion: standard transition `0.1s ease` on interactive elements.

Use soft shadows to lift wallet dialogs, phone previews, and primary actions rather than outlining every surface. The layered hero mockups create depth through overlap and contrast between charcoal panels and black canvas. Keep borders understated; measured button treatment includes a subtle inset highlight, while card and media corners are generously rounded.

## Imagery

Product imagery is the main visual proof: dark wallet-connection dialogs and a phone mockup sit beneath the hero copy, while a light dialog appears within the blue customization showcase. Use crisp interface previews with rounded corners, layered overlap, and subtle glow against dark backgrounds. Customer logos and wallet icons are small supporting marks; no photography-led art direction is evident.

## Components

### Top navigation

Compact brand mark and version badge at the upper left; a blue rounded Connect Wallet action anchors the upper right.

### Hero command and CTA

Centered hero pairs a dark pill-shaped install command in SFMono with a vivid blue-to-violet documentation action.

### Wallet preview

Large charcoal connection dialog and overlapping phone preview show wallet choices, explanatory content, and product UI.

### Customer logo grid

A centered trust statement sits above a six-column collection of compact customer logos and names.

### Customization demo

A saturated blue section frames a light wallet modal and a row of visual customization controls.

### Developer checklist

Centered heading and description lead into two columns of concise benefits marked with green status icons.

### Community footer

Cloud-colored closing panel combines a centered community heading, compact paragraph, pill actions, and understated links.

### Measured component styles

- **Primary button** (“Connect Wallet”): background #3898ff · text #ffffff · radius 12px · padding 0px 14px · 700 16px SFRounded · shadow rgba(0, 0, 0, 0.1) 0px 4px 12px 0px
- **Secondary button** (“Get a Wallet”): background #0e76fd · text #000000 · border 1px solid #f5f5f5 · radius 9999px · padding 4px 12px · 400 16px Arial
- **Link** (“Coinbase”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px SFRounded
- **Card** (“Connect a Wallet Popular Rainbow Base Me”): background #ffffff · text #ffffff · border 1px solid · radius 24px · padding 0px · 400 16px SFRounded · shadow rgba(0, 0, 0, 0.32) 0px 8px 32px 0px

## Do

- Use near-black as the dominant canvas.
- Reserve vivid blue for actions and focused accents.
- Center the hero copy and keep it visually compact.
- Show real wallet-interface previews as product proof.
- Alternate dark bands with the saturated demo and light footer.
- Use rounded shapes and soft, restrained elevation.

## Don't

- Do not turn the page into a flat light theme.
- Do not spread accent colors evenly across every section.
- Do not replace interface previews with generic stock photography.
- Do not add heavy borders around every panel.
- Do not make the hero content left-aligned or crowded.
- Do not let the customer logos overpower the product.

## Agent prompt

Build a new RainbowKit-style developer page on a near-black Canvas Black (#000000) foundation. Use Graphite Panel (#1b1c1e) for dark section bands and Bright White (#ffffff) for readable headline and body text. Keep Signal Blue (#3898ff) for the primary wallet action, with Electric Blue (#0e76fd) and restrained violet or pink accents for secondary controls. Use SFRounded or a close rounded sans for interface and display text, reserving SFMono for code snippets. Center a spacious hero, then show detailed wallet UI previews with soft shadows and rounded corners. Separate sections with strong full-width color changes, including a vivid blue customization showcase and a Cloud Surface (#f0f1f5) closing area. Favor compact copy, clear hierarchy, and product-specific UI over decorative imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy and command above overlapping desktop wallet modal and phone preview. | connect wallet action, install command, documentation link | black canvas, blue CTA, charcoal interface mockups, centered typography |
| 2 | logo-cloud | Centered trust statement above a six-column grid of customer marks. | social proof, customer destinations | dark section band, compact logos, even grid |
| 3 | product-showcase | Full-width blue band with centered copy, wallet modal, and customization controls. | product preview, visual customization | blue gradient-like field, light dialog, swatch controls |
| 4 | feature-grid | Centered heading and paragraph above a two-column list of benefits. | scanable benefits, documentation CTA | charcoal band, green check icons, two-column checklist |
| 5 | footer | Light closing panel with centered community copy, actions, and compact footer links. | follow social link, send feedback, footer navigation | Cloud Surface background, dark text, pill action buttons |

## Source CSS custom properties (selected)

```css
--colors-light-transparent: transparent;
--colors-light-green10: #EAFCE8;
--colors-light-green20: #CDFACD;
--colors-light-green30: #A6F5AC;
--colors-light-green40: #74E082;
--colors-light-green50: #4BD166;
--colors-light-green60: #1DB847;
--colors-light-green70: #189943;
--colors-light-green80: #09752D;
--colors-light-green90: #09752D;
--colors-light-green100: #003D18;
--colors-light-blue10: #EDF9FF;
--colors-light-blue20: #D1EDFF;
--colors-light-blue30: #A3D7FF;
--colors-light-blue40: #6BBFFF;
--colors-light-blue50: #3898FF;
--colors-light-blue60: #0E76FD;
--colors-light-blue70: #1761E0;
--colors-light-blue80: #0B4AB8;
--colors-light-blue90: #053085;
--colors-light-blue100: #001E59;
--colors-light-purple10: #F7F5FF;
--colors-light-purple20: #E7E0FF;
--colors-light-purple30: #C6B8FF;
--colors-light-purple40: #9E8FFF;
--colors-light-purple50: #7A70FF;
--colors-light-purple60: #5F5AFA;
--colors-light-purple70: #5248E0;
--colors-light-purple80: #4936C2;
--colors-light-purple90: #38228F;
--colors-light-purple100: #2A0C66;
--colors-light-pink10: #FFF0FA;
--colors-light-pink20: #FFD6F1;
--colors-light-pink30: #FFB8E2;
--colors-light-pink40: #FF99CF;
--colors-light-pink50: #FF7AB8;
--colors-light-pink60: #FF5CA0;
--colors-light-pink70: #E04887;
--colors-light-pink80: #CC3976;
--colors-light-pink90: #851B53;
```

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