---
name: Wise
description: "Wise's design is a masterclass in using bold color and typography to make a complex financial service feel simple, fast, and accessible."
version: alpha

colors:
  background: "#9fe870"
  primary: "#163300"
  secondary: "#454745"
  line: "rgba(22,51,0,0.12)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 0.9
    fontWeight: 900
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 45px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.44
    fontWeight: 400
    letterSpacing: "-0.1px"
  body-sm:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.1px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A fintech platform for fast, transparent, and secure international money transfers.

*Global money movement rebranded as a simple, reliable app experience.*

## Colors

A high-chroma, energetic green paired with a deep, dark ink for maximum contrast and a trustworthy financial feel.

- **Background (`#9fe870`)** — uses `bg` token
- **Primary text (`#163300`)** — uses `ink` token
- **Secondary text (`#454745`)** — uses `ink-soft` token
- **Borders (`rgba(22,51,0,0.12)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans

- Use heavy weights (900) for display text to convey confidence and speed.
- Maintain tight tracking on large text to keep the block feeling cohesive.
- Use humanist sans for body text to ensure readability and a friendly tone.
- Ensure high contrast between the dark ink and bright green backgrounds.

## Layout

A standard centered container with a 12-column grid.

*Rhythm:* A 4px base unit creates a consistent, clean layout with generous padding.

## Elevation & Depth

- 0 0 0 1px rgba(22,51,0,0.12)
- Borders: Thin 1px borders using the primary ink color at low opacity.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with solid dark ink backgrounds and bright green text.
- **card:** Cards with a subtle 1px border and generous padding.
- **chip:** Small, pill-shaped badges or tags for categories.
- **input:** Clean, rounded input fields with clear labels.
- **hero:** A full-width, centered hero with large display typography.

## Do's and Don'ts

**Don't:**
- Don't use thin, light typography — the screenshot shows heavy, bold weights for impact.
- Don't use multiple primary accent colors — the screenshot shows a monochromatic green/dark ink palette.
- Don't use sharp, square corners on main components — the screenshot shows rounded and pill-shaped elements.
- Don't use low-contrast text — the screenshot shows a very high contrast between ink and background.
- Don't use generic, serif fonts — the screenshot shows modern, clean sans-serif families.
- Don't use busy, complex background patterns — the screenshot shows solid, vibrant colors.

---

## System Prompt (paste into AI agent)

```
Design for a fast, transparent, and modern international money transfer service. Use a bold, high-chroma green (#9fe870) for backgrounds and a deep dark ink (#163300) for text and buttons to create a high-contrast, trustworthy feel. Typography should be a heavy grotesque-sans for headlines and a friendly humanist-sans for body copy. Avoid clutter, complex gradients, and low-contrast text. Ensure all components, like buttons and inputs, have rounded or pill-shaped corners. The overall tone should be direct, clear, and focused on speed and security.
```