DESIGN.md · explainx registry
Wise
### Wise - International money transfer. - Bright green accent, friendly and clear - Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive
Design System Inspired by Wise
1. Visual Theme & Atmosphere
Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (#0e0f0c) and a signature Wise Green (#9fe870) — a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.
The typography uses Wise Sans — a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType "calt" (contextual alternates). At 126px, the text is so dense it feels like a protest sign — bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.
What distinguishes Wise is its green-on-white-on-black material palette. Lime Green (#9fe870) appears on buttons with dark green text (#163300), creating a nature-inspired CTA that feels fresh. Hover states use scale(1.05) expansion rather than color changes — buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px–40px for cards, and the shadow system is minimal — just rgba(14,15,12,0.12) 0px 0px 0px 1px ring shadows.
Key Characteristics:
- Wise Sans at weight 900, 0.85 line-height — billboard-scale bold headlines
- Lime Green (
#9fe870) accent with dark green text (#163300) — nature-inspired fintech - Inter body at weight 600 as default — confident, not light
- Near-black (
#0e0f0c) primary with warm green undertone - Scale(1.05) hover animations — buttons physically grow
- OpenType
"calt"on all text - Pill buttons (9999px) and large rounded cards (30px–40px)
- Semantic color system with comprehensive state management
2. Color Palette & Roles
Primary Brand
- Near Black (
#0e0f0c): Primary text, background for dark sections - Wise Green (
#9fe870): Primary CTA button, brand accent - Dark Green (
#163300): Button text on green, deep green accent - Light Mint (
#e2f6d5): Soft green surface, badge backgrounds - Pastel Green (
#cdffad):--color-interactive-contrast-hover, hover accent
Semantic
- Positive Green (
#054d28):--color-sentiment-positive-primary, success - Danger Red (
#d03238):--color-interactive-negative-hover, error/destructive - Warning Yellow (
#ffd11a):--color-sentiment-warning-hover, warnings - Background Cyan (
rgba(56,200,255,0.10)):--color-background-accent, info tint - Bright Orange (
#ffc091):--color-bright-orange, warm accent
Neutral
- Warm Dark (
#454745): Secondary text, borders - Gray (
#868685): Muted text, tertiary - Light Surface (
#e8ebe6): Subtle green-tinted light surface
3. Typography Rules
Font Families
- Display:
Wise Sans, fallback:Inter— OpenType"calt"on all text - Body / UI:
Inter, fallbacks:Helvetica, Arial
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (ultra-tight) | normal | "calt" |
| Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | "calt" |
| Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | "calt" |
| Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | "calt" |
| Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (tight) | -2.34px | "calt" |
| Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (tight) | -0.39px | "calt" |
| Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (tight) | -0.396px | "calt" |
| Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | "calt" |
| Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | "calt" |
| Button | Inter | 18px–22px | 600 | 1.00–1.44 | -0.108px | "calt" |
| Caption | Inter | 14px (0.88rem) | 400–600 | 1.50–1.86 | -0.084px to -0.108px | "calt" |
| Small | Inter | 12px (0.75rem) | 400–600 | 1.00–2.17 | -0.084px to -0.108px | "calt" |
Principles
- Weight 900 as identity: Wise Sans Black (900) is used exclusively for display — the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.
- 0.85 line-height: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.
- "calt" everywhere: Contextual alternates enabled on ALL text — both Wise Sans and Inter.
- Weight 600 as body default: Inter Semibold is the standard reading weight — confident, not light.
4. Component Stylings
Buttons
Primary Green Pill
- Background:
#9fe870(Wise Green) - Text:
#163300(Dark Green) - Padding: 5px 16px
- Radius: 9999px
- Hover: scale(1.05) — button physically grows
- Active: scale(0.95) — button compresses
- Focus: inset ring + outline
Secondary Subtle Pill
- Background:
rgba(22, 51, 0, 0.08)(dark green at 8% opacity) - Text:
#0e0f0c - Padding: 8px 12px 8px 16px
- Radius: 9999px
- Same scale hover/active behavior
Cards & Containers
- Radius: 16px (small), 30px (medium), 40px (large cards/tables)
- Border:
1px solid rgba(14,15,12,0.12)or1px solid #9fe870(green accent) - Shadow:
rgba(14,15,12,0.12) 0px 0px 0px 1px(ring shadow)
Navigation
- Green-tinted navigation hover:
rgba(211,242,192,0.4) - Clean header with Wise wordmark
- Pill CTAs right-aligned
5. Layout Principles
Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px
Border Radius Scale
- Minimal (2px): Links, inputs
- Standard (10px): Comboboxes, inputs
- Card (16px): Small cards, buttons, radio
- Medium (20px): Links, medium cards
- Large (30px): Feature cards
- Section (40px): Tables, large cards
- Mega (1000px): Presentation elements
- Pill (9999px): All buttons, images
- Circle (50%): Icons, badges
6. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default |
| Ring (Level 1) | rgba(14,15,12,0.12) 0px 0px 0px 1px | Card borders |
| Inset (Level 2) | rgb(134,134,133) 0px 0px 0px 1px inset | Input focus |
Shadow Philosophy: Wise uses minimal shadows — ring shadows only. Depth comes from the bold green accent against the neutral canvas.
7. Do's and Don'ts
Do
- Use Wise Sans weight 900 for display — the extreme boldness IS the brand
- Apply line-height 0.85 on Wise Sans display — ultra-tight is intentional
- Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text
- Apply scale(1.05) hover and scale(0.95) active on buttons
- Enable "calt" on all text
- Use Inter weight 600 as the body default
Don't
- Don't use light font weights for Wise Sans — only 900
- Don't relax the 0.85 line-height on display — the density is the identity
- Don't use the Wise Green as background for large surfaces — it's for buttons and accents
- Don't skip the scale animation on buttons
- Don't use traditional shadows — ring shadows only
8. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <576px | Single column |
| Tablet | 576–992px | 2-column |
| Desktop | 992–1440px | Full layout |
| Large | >1440px | Expanded |
9. Agent Prompt Guide
Quick Color Reference
- Text: Near Black (
#0e0f0c) - Background: White (
#ffffff/ off-white) - Accent: Wise Green (
#9fe870) - Button text: Dark Green (
#163300) - Secondary: Gray (
#868685)
Example Component Prompts
- "Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05)."
- "Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400."
Iteration Guide
- Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand
- Lime Green for buttons only — dark green text on green background
- Scale animations (1.05 hover, 0.95 active) on all interactive elements
- "calt" on everything — contextual alternates are mandatory
- Inter 600 for body — confident reading weight
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is Wise on explainx.ai?
- ### Wise - International money transfer. - Bright green accent, friendly and clear - Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive Listed under category “Fintech & Crypto”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.