Wise V2 Design System Gallery
Visual preview of all tokens, components, and patterns extracted from the official Wise Design System documentation.
Color Tokens
22 official CSS custom properties. All values confirmed from wise.design documentation.
Core Brand
#163300
Forest Green
--color-forest-green
Core brand, interactive primary
#9FE870
Bright Green
--color-bright-green
Accent, primary button bg (sparingly)
Content
#0E0F0C
Content Primary
--color-content-primary
Light: #0E0F0CDark: #f3f5f1
Emphasize primary content
#454745
Content Secondary
--color-content-secondary
Light: #454745Dark: #e8ebe6
Body text, supportive elements
#6A6C6A
Content Tertiary
--color-content-tertiary
Light: #6A6C6ADark: #cacfc7
Placeholders, 'Optional' labels only
#163300
Content Link
--color-content-link
Light: #163300Dark: #9fe870
Links and link icons
Interactive
#163300
Interactive Primary
--color-interactive-primary
Light: #163300Dark: #9fe870
Interactivity, active items
#9FE870
Interactive Accent
--color-interactive-accent
Light: #9FE870Dark: #9fe870
Primary button backgrounds (sparingly)
#868685
Interactive Secondary
--color-interactive-secondary
Light: #868685Dark: #b9bab7
Input borders, checkboxes. NOT text
#163300
Interactive Control
--color-interactive-control
Light: #163300Dark: #163300
Text/icons ON Bright Green
Background
#FFFFFF
Background Screen
--color-background-screen
Light: #FFFDark: #121511
Page background
#FFFFFF
Background Elevated
--color-background-elevated
Light: #FFFDark: #1e211d
Bottom sheets, sidebars
rgba(22,51,0,0.08)
Background Neutral
--color-background-neutral
Light: rgba(22,51,0,.08)Dark: rgba(255,255,255,.10)
Areas without borders
Sentiment
#A8200D
Sentiment Negative
--color-sentiment-negative
Light: #A8200DDark: #FFBFBD
Errors, destructive actions
#2F5711
Sentiment Positive
--color-sentiment-positive
Light: #2F5711Dark: #A0E5AE
Positive alerts
#EDC843
Sentiment Warning
--color-sentiment-warning
Light: #EDC843Dark: #EDD272
Alert backgrounds ONLY
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