Feature card
Clear border, white surface, compact benefits, and a direct link.
Explore →Design system preview
A Wise-specific catalog of bright green action, forest text, pill controls, transparent fee rows, currency flags, and calculator-first product UI.
01 / Colors
Wise color is direct: bright green signals momentum, forest green anchors trust, and pale product surfaces explain money without visual noise.
Forest action, logo, links.
Signature Wise Green.
Pressed green actions.
Warm near-black text.
Soft utility panels.
Positive rows and prompts.
Cyan information moment.
Regulatory attention.
Validation and negative states.
Supporting brand bright.
Campaign emphasis.
Legacy map utility.
02 / Typography
Large display type is tightly tracked and blunt; interface text stays on readable Inter with strong labels and bold buttons.
03 / Buttons
Wise actions are rounded, bold, and compact. Green is used as an action signal, not as decorative body text.
04 / Cards & Surfaces
Cards stay honest and low-elevation. Brand moments come from green/forest contrast and product content, not ornamental shadows.
Clear border, white surface, compact benefits, and a direct link.
Explore →Use for confident first-viewport product promises and action modules.
Get started →Dark mode reverses to green text and restrained borders.
See business →Small cyan moments explain positive status without stealing CTA color.
View rate →Navigation cards pair media-like blocks with a title, body, and arrow.
Open menu →This large shadow is reserved for floating menus and overlays.
Dropdown →05 / Brand-Specific Product Patterns
The strongest Wise signature is not a decoration. It is the repeated experience of currency, rates, fees, flags, and transparent comparison.
Overlapping circular flags make international movement visible before reading.
Send worldwide, cards, support.
Receive, invoices, payment links.
We show the real exchange rate and explain how it affects your transfer before money moves.
06 / Forms
Forms are direct and legible. Focus uses an inset forest ring; error uses a red inset ring with plain helper text.
07 / Spacing
The rhythm is a practical 4px-root scale: compact controls inside calculators, generous section spacing around decisions.
08 / Radius
Wise is round without becoming bubbly: cards use 10-16px, larger nav and CTAs use pills.
09 / Elevation
Depth comes from surface contrast and borders. The only strong shadow is reserved for floating navigation or overlay contexts.
Cards, forms, tables. Border only; no fake depth.
box-shadow: nonePositive prompts and highlighted rows use color, not lift.
surfaceTintLarge menu shadow, used sparingly.
0 20px 66px rgba(...)10 / Extracted Component Tokens
Key tokens from the extracted system, ready to map into components.
:root {
--brand-primary: #163300;
--brand-accent: #9FE870;
--brand-accent-hover: #80E142;
--brand-accent-pressed: #65CF21;
--brand-ink: #0E0F0C;
--brand-body: #454745;
--brand-muted: #6A6C6A;
--brand-canvas: #FFFFFF;
--brand-surface-alt: #F1F1ED;
--brand-surface-tint: #E2F6D5;
--brand-border: rgba(14,15,12,0.12157);
--brand-success: #054D28;
--brand-warning: #FFD11A;
--brand-error: #CB272F;
--font-display: "Wise Sans", "Inter", sans-serif;
--font-body: "Inter", Helvetica, Arial, sans-serif;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 9999px;
--space-md: 16px;
--space-lg: 24px;
--space-section: 96px;
--shadow-dropdown: 0 20px 66px 0 rgba(34,48,73,0.20);
}