.webp)
Wise
Wise Design System
System Name Neptune — Wise's internal design system, publicly documented at docs.wise.design
Stack & Framework \- Next.js (React) for marketing site (/static-assets/app/\_next/) \- Custom proprietary component library (Neptune) \- GTM for analytics; no detectable CSS framework (no Bootstrap/Tailwind classes) \- Open Graph / Twitter card meta fully implemented \- Dark mode supported via system-level theming (CSS color-scheme)
Typography \- Primary UI font: Inter (Medium 500, SemiBold 600) — used for all body, labels, inputs \- Display font: Wise Sans — custom bold display typeface for headlines, success screens, feature intros; used sparingly \- International glyphs: Bespoke letterforms layered onto Wise Sans for expressive marketing headlines \- Line length target: 50–60 characters; no all-caps Inter; no italic mixing \- Alignment: left or center for LTR; right for RTL languages
Color Philosophy \- Brand anchor: Bright Green (#9FE870) — the public face of Wise \- Foundation pair: Bright Green + Forest Green (#163300) + white-with-8%-green tint \- Secondary palette (vibrant, world-inspired): Orange, Yellow, Blue, Pink, Purple, Gold, Charcoal, Maroon \- Secondary colours used progressively — green first, richer palette deeper in flows \- Product UI stays mostly white; Forest Green for interactivity; Bright Green as accent only \- Full dark mode theming support
Spacing \- Base unit: 4px — foundational tokens from size-4 to size-128 in multiples of 4/8 \- Semantic tokens: between-cards (12px), between-chips (8px), screen-mobile (24px), component-default (16px) \- Vertical: between-text (8px), text-to-component (16px), content-to-button (24px), between-sections (32px) \- Accessibility scaling at 85%, 130%, 155% of base sizes
Border Radius \- Bold, rounded aesthetic; separate scales for desktop and mobile \- Desktop: small 16px → 2x-large 60px \- Mobile: small 10px → 2x-large 48px \- Prominent use of radius-x-large (40px desktop / 32px mobile) in card cluster patterns
Shadows & Elevation \- Minimal shadow use; elevation communicated via Background Elevated surfaces and bottom sheets \- Border Neutral (rgba 14/15/12 / 12%) used for subtle separators rather than shadows
Layout \- Mobile-first; 24px horizontal screen margin on mobile \- Responsive grid (details not public in docs but implied by Next.js SSR approach) \- Component library: 50+ components including Button, Card, Modal, Bottom Sheet, Money Input, Tabs, Snackbar \- Cards, Chips, List Items are primary layout building blocks in product
/ ============================================ WISE DESIGN SYSTEM — CSS Custom Properties Source: docs.wise.design (Neptune system) ============================================ /
:root { / --- CORE BRAND COLOURS --- / --color-bright-green: #9FE870; --color-forest-green: #163300; --color-white: #FFFFFF;
/ --- SECONDARY PALETTE --- / --color-bright-orange: #FFC091; --color-bright-yellow: #FFEB69; --color-bright-blue: #A0E1E1; --color-bright-pink: #FFD7EF; --color-dark-purple: #260A2F; --color-dark-gold: #3A341C; --color-dark-charcoal: #21231D; --color-dark-maroon: #320707;
/ --- CONTENT COLOURS --- / --color-content-primary: #0E0F0C; --color-content-secondary: #454745; --color-content-tertiary: #6A6C6A; --color-content-link: #163300;
/ --- INTERACTIVE COLOURS --- / --color-interactive-primary: #163300; --color-interactive-accent: #9FE870; --color-interactive-secondary: #868685; --color-interactive-control: #163300; --color-interactive-contrast: #9FE870;
/ --- BACKGROUND COLOURS --- / --color-bg-screen: #FFFFFF; --color-bg-elevated: #FFFFFF; --color-bg-neutral: rgba(22, 51, 0, 0.08); --color-bg-overlay: rgba(22, 51, 0, 0.08);
/ --- BORDER COLOURS --- / --color-border-neutral: rgba(14, 15, 12, 0.12); --color-border-overlay: rgba(14, 15, 12, 0.12);
/ --- SENTIMENT COLOURS --- / --color-sentiment-negative: #A8200D; --color-sentiment-positive: #2F5711; --color-sentiment-warning: #EDC843;
/ --- BASE COLOURS --- / --color-base-contrast: #FFFFFF; --color-base-light: #FFFFFF; --color-base-dark: #121511;
/ --- TYPOGRAPHY --- / --font-primary: 'Inter', sans-serif; --font-display: 'Wise Sans', sans-serif; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-length-min: 50ch; --line-length-max: 60ch;
/ --- SPACING FOUNDATIONAL TOKENS --- / --size-4: 4px; --size-8: 8px; --size-12: 12px; --size-16: 16px; --size-24: 24px; --size-32: 32px; --size-40: 40px; --size-48: 48px; --size-56: 56px; --size-64: 64px; --size-72: 72px; --size-80: 80px; --size-88: 88px; --size-96: 96px; --size-104: 104px; --size-112: 112px; --size-120: 120px; --size-128: 128px;
/ --- SPACING SEMANTIC TOKENS (HORIZONTAL) --- / --spacing-between-cards: var(--size-12); --spacing-between-chips: var(--size-8); --spacing-screen-mobile: var(--size-24); --spacing-component-default: var(--size-16);
/ --- SPACING SEMANTIC TOKENS (VERTICAL) --- / --spacing-between-text: var(--size-8); --spacing-image-bottom: var(--size-8); --spacing-display-text-bottom: var(--size-16); --spacing-text-to-component: var(--size-16); --spacing-content-to-button: var(--size-24); --spacing-between-sections: var(--size-32); --spacing-between-options: 0px;
/ --- BORDER RADIUS (DESKTOP) --- / --radius-small: 16px; --radius-medium: 20px; --radius-large: 30px; --radius-x-large: 40px; --radius-2x-large: 60px; --radius-full: 9999px; }
/ --- DARK MODE --- / @media (prefers-color-scheme: dark) { :root { / Dark mode inverts the surface/content relationships / --color-bg-screen: #121511; --color-bg-elevated: #1C1F18; --color-bg-neutral: rgba(159, 232, 112, 0.08); --color-bg-overlay: rgba(159, 232, 112, 0.08);
--color-content-primary: #F0F2EE;
--color-content-secondary: #B8BAB6;
--color-content-tertiary: #8A8C88;
--color-content-link: #9FE870;
--color-interactive-primary: #9FE870;
--color-interactive-accent: #163300;
--color-interactive-control: #163300;
--color-interactive-contrast: #9FE870;
--color-border-neutral: rgba(240, 242, 238, 0.12);
--color-border-overlay: rgba(240, 242, 238, 0.12);
--color-base-contrast: #121511;
--color-base-dark: #F0F2EE;
} }
/ --- MOBILE RADIUS OVERRIDES --- / @media (max-width: 768px) { :root { --radius-small: 10px; --radius-medium: 16px; --radius-large: 24px; --radius-x-large: 32px; --radius-2x-large: 48px; } }
Color Tokens
Core Brand | Token | Hex | Usage | |-------|-----|-------| | --color-bright-green | #9FE870 | Primary brand, button accent | | --color-forest-green | #163300 | Interactive primary, links | | --color-white | #FFFFFF | Base screen background |
Secondary Palette | Token | Hex | PMS | |-------|-----|-----| | --color-bright-orange | #FFC091 | PANTONE 163 | | --color-bright-yellow | #FFEB69 | PANTONE 113 | | --color-bright-blue | #A0E1E1 | PANTONE 310 | | --color-bright-pink | #FFD7EF | PANTONE 671 | | --color-dark-purple | #260A2F | PANTONE 5255 | | --color-dark-gold | #3A341C | PANTONE 448 | | --color-dark-charcoal | #21231D | PANTONE 446 | | --color-dark-maroon | #320707 | PANTONE 4975 |
Content / Text | Token | Hex | Usage | |-------|-----|-------| | --color-content-primary | #0E0F0C | Primary text, emphasis | | --color-content-secondary | #454745 | Body text, supporting | | --color-content-tertiary | #6A6C6A | Placeholders, optional labels only | | --color-content-link | #163300 | Links and external link icons |
Interactive | Token | Hex | Usage | |-------|-----|-------| | --color-interactive-primary | #163300 | Neutral interactive, active items | | --color-interactive-accent | #9FE870 | Primary button backgrounds | | --color-interactive-secondary | #868685 | Input borders, de-emphasised | | --color-interactive-control | #163300 | Text/icons on Bright Green surfaces | | --color-interactive-contrast | #9FE870 | Text/icons on Forest Green surfaces |
Backgrounds | Token | Value | Usage | |-------|-------|-------| | --color-bg-screen | #FFFFFF | Primary screen background | | --color-bg-elevated | #FFFFFF | Bottom sheets, sidebars | | --color-bg-neutral | rgba(22,51,0,0.08) | Neutral alerts, avatars | | --color-bg-overlay | rgba(22,51,0,0.08) | Loading shimmers |
Borders | Token | Value | Usage | |-------|-------|-------| | --color-border-neutral | rgba(14,15,12,0.12) | Separators, tabs | | --color-border-overlay | rgba(14,15,12,0.12) | Image edges, flags |
Sentiment | Token | Hex | Usage | |-------|-----|-------| | --color-sentiment-negative | #A8200D | Errors, destructive actions | | --color-sentiment-positive | #2F5711 | Positive alerts | | --color-sentiment-warning | #EDC843 | Warnings (background only) |
Spacing Tokens
Foundational | Token | Value | |-------|-------| | --size-4 | 4px | | --size-8 | 8px | | --size-12 | 12px | | --size-16 | 16px | | --size-24 | 24px | | --size-32 | 32px | | --size-40 | 40px | | --size-48 | 48px | | --size-64 | 64px | | --size-80 | 80px | | --size-96 | 96px | | --size-128 | 128px |
Semantic — Horizontal | Token | Value | Use Case | |-------|-------|----------| | --spacing-between-cards | 12px | Gap between card components | | --spacing-between-chips | 8px | Gap between chip filters | | --spacing-screen-mobile | 24px | Mobile screen margins | | --spacing-component-default | 16px | Default inter-element gap |
Semantic — Vertical | Token | Value | Use Case | |-------|-------|----------| | --spacing-between-text | 8px | Between text blocks | | --spacing-image-bottom | 8px | Below images | | --spacing-display-text-bottom | 16px | Below display/heading text | | --spacing-text-to-component | 16px | Text to any component | | --spacing-content-to-button | 24px | Form/content to button | | --spacing-between-sections | 32px | Between layout sections | | --spacing-between-options | 0px | List items (touch area built-in) |
Typography Tokens | Token | Value | Notes | |-------|-------|-------| | --font-primary | 'Inter', sans-serif | All UI text | | --font-display | 'Wise Sans', sans-serif | Headlines, success, brand moments | | --font-weight-medium | 500 | Inter default weight | | --font-weight-semibold | 600 | Inter emphasis | | --font-weight-bold | 700 | Wise Sans | | --line-length-min | 50ch | Optimal line length | | --line-length-max | 60ch | Optimal line length |
Border Radius Tokens | Token | Desktop | Mobile | |-------|---------|--------| | --radius-small | 16px | 10px | | --radius-medium | 20px | 16px | | --radius-large | 30px | 24px | | --radius-x-large | 40px | 32px | | --radius-2x-large | 60px | 48px | | --radius-full | 9999px | 9999px |
Shadows | Usage | Value | Notes | |-------|-------|-------| | Elevation (cards) | None / border only | Elevation via background layering | | Border neutral | rgba(14,15,12,0.12) | Used as separator, not shadow | | Focus ring | Forest Green outline | Keyboard accessibility | | Overlay (shimmer) | rgba(22,51,0,0.08) | Loading state overlay |
Framework: Next.js (React) SSR — asset paths confirm \_next/static/ build output. No utility CSS framework detected (no Tailwind/Bootstrap class signatures in markup).
Design System: Neptune — proprietary, publicly documented at docs.wise.design. Covers Foundations, 50+ Components, Patterns. Separate product and editorial guidelines.
Theme Support: Full light/dark mode. System-level (prefers-color-scheme) theming. Colour semantics are inverted in dark mode (e.g. Interactive Primary flips from Forest Green to Bright Green). Radius tokens respond to mobile breakpoint.
Data Confidence: HIGH. All colour values sourced directly from docs.wise.design/foundations/colour (official Neptune docs). Spacing and radius values sourced from official spacing and radius pages. Typography confirmed from typography foundation page. Dark mode tokens are inferred from the design system's stated theming philosophy ("colours work equally well in dark mode") — exact dark hex values are estimated, not extracted from a live stylesheet.
Notable Patterns: \- Dual-typeface system: Inter for function, Wise Sans for brand expression — very deliberate separation of utility and delight \- Colour progression strategy: green-first, secondary palette introduced deeper in user flows \- Proportional colour use model: UI is majority white/neutral, Forest Green for interaction, Bright Green as rare accent \- Separate desktop/mobile radius scales — intentional softness tuning per platform \- Accessibility scaling table for spacing (85% / 100% / 130% / 155%) shows mature a11y posture \- International-first design: custom currency glyphs in Inter, international glyph set in Wise Sans, RTL layout support documented \- Component count: 50+ (Button, Card, Bottom Sheet, Money Input, Expressive Money Input, Snackbar, Segmented Control, Nudge, etc.) — full-scale production system \- Marketing site uses webm video and .webp illustrations; lazy-loaded, performance-oriented
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.