Wise

source

---
name: Wise
description:
  Money without borders — weight-900 Wise Sans at 0.85 line-height, lime-green
  CTAs, warm off-white canvas, pill buttons with scale(1.05) hover.
originalFonts:
  primary: "Wise Sans"
  fallbacks:
    - "Inter"
    - "Helvetica"
    - "Arial"
colors:
  background: "#FFFFFF"
  surface: "#E8EBE6"
  ink: "#0E0F0C"
  accent: "#9FE870"
  near-black: "#0E0F0C"
  wise-green: "#9FE870"
  dark-green: "#163300"
  light-mint: "#E2F6D5"
  pastel-green: "#CDFFAD"
  positive-green: "#054D28"
  danger-red: "#D03238"
  warning-yellow: "#FFD11A"
  background-cyan: "rgba(56,200,255,0.10)"
  bright-orange: "#FFC091"
  warm-dark: "#454745"
  gray: "#868685"
  light-surface: "#E8EBE6"
  border: "rgba(14,15,12,0.12)"
typography:
  h1:
    family: "Inter"
    size: "7.875rem"
    weight: 900
    lineHeight: 0.85
  body:
    family: "Inter"
    size: "1.125rem"
    weight: 400
    lineHeight: 1.44
  code:
    family: "JetBrains Mono"
spacing:
  xs: "0.25rem"
  sm: "0.5rem"
  md: "0.75rem"
  lg: "1rem"
  xl: "1.5rem"
rounded:
  sm: "10px"
  md: "16px"
  lg: "30px"
  xl: "9999px"
shadows:
  sm: "rgba(14,15,12,0.12) 0px 0px 0px 1px"
  md: "rgba(14,15,12,0.12) 0px 0px 0px 1px"
components:
  button-primary:
    background: "{colors.wise-green}"
    color: "{colors.dark-green}"
    border: "1px solid {colors.wise-green}"
    radius: "{rounded.xl}"
    padding: "0.3rem 1rem"
  button-secondary:
    background: "rgba(22, 51, 0, 0.08)"
    color: "{colors.near-black}"
    border: "1px solid {colors.border}"
    radius: "{rounded.xl}"
    padding: "0.5rem 1rem"
  card:
    background: "#FFFFFF"
    border: "1px solid {colors.border}"
    radius: "{rounded.lg}"
    padding: "1.5rem"
  input:
    background: "#FFFFFF"
    color: "{colors.near-black}"
    border: "1px solid {colors.border}"
    radius: "{rounded.sm}"
    padding: "0.5rem 0.75rem"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of 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)` or `1px 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

1. Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand
2. Lime Green for buttons only — dark green text on green background
3. Scale animations (1.05 hover, 0.95 active) on all interactive elements
4. "calt" on everything — contextual alternates are mandatory
5. Inter 600 for body — confident reading weight