Signal Blue
#0e76fdPrimary CTA fill, active states, brand wordmark, link emphasis — the only chromatic blue with enough surface area to carry identity
RainbowKit
rainbowkit.com
Website preview
The design language
RainbowKit uses a midnight crypto-native language: a black canvas with floating dark cards, confident rounded sans-serif typography, and a single vivid blue-to-violet gradient as the brand's emotional core. The design lives in the gap between developer-tool severity and consumer-app approachability — heavy shadows create depth on a flat dark surface, inset white border highlights define button edges, and 9999px radii make every interactive feel like a friendly pill. Color is used surgically: a primary signal blue for action, the aurora gradient for the hero CTA, and pure white text against layered grays for hierarchy. Component modals float with dramatic 24px shadow stacks, previewing the toolkit's own product surfaces. The six-column partner grid below signals community trust at scale without resorting to testimonials.
Color palette
brand
Aurora Gradient
#3898ffHero CTA gradient, brand wordmark highlight, selected-state washes — flows from sky-blue to electric violet
Electric Violet
#7a70ffGradient terminus, brand-secondary accent — appears only as the cool half of the aurora
accent
Deep Iris
#38228fViolet wash for highlight backgrounds, decorative bands, and soft emphasis behind content.
Hyper Pink
#ff5ca0Accent spectrum — demonstration option in the wallet-customization showcase, not a UI-state color
Ember Red
#fa423cAccent spectrum — demonstration option in wallet-customization showcase
Solar Orange
#ff801fAccent spectrum — demonstration option in wallet-customization showcase
Toxic Green
#1db847Accent spectrum — demonstration option in wallet-customization showcase
neutral
Void
#000000Page canvas, deepest surfaces, inverted button borders — true black anchors the entire system
Obsidian
#1b1c1eCard surfaces, code blocks, modal containers, body text on light — the workhorse elevated surface
Shadow
#121314Shadow tint color (used in box-shadow rgba), near-black with a hint of warmth
Graphite
#25292eHairline borders, dividers, icon stroke, secondary text on dark — the most-used neutral border in the system
Slate
#2f3334Secondary borders, subtle dividers between sections — sits between Graphite and Pewter
Carbon
#353a3bTertiary icon fills, disabled-state borders, subtle backgrounds
Pewter
#646566Disabled button background, low-emphasis surfaces — never for text
Fog
#95979cMuted helper text, icon secondary, placeholder text — the only gray that carries readable information
Snow
#ffffffPrimary text, inverted button fill, light-surface backgrounds, icon glyphs, hairline highlight borders
Mist
#f0f1f5Light-theme surface fallback, very subtle off-white for section backgrounds on the demo
Typography
Type scale
Major Second (1.125) · 16px basedisplay
52px · 700 · 1 · 1.3px trackingThe quick brown fox jumps
heading-lg
40px · 700 · 1.05 · 0.88px trackingThe quick brown fox jumps
heading
24px · 600 · 1.17 · 0.43px trackingThe quick brown fox jumps
heading-sm
20px · 700 · 1.2 · 0.3px trackingThe quick brown fox jumps
subheading
18px · 800 · 1.33 · 0.31px trackingThe quick brown fox jumps
body
16px · 400 · 1.25 · 0.27px trackingThe quick brown fox jumps
body-sm
14px · 700 · 1.29 · 0.35px trackingThe quick brown fox jumps
text-13
13px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
SFRounded
- Weights
- 400, 500, 600, 700, 800
- Sizes
- 11px, 14px, 16px, 18px, 20px, 24px, 40px, 52px
- Line height
- 1.00–1.33
- Letter spacing
- Positive throughout (0.007–0.032em) — unusual for a display font; tracking opens up with size, giving headlines a roomy, friendly rhythm rather than the tight compressed look of typical tech brands
- Fallback
- Nunito, Inter (rounded variant), Avenir Next Rounded
Primary typeface for all UI — rounded geometric sans, chosen because the soft terminals make technical Web3 copy feel approachable rather than intimidating
Additional typeface
SFMono
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.00
- Letter spacing
- 0.0250em
- Fallback
- JetBrains Mono, Fira Code, SF Mono
Code snippets, terminal commands, technical strings — the npm install command in the hero
Additional typeface
system-ui
- Weights
- 400
- Sizes
- 20px
- Line height
- 1.05
- Letter spacing
- 0.0170em
Fallback body copy when the web font hasn't loaded — barely visible because SFRounded dominates
Additional typeface
Arial
- Weights
- 400
- Sizes
- 13px, 16px
- Line height
- 1.2
Arial — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 12px
Border radius
tags
9999pxcards
24pxicons
12pxpills
9999pxinputs
12pxmodals
24pxbuttons
9999pxcodeBlocks
12pxlogoFrames
9999pxSpacing scale
1px2px4px5px6px8px10px12px14px16px18px19px20px24px28px32px40px48px64px112px128px201px216px316pxGuidelines
Do
- Use 9999px radius for every button, tag, and pill — the radius is the brand's friendliness signal
- Apply the 1px inset white border (rgba(255,255,255,0.12)) to all elevated interactive elements on Obsidian surfaces
- Use the aurora gradient (linear-gradient(to right, #3898ff, #7a70ff)) only for primary hero CTAs and the wordmark — reserving it makes it feel premium
- Default to #0e76fd for all secondary action buttons and link emphasis
- Set body copy at 16px SFRounded weight 400 with 0.27px letter-spacing; headlines at 40-52px weight 700 with 0.88-1.3px letter-spacing
- Float product cards with rgba(0, 0, 0, 0.4) 0px 8px 24px 0px — the heavy shadow is what makes a modal feel like a window into the product
- Keep the canvas at true #000000 — never warm it with off-black, the void is the point
Don’t
- Don't use the chromatic accent colors (Hyper Pink, Ember Red, Solar Orange, Toxic Green) as semantic UI states — they are demonstration options, not success/error/warning tokens
- Don't apply shadow to text or the canvas itself — shadows belong to floating cards only, the background is shadowless
- Don't use negative letter-spacing — SFRounded is designed for positive tracking; tightening it fights the rounded letterforms
- Don't introduce a second body font — SFRounded handles everything from 11px captions to 52px displays; a serif or system fallback breaks the cohesion
- Don't place white or light-colored cards on the canvas — every surface must stay in the Obsidian/Graphite range to preserve the void
- Don't use #25292 for text — it's a border color, contrast on it is insufficient for readable copy
- Don't round images of phones or product screenshots with small radii — they should be 24px+ or fully inherit the device frame
Components
Gradient Primary CTA
The hero action — invites the visitor into the documentation.Filled button with linear-gradient(to right, #3898ff, #7a70ff), white text at 16px SFRounded weight 500, letter-spacing 0.27px. Padding 12px 24px. Radius 9999px (pill). White inset border highlight at rgba(255,255,255,0.12) for edge definition. On elevation: two-layer soft shadow.
Solid Blue Pill Button
Secondary CTAs and persistent nav actions like 'Connect Wallet'.Background #0e76fd, white text, 16px SFRounded weight 500. Padding 6px 16px. Radius 9999px. Sits in the top-right of the nav. Compact, high-contrast, unmistakable.
Ghost Nav Button (Logo + Version)
Brand identification in the nav bar with version metadata.Rainbow gradient icon (app-style) followed by 'RainbowKit' text in white at 14px weight 600, with a small version badge (1.3.10) using Pewter background, white text at 11px, radius 9999px, padding 1px 5px.
Terminal Code Block
Copy-paste installation command in the hero.Dark surface (#1b1c1 or near-black) with a subtle white border. Contains monospace text (SFMono 14px) showing npm command. Includes a small copy-icon button on the right side. Padding ~12px 18px. Radius 12px.
Wallet Connection Modal
The product showcase — the actual RainbowKit component floating on the landing page.Card at 24px radius, Obsidian surface (#1b1c1e), heavy shadow (rgba(0,0,0,0.4) 0px 8px 24px). Header row with title 'Connect a Wallet' and close X icon. Body has a 'Popular' label, then a list of wallet items (Rainbow, Coinbase Wallet, MetaMask, WalletConnect) with brand icons and right-arrow chevrons. A 'More' section below with Ledger Live. All text white at 16px SFRounded weight 500.
Wallet List Item
Selectable option inside the connection modal.Row with: circular wallet brand icon (32px), wallet name in white 16px weight 500, optional right chevron. Subtle hover state would lift the row background. Padding ~12px vertical, 16px horizontal.
What-is-a-Wallet Info Card
Educational companion card explaining wallets next to the connection modal.Same Obsidian surface and shadow as the modal. Contains a heading 'What is a Wallet?' in white 20px, followed by short paragraphs of body text (14-16px) and small inline feature icons. Functions as a secondary educational surface beside the primary action.
Mobile Preview Card
Showcases the wallet UI on a phone frame, demonstrating responsive behavior.Vertical phone frame with rounded corners, displaying the same 'Connect a Wallet' modal scaled down. Background slightly lighter to separate from the canvas. Acts as a visual product screenshot, not an interactive component.
Section Heading Block
Centered section titles with supporting copy.Centered text block. Main heading in white 20-24px SFRounded weight 600. Supporting paragraph in Fog (#95979c) 16px weight 400. Generous vertical spacing above and below. Used to introduce the partner grid.
Partner Logo Grid Item
Brand trust marker — a 6×n grid of partner logos.Circular logo container (radius 9999px) with the brand's actual logo. Below: brand name in white 14px weight 500. Gap between items 40-60px horizontally. No background fill — the logo floats on Void. Logos are full-color brand assets, not monochrome.
Inset Highlight Border
The defining visual signature of interactive elements on dark surfaces.1px inset border in rgba(255,255,255,0.12) applied to buttons and elevated cards. Creates a subtle lit-edge effect that mimics light catching the top of a physical surface — the only reason buttons read as 'raised' in a fully dark UI.
Gradient Brand Wordmark
The 'RainbowKit' hero title.Text rendered with the aurora gradient (#3898ff → #7a70ff) as a CSS background-clip:text fill, at 40-52px SFRounded weight 700, letter-spacing 1.3px. The gradient is applied to the entire word, not individual letters.
Surfaces & elevation
Level 0
Void Canvas
#000000Page background, full-bleed dark ground
Level 1
Obsidian Card
#1b1c1Modals, code blocks, elevated containers above the canvas
Level 2
Graphite Edge
#25292Hairline borders that separate and outline elements on Obsidian
Level 3
Deep Iris Feature
#38228fBrand-tinted card surface for premium or featured components
Floating product cards and modals
rgba(0, 0, 0, 0.4) 0px 8px 24px 0px
Button inset highlight
rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset
Primary gradient button (hover/elevated)
rgba(27, 29, 31, 0.1) 0px 10px 30px 0px, rgba(27, 29, 31, 0.04) 0px 5px 15px 0px
Subtle elevated card
rgba(0, 0, 0, 0.1) 0px 4px 12px 0px
Featured brand card
rgba(0, 0, 0, 0.32) 0px 8px 32px 0px
Focus ring
rgb(255, 255, 255) 0px 0px 0px 4px
Layout & imagery
Layout
Full-bleed dark canvas (#000000) with all content centered within a 1200px max-width. Hero: centered single-column stack — brand wordmark → H1 headline → subtext → terminal code block → gradient CTA. Below the hero, a floating product showcase zone overlaps the section boundary: a 2-column arrangement of the wallet connection modal (left), an educational info card (middle), and a mobile phone preview (right), each floating with heavy shadows. Section rhythm alternates: centered headline → 6-column partner logo grid → centered closing band. Vertical section gaps are large (80-120px) to let the dark canvas breathe. Navigation is a minimal top bar (logo+version left, single CTA right) with no mega-menu or sidebar. The mobile preview card overlaps into the next section to create visual flow between bands.
Imagery
Imagery is sparse and product-centric. The only visual content is product screenshots of the RainbowKit component itself (the wallet connection modal and a mobile phone preview) plus the six-column partner logo grid. Logos are full-color brand assets presented in circular frames (9999px radius), never monochrome duotones. No photography, no illustration, no abstract graphics, no 3D renders. The modal screenshots serve as both marketing visual and product proof — they ARE the hero. The void canvas is itself a design choice: the absence of decorative imagery signals developer-tool seriousness while the rounded typography and gradient CTA push back toward consumer-app warmth.
Design notes
Agent Guide
## Quick Color Reference - text: #ffffff (primary), #95979c Fog (muted) - background: #000000 Void (canvas), #1b1c1e Obsidian (cards) - border: #25292e Graphite (hairlines), rgba(255,255,255,0.12) (inset highlights) - accent: aurora gradient #3898ff → #7a70ff - primary action: #0e76fd (filled action) ## Example Component Prompts *Create a Primary Action Button: #0e76fd background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. **Solid Blue Nav Button**: Build a compact pill button with #0e76fd background, white 'Connect Wallet' text at 16px SFRounded weight 500, padding 6px 16px, radius 9999px, no shadow. **Wallet Connection Modal Card**: Compose a card on #1b1c1e Obsidian with 24px radius, shadow rgba(0,0,0,0.4) 0px 8px 24px 0px. Header: 'Connect a Wallet' in white 16px SFRounded weight 600, with a small × close icon top-right at #95979c. Body: 'Popular' label in Fog 14px, then 4 list rows (Rainbow, Coinbase Wallet, MetaMask, WalletConnect) each with a 32px brand icon, white 16px name, and right chevron at #95979c. **Terminal Code Block**: Render a dark code container at #1b1c1e Obsidian with 12px radius and a 1px Graphite border. Inside: monospace text 'npm init @rainbow-me/rainbowkit@latest' at 14px in SFMono, white. Right side: small copy icon at 16px in #95979c. Padding 12px 18px. **Gradient Brand Wordmark**: Display 'RainbowKit' as text with the aurora gradient (linear-gradient(to right, #3898ff, #7a70ff)) applied via background-clip:text, at 40-52px SFRounded weight 700, letter-spacing 0.88-1.3px, white fill where the gradient is masked. Center it on the void canvas.
Similar brands
WalletConnect
Same dark-void canvas with floating product modals and a single blue accent — the wallet-connection category has converged on this visual language
Privy
Identical approach: black canvas, pill-shaped CTAs, rounded sans typography, and a blue-to-violet gradient as the primary brand moment
Dynamic
Same midnight-mode UI with pill buttons, rounded geometry, and a single chromatic accent (blue) against pure black backgrounds
Web3Auth
Developer-tool dark UI with floating auth modals, gradient brand moments, and rounded typography that softens the cryptographic seriousness
Stripe (docs)
Same floating-card-on-dark approach for showcasing product components, though Stripe's accent is purple rather than blue
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
