Wise V2 Design System Gallery
Visual preview of all tokens, components, and patterns extracted from the official Wise Design System documentation.
Color Tokens
35+ CSS custom properties. Corrected SaaS palette v2.0. See full palette comparison →
Accents
#5667EA
Azul Royal
--color-accent-blue
Primary actions, metrics, Meta Ads
#B8E62E
Lima Vibrante
--color-accent-lime
CTA, progress, Google Ads
#8F4BE8
Roxo Eletrico
--color-accent-purple
Creatives, secondary charts, TikTok
#38A9D4
Ciano Claro
--color-accent-cyan
Links, badges, info chips
Content
#141418
Content Primary
--color-content-primary
Light: #141418Dark: #e8eaed
Headings, body text
#6B7280
Content Secondary
--color-content-secondary
Light: #6B7280Dark: #d1d5db
Labels, captions, secondary text (AA compliant)
#8F96A3
Content Tertiary
--color-content-tertiary
Light: #8F96A3Dark: #9ca3af
Muted/decorative text only (AA Large)
#5667EA
Content Link
--color-content-link
Light: #5667EADark: #818cf8
Links and link icons
Interactive
#5667EA
Interactive Primary
--color-interactive-primary
Light: #5667EADark: #818cf8
Buttons, focus rings, active items
#B8E62E
Interactive Accent
--color-interactive-accent
Light: #B8E62EDark: #B8E62E
High-energy CTA, progress fills
#D8D8DC
Interactive Secondary
--color-interactive-secondary
Light: #D8D8DCDark: #4b5563
Input borders, dividers
#2E4006
Interactive Control
--color-interactive-control
Light: #2E4006Dark: #2E4006
Text/icons ON Lima accent
Background
#F4F4F5
Background Screen
--color-background-screen
Light: #F4F4F5Dark: #0f1117
Page background
#FFFFFF
Background Elevated
--color-background-elevated
Light: #FFFDark: #1a1d27
Cards, modals, elevated surfaces
#ECECEE
Background Neutral
--color-background-neutral
Light: #ECECEEDark: rgba(255,255,255,.08)
Panels, table headers, inner areas
Support
#E9D9F9
Lavanda Suave
--color-support-lavender
Purple badge/chip backgrounds
#D9EEF7
Azul Gelo
--color-support-ice-blue
Info badge/link backgrounds
#F0FAD4
Lima BG
--color-support-lime-bg
Lima badge/chip backgrounds
#EEF0FD
Blue Light
--color-accent-blue-light
Blue badge/hover backgrounds
Sentiment / Feedback
#C62828
Sentiment Negative
--color-sentiment-negative
Light: #C62828Dark: #fca5a5
Errors, destructive actions
#2E7D32
Sentiment Positive
--color-sentiment-positive
Light: #2E7D32Dark: #86efac
Success, positive alerts
#F9A825
Sentiment Warning
--color-sentiment-warning
Light: #F9A825Dark: #fde68a
Warnings. Use #7B6813 for text on warning bg
#2563EB
Feedback Info
--color-feedback-info
Informational messages
Typography
Inter for product UI. Wise Sans for display headlines. [NEEDS_VALIDATION] Wise Sans must be available in the final environment.
Display Styles (Wise Sans)
Display Large
96px / Bold / 85% line-height / 2% tracking
Display Medium
64px / Bold / 85% line-height / 1.5% tracking
Display Small
40px / Bold / 85% line-height / 1.5% tracking
Product Styles (Inter)
Title Screen
30px / Semi Bold / 34px line-height / -2.5%
Title Section
26px / Semi Bold / 32px / -1.5%
Title Subsection
22px / Semi Bold / 28px / -1.5%
Title Body
18px / Semi Bold / 24px / -1%
Body Large — The quick brown fox jumps over the lazy dog. Money without borders.
16px / Regular / 24px / -0.5%
Body Default — The quick brown fox jumps over the lazy dog. International transfers made simple.
14px / Regular / 22px / 1%
Link Large
Link Default
Links: Semi Bold + Underline
Spacing Scale
18 base values from 4px to 128px. 8px grid base.
--space-4
--space-8
--space-12
--space-16
--space-24
--space-32
--space-40
--space-48
--space-56
--space-64
--space-72
--space-80
--space-88
--space-96
--space-104
--space-112
--space-120
--space-128
Padding Tokens
8px
16px
24px
32px
Radius Tokens
Adaptive per platform. Mobile radius values must be applied via breakpoint.
Desktop
16pxsmall
20pxmedium
30pxlarge
40pxx-large
60px2x-large
Mobile
10pxsmall
16pxmedium
24pxlarge
32pxx-large
48px2x-large
Buttons
Primary uses --color-interactive-accent bg + --color-interactive-control text. Height: 48px (large). Focus: 2px outline, 2px offset.
Priorities
Sizes
States
Focus Ring Spec
2px / 2px offset / interactive-primary
2px / 2px offset / sentiment-negative
Inputs
Border: --color-interactive-secondary. Focus: 3px solid --color-interactive-primary. Error: --color-sentiment-negative. Use label + description, never placeholder alone.
As shown on your ID
Default state
As shown on your ID
Focus: 3px solid interactive-primary
We'll send confirmation here
Please enter a valid email address
Optional
Disabled state
Money Input
BRL ▾
Search Input
Cards
Small (88-300px), Large (300px+). Uses radius-medium and official spacing.
Image
Small Card
88-300px width
Image
Large Card
300px+ width. Content grows with card size. Used for featured content and promotional blocks.
Image
Clickable Card
Hover for shadow
Neutral Card
Uses background-neutral, no border
List Items
7 variants documented. Navigation, Switch, Checkbox, Radio, No Action.
Navigation
RS
Rodrigo Shinpai
Personal account
JS
John Smith
GBP account
+
Add new recipient
Switch
Push notifications
Alerts on your phone
Email updates
Receive email notifications
Checkbox [NEEDS_VALIDATION]
✓
Terms and conditions
Marketing emails
Specs behind Neptune auth
Radio [NEEDS_VALIDATION]
Bank transfer
Debit card
Specs behind Neptune auth
No Action
✓
Transfer sent
1,000.00 BRL to John Smith
Feedback Components
Action prompts, snackbars, progress, spinners, and state screens.
Action Prompts
Payment failed
We couldn't process your payment. Please check your card details and try again.
Rate may change
The exchange rate is guaranteed for 48 hours. After that, we'll use the live rate.
Verification complete
Your identity has been verified. You can now send up to 1,000,000 BRL per transfer.
Snackbar
Progress
Step 1 of 4 — Recipient details
Step 3 of 4 — Review
Complete
Spinner
Processing your transfer...
State Screens
No transactions yet
Your transaction history will appear here once you make your first transfer.
Something went wrong
We're having trouble loading this page. Please check your connection and try again.
Transfer complete!
1,000.00 BRL has been sent to John Smith. They should receive 158.23 GBP within 24 hours.
Overlays
Modal desktop: 540px width, max-height 800px, 80px safe zone. Bottom sheet: mobile full width.
Modal
Confirm transfer
You're about to send 1,000.00 BRL to John Smith. The recipient will receive approximately 158.23 GBP. This action cannot be undone.
Max: 540px x 800px | Safe zone: 80px from viewport edges
Bottom Sheet
Choose currency
🇧🇷
BRL — Brazilian Real
🇬🇧
GBP — British Pound
🇺🇸
USD — US Dollar
Mobile: full width, swipeable. Desktop: converts to centered dialog.
Popover
The mid-market rate is the midpoint between buy and sell prices. Wise uses this rate for your transfers.
Product Patterns
Common product flow patterns using Wise V2 components and tokens.
Transfer Review
You send1,000.00 BRL
Fee7.64 BRL
Rate1 BRL = 0.1594 GBP
They receive158.23 GBP
Currency Conversion
BRL ▾
↓
GBP ▾
Rate: 1 BRL = 0.1594 GBP · Fee: 7.64 BRL
Form Validation
Please enter a valid email address
Password must be at least 8 characters
Empty State
📋
No recipients
Add someone to send money to.
Success Screen
✓
Money on its way!
158.23 GBP to John Smith
Arrives by May 15, 2026
Error Screen
!
Transfer failed
Your bank declined the payment. Please try a different payment method.
Progress Screen
Processing transfer...
Verifying recipient details
This usually takes less than a minute.
Dark Mode Preview
All components using dark mode token values.
Components in Dark Mode
Buttons
Input
Card
Image
Dark Card
Card in dark mode with elevated background.
Snackbar
Action Prompt
Identity verified
You can now send up to 1,000,000 BRL per transfer.
AI Agent Rules
Non-negotiable rules for any AI agent generating UI using Wise V2.
⚠ Use only documented tokens. Never hardcode colors or spacing.
⚠ Use only documented components. Never invent new ones.
🎨 Never invent colors. Only use the 22 official CSS custom properties.
📏 Never invent spacing. Only use size-4 through size-128.
⏳ Always include loading, error, and empty states for every screen.
♿ Always include accessibility: ARIA, keyboard nav, focus rings, contrast.
❓ Mark unknowns as validation_needed. Never guess token values.
Mandatory Output Format (JSON)
{
"screen_name": "",
"components_used": [],
"tokens_used": [],
"patterns_used": [],
"states_covered": [],
"accessibility_notes": [],
"validation_needed": []
}
Component Selection Logic
| Need | Use | Never Use |
|---|---|---|
| Primary action | Button Primary | Link styled as button |
| Cancel/dismiss | Button Secondary or Tertiary | Red button (unless destructive) |
| Destructive action | Button Negative | Primary button |
| Navigate | List Item Navigation | Custom link row |
| Toggle setting | List Item Switch | Checkbox for on/off |
| Brief feedback | Snackbar | Alert/Modal |
| Blocking prompt | Action Prompt or Modal | Snackbar |
| Currency entry | Money Input | Plain text input |
Pending Items
Items requiring validation, export, or access before full completion.
| Item | Impact | Priority | How to Resolve |
|---|---|---|---|
| Checkbox / Radio / Switch [NEEDS_VALIDATION] | Component stubs only; detailed specs behind Neptune auth | P0 | Request Neptune Web access, extract full component specs |
| Dropdown / Select [NEEDS_VALIDATION] | No detailed spec available in public docs | P0 | Request Neptune Web access |
| Motion timing values [NEEDS_VALIDATION] | No ms durations or cubic-bezier curves in source docs | P1 | Export from Figma motion specs or Neptune Web |
| Elevation / shadow tokens [NEEDS_VALIDATION] | Box-shadow values are estimated, not confirmed | P1 | Export from Figma or inspect Neptune Web |
| Illustration guidelines | Page locked in source documentation | P1 | Request access from Brand team |
| Neptune Web component props / TypeScript | Engineering cannot implement without prop tables | P0 | Validate Neptune Web / Storybook access (GitHub auth) |
| Brand Strategy page | Locked / confidential in source docs | P1 | Request access from Brand team |
| Promo Assets page | Marketing patterns incomplete without this | P2 | Request access from Marketing team |
| Wise Sans font file [NEEDS_VALIDATION] | Display typography falls back to Inter without it | P1 | Obtain font files from Brand team or CDN |
Wise V2 Design System Gallery — v0.1 Preview — Generated 2026-05-13
Source: wise.design · 22 color tokens · 14 typography styles · 18 spacing values · 5 radius tiers · 14+ component previews
Score: 90/100 · Ready to share: Yes · Dark mode: Supported · WCAG: AA target