SaaSFrame
CloudflareWebsites 8
All websites
Index of all 8 Wise websites examples
Products 36
All products
Index of all 36 Wise products examples
- Wise Review & Confirm Conversion
- Wise Select Conversion Amount
- Wise Select Conversion Amount
- Wise Convert Money
- Wise Referral
- Wise Payments
- Wise Account Balance
- Wise Payment Request Confirmation
- Wise Payment Request Sent
- Wise Send Payment Request
- Wise Request Money
- Wise Add Money With Card
- Wise Add Money
- Wise Enter Password
- Wise Confirm & Send Money
- Wise Select Transfer Recipient
- Wise Search Transfer Recipient
- Wise Add Transfer Recipient
- Wise Select Transfer Frequency
- Wise Schedule A Transfer
- Wise Schedule A Transfer
- Wise Send A Payment
- Wise Dashboard
- Wise Popup Modal
- Wise Multi-Factor Authentication
- Wise Login
- Wise Multi-Factor Authentication Setup
- Wise 2FA Phone Number Already Used
- Wise Multi-Factor Authentication Setup
- Wise Multi-Factor Authentication Setup
- Wise Choose Country
- Wise Choose Account Type
- Wise Signup
Flows 6
Wise Convert Money
5 screens
Website sections 6
Design reference
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