# Rainbowkit · Design system migration spec

> Source: https://www.rainbowkit.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of modern developer tooling aesthetics, combining a friendly, approachable brand with a technically precise and highly functional interface.

## 1. Identity DNA

RainbowKit's design system is built on a clear premise: a developer tool should be both technically precise and approachably friendly. Its visual language acts as a **bridge**, using high-contrast clarity and vibrant accents to guide users through the complex process of connecting Web3 wallets.

**One-liner:** The best way to connect a wallet for Web3 applications.
**Keywords:** Web3 · wallet · connect · developer · rainbow
**Analogy:** A friendly, colorful bridge between developers and blockchain wallets.

## 2. Color

The palette is anchored by a deep black field, creating a canvas where vibrant blue and purple gradients become the primary signifiers of action and identity. This dark base ensures high contrast for readability while the saturated accents provide necessary visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#1B1C1E` | card background |
| `--bg-quiet` | `#25292E` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#F5F8FF` | secondary text |
| `--muted` | `#8B8B8B` | placeholder |
| `--accent` | `#3898FF` | single accent |
| `--line` | `rgba(245, 248, 255, 0.12)` | divider |

**Color principle:** Dark, high-contrast base with vibrant blue and purple accents for visibility.

The system prioritizes visibility and focus, using color not for decoration but to direct attention to key interactive elements.

## 3. Typography

Typography follows a dual strategy: a humanist-sans delivers approachable clarity for all primary UI text, while monospace is reserved for code snippets and version numbers, maintaining technical honesty. Headlines are set with tight letter-spacing to reinforce the system's compact, efficient aesthetic.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.0 | 700 | -1px | Main hero headline |
| heading | 24px | 1.2 | 600 | 0px | Section headings and sub-headers |
| body | 16px | 1.3 | 400 | 0.35px | General body text |
| caption | 13px | 1.2 | 400 | 0px | Version badge and small labels |

**Type rules:**
- Use humanist-sans for all primary UI text
- Use monospace for code snippets and version numbers
- Maintain tight letter-spacing for headlines

## 4. Spacing

A consistent vertical rhythm based on 4px increments establishes a disciplined foundation for component placement and layout spacing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** Consistent vertical rhythm based on 4px increments, with generous padding for hero sections.

## 5. Surfaces

Surfaces are defined by deep containers with subtle luminous borders, creating a sense of depth without heavy shadowing. This approach uses inset glows and minimal drop shadows to maintain a clean, layered interface against the dark background.

- **Radius:** sm 6px · md 12px · lg 24px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.4) 0px 8px 24px 0px
  - rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset
- **Borders:** 1px solid rgba(245, 248, 255, 0.12)

## 6. Layout

The layout employs a centered, single-column skeleton for content-heavy sections, ensuring a clear and linear narrative flow. Full-width dark backgrounds frame this central column, providing strong visual containment and focus.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column layout for content-heavy sections, with full-width dark backgrounds.

## 7. Motion & Interaction

Motion is treated as functional feedback rather than embellishment. Short, smooth transitions confirm user actions, while slower, linear fades are used sparingly for background elements to avoid distraction.

- **Durations:** micro 100ms · small 125ms · medium 5000ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transform and opacity transitions for hover states
  - Linear opacity fade for longer background elements

- **Hover:** Slight transform scale and color shift
- **Click:** Immediate feedback with transform reset
- **Transition:** All properties transitioned over 100-125ms
- **Keyboard:** Standard focus outlines using white box-shadow

## 8. Voice & Don'ts

The editorial voice is technical yet approachable, using bold, direct statements to convey functionality with confidence. It avoids corporate formality and unnecessary jargon, especially in primary hero sections.

- **Tone:** Technical, approachable, and confident
- **Headline style:** Bold, direct statements about functionality
- **CTA style:** Clear action-oriented verbs like 'View the Docs' and 'Connect Wallet'
- **Avoid:** Avoid overly corporate or formal language / Avoid unnecessary jargon in hero sections / Avoid cluttering the interface with too many options

### Don'ts
- ❌ Don't use a light theme — the screenshot shows a strictly dark mode interface.
- ❌ Don't use sharp corners — the screenshot shows predominantly rounded and pill-shaped elements.
- ❌ Don't use a single flat color — the screenshot shows vibrant blue and purple gradients.
- ❌ Don't use wide, expansive line heights — the screenshot shows tight, compact vertical spacing.
- ❌ Don't use serif fonts — the screenshot shows a humanist-sans for all primary UI text.
- ❌ Don't use small, cramped buttons — the screenshot shows large, well-padded interactive elements.

The system deliberately omits light themes and sharp corners, committing fully to its dark, rounded, and gradient-rich identity.

## System Prompt (paste into AI tool)

```
RainbowKit is a Web3 developer tool for connecting wallets, designed with a dark, high-contrast interface. It features a black background (#000000) with vibrant blue (#3898FF) and purple gradients as primary accents. The typography uses a humanist-sans category for all UI text and monospace for code snippets, with a bold, tightly-spaced scale. Key features include rounded pill-shaped buttons and large, generous spacing. Critical donts: avoid light themes, sharp corners, or serif fonts. Keep the interface clean and focused on developer experience.
```