CURATED · OPEN · FREE

Rainbowkit

The best way to connect a wallet for Web3 applications.

Developer ToolsDark ModeBold TypographySaaSGradient

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://www.rainbowkit.com

📦 Browse pack contents →

Identity DNA

Web3walletconnectdeveloperrainbow

A friendly, colorful bridge between developers and blockchain wallets.

Color

#3898FFAccent

#FFFFFFInk

#F5F8FFInk soft

#000000BG

#1B1C1EBG soft

#25292EBG quiet

#8B8B8BMuted

rgba(245, 248, 255, 0.12)Line

Dark, high-contrast base with vibrant blue and purple accents for visibility.

Typography

humanist-sans · monospace

display52px · 700
heading24px · 600
body16px · 400
caption13px · 400

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

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

128px

Consistent vertical rhythm based on 4px increments, with generous padding for hero sections.

Surfaces

sm · 6px

md · 12px

lg · 24px

pill · 9999px

1px solid rgba(245, 248, 255, 0.12)

rgba(0, 0, 0, 0.4) 0px 8px 24px 0px · rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

100msmicro

125mssmall

5000msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth transform and opacity transitions for hover states · Linear opacity fade for longer background elements

Slight transform scale and color shift · Immediate feedback with transform reset

Components

button Rounded pill shape with solid blue background and white text
card Dark rounded containers with subtle borders and internal padding
chip Small rounded badges for version numbers or labels
input Dark background with subtle borders, used for command line snippets
hero Large centered text with prominent call-to-action buttons and background gradients

Voice & Don'ts

Tone Technical, approachable, and confident
Headlines Bold, direct statements about functionality
CTAs Clear action-oriented verbs like 'View the Docs' and 'Connect Wallet'

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.
Avoid: Avoid overly corporate or formal language
Avoid: Avoid unnecessary jargon in hero sections
Avoid: Avoid cluttering the interface with too many options

Inside the pack — real screenshots

Rainbowkit — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko