Wise Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

22tokens

19type steps

5radius steps

2pxspacing base

Wise, in one page

Wise — the global money-transfer brand — wears its identity in a single signature pairing: a vivid lime-green {colors.primary} (#9fe870) used as the CTA pill and brand accent, set against a pale sage-tinted canvas {colors.canvas-soft} (#e8ebe6) that runs across the hero band, and a near-black ink {colors.ink} (#0e0f0c) with a hint of warmth from the brand's underlying olive cast. The brand reads more like a calm Scandinavian magazine than a bank — generous whitespace, large rounded cards, and an unusually heavy display sans set at weight 900 carrying every hero headline.

Display typography is the second decisive voice. The proprietary Wise Sans family carries hero displays at weight 900 in scales from 64 px up to 126 px on the largest hero. The brand pairs Wise Sans 900 with Inter at weight 600 for sub-displays — the contrast between the chunky proprietary face and Inter's neutrality creates a particular hierarchy: Wise Sans for the brand moment, Inter for everything else.

Cards are universally pill-rounded — {rounded.xl} 24 px is the brand's signature card radius. Buttons take the same 24 px pill-rectangle shape. The brand never uses sharp corners on UI elements; the visual softness is part of the friendly fintech voice.

Key Characteristics:

A single lime-green CTA accent {colors.primary} (#9fe870) — the brand's universal primary action color. No second accent.
Two-face display typography — Wise Sans (proprietary, weight 900, hero scale) + Inter (weight 600, sub-display scale). The contrast is the brand's typographic story.
{rounded.xl} 24 px is the canonical card and button radius. Generous, friendly.
Sage-tinted canvas {colors.canvas-soft} (#e8ebe6) is the brand's hero surface; white {colors.canvas} is reserved for cards within the sage band.
A full semantic palette: positive green family, warning yellow family, negative red family — each documented with content / hover / active variants for in-product use.
Currency-converter card on the hero — the brand's signature interactive component, hosting from/to amount inputs.

Do's and don'ts

Do

Reserve {colors.primary} Wise green for every primary CTA. The lime-green pill IS the brand's conversion signature.
Set hero headlines in {typography.display-mega} / {typography.display-xl} Wise Sans weight 900. Never lighter.
Use {rounded.xl} 24 px for buttons and cards. The generous radius is the brand's friendliness signature.
Cycle page surfaces in {colors.canvas-soft} sage canvas → {colors.canvas} white cards. Surface contrast carries elevation.
Use the full semantic palette (positive / warning / negative) for in-product status — never repurpose Wise green as success indicator since it IS the brand CTA.

Don't

Don't introduce a second brand accent. Wise green is the sole identity colour.
Don't render the hero in weight 700 or lighter. The brand's display weight is 900.
Don't render CTAs as sharp rectangles. The 24 px pill geometry is non-negotiable.
Don't pair the green CTA with a green background. The brand always sits Wise green on neutral surfaces (sage / white / ink).
Don't replace Wise Sans with a generic geometric sans for hero typography — the proprietary face IS the brand's voice.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Wise design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #9fe870
- on-primary: #0e0f0c
- primary-active: #cdffad
- primary-neutral: #c5edab
- primary-pale: #e2f6d5
- ink: #0e0f0c
- ink-deep: #163300
- body: #454745
- mute: #868685
- canvas: #ffffff

Type:
- families: Wise Sans, Inter, -apple-system, Display
- scale: 12, 14, 16, 20, 24, 30, 31.2, 32, 34
- weights: 400, 600, 900

Shape:
- radius: 0, 8, 12, 16, 24
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 8, 12, 16, 24, 32, 48

Rules:
- Reserve `{colors.primary}` Wise green for every primary CTA. The lime-green pill IS the brand's conversion signature.
- Set hero headlines in `{typography.display-mega}` / `{typography.display-xl}` Wise Sans weight 900. Never lighter.
- Use `{rounded.xl}` 24 px for buttons and cards. The generous radius is the brand's friendliness signature.
- Cycle page surfaces in `{colors.canvas-soft}` sage canvas → `{colors.canvas}` white cards. Surface contrast carries elevation.
- Use the full semantic palette (positive / warning / negative) for in-product status — never repurpose Wise green as success indicator since it IS the brand CTA.

Avoid:
- Don't introduce a second brand accent. Wise green is the sole identity colour.
- Don't render the hero in weight 700 or lighter. The brand's display weight is 900.
- Don't render CTAs as sharp rectangles. The 24 px pill geometry is non-negotiable.
- Don't pair the green CTA with a green background. The brand always sits Wise green on neutral surfaces (sage / white / ink).
- Don't replace Wise Sans with a generic geometric sans for hero typography — the proprietary face IS the brand's voice.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Wise Green ({colors.primary} — #9fe870): The brand's universal CTA color. Every primary button, every "Send money" pill, the brand's logo accent.
Wise Green Hover ({colors.primary-active} — #cdffad): The lighter green for active state.
Wise Green Neutral ({colors.primary-neutral} — #c5edab): A mid-saturation green used as a neutral active fill.
Wise Green Pale ({colors.primary-pale} — #e2f6d5): The lightest green for soft surface tints / badge backgrounds.

Surface

Canvas ({colors.canvas} — #ffffff): Pure white for card interiors.
Canvas Soft ({colors.canvas-soft} — #e8ebe6): The sage-tinted page background. Defining mood of the brand.

Text

Ink ({colors.ink} — #0e0f0c): Near-black with a hint of olive warmth — the brand's default text and headings color.
Ink Deep ({colors.ink-deep} — #163300): A deep forest-green ink used on positive-state surfaces.
Body ({colors.body} — #454745): Secondary body text.
Mute ({colors.mute} — #868685): Lowest-priority text — captions, placeholder, fine print.

Semantic

Positive ({colors.positive} — #2ead4b): Success indicator.
Positive Deep ({colors.positive-deep} — #054d28): Pressed positive state.
Warning ({colors.warning} — #ffd11a): Caution indicator.
Warning Deep ({colors.warning-deep} — #b86700): Pressed warning.
Warning Content ({colors.warning-content} — #4a3b1c): Text on warning surfaces.
Negative ({colors.negative} — #d03238): Destructive / error red.
Negative Deep ({colors.negative-deep} — #a72027): Pressed destructive.
Negative Darkest ({colors.negative-darkest} — #a7000d): Highest-emphasis destructive text.
Negative Bg ({colors.negative-bg} — #320707): Dark maroon for destructive callout backgrounds.

Brand Accent — Tertiary

Accent Orange ({colors.accent-orange} — #ffc091): Bright peach used inside illustrative content / pricing cards.
Accent Cyan ({colors.accent-cyan} — #38c8ff): Bright sky-blue used as a tertiary illustration accent.

Type scaleRead the full spec

Font Family

Two faces ladder the system:

Wise Sans — proprietary geometric sans with an unusually heavy weight 900 used for all hero displays. The face is the brand's typographic signature. Always at weight 900, never lighter on the marketing surface.
Inter — used for sub-displays (weight 600), all body, and form labels. Loaded with font-feature-settings: "calt" for contextual alternates.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-mega}`	126px	900	107.1px	0	Hero stencil at maximum scale.
`{typography.display-xxl}`	96px	900	81.6px	0	Sub-hero scale.
`{typography.display-xl}`	64px	900	54.4px	0	Standard hero headline.
`{typography.display-lg}`	47px	400	70.5px	-0.108px	Lighter sub-display.
`{typography.display-md}`	40px	900	34px	0	Section / card headlines.
`{typography.display-sm}`	32px	600	38.4px	-0.96px	Inter-rendered section headings.
`{typography.display-xs}`	24px	600	31.2px	-0.48px	Sub-section displays.
`{typography.body-lg}`	20px	400	30px	0	Lead paragraphs.
`{typography.body-md}`	16px	400	24px	0	Default body.
`{typography.body-md-strong}`	16px	600	24px	0	Bold inline body.
`{typography.body-sm}`	14px	400	20px	0	Secondary body.
`{typography.body-sm-strong}`	14px	600	20px	0	Bold caption / nav-link.
`{typography.caption}`	12px	400	16px	0	Fine print.
`{typography.button-md}`	16px	600	24px	0	Button label.

Principles

Weight 900 for hero, weight 600 for everything else. The brand's display ceiling is full-black weight; everything below is semibold.
Wise Sans for the brand voice, Inter for utility. Strict role separation.

Note on Font Substitutes

Wise Sans is proprietary. Open-source substitutes:

Display — *Inter* at weight 900 or *Manrope* at weight 800 / 900 captures the geometric heaviness. *Geist* weight 800 is a passable second choice.
Sub-display + body — *Inter* is the brand's actual second face.

Components and layoutRead the full spec

Buttons

button-primary — the lime-green CTA pill.

Background {colors.primary}, text {colors.on-primary}, label {typography.button-md}, padding {spacing.md} {spacing.xl}, shape {rounded.xl} 24 px.

button-secondary — the sage-tinted secondary.

Background {colors.canvas-soft}, text {colors.ink}, same typography / padding / shape.

button-tertiary — the white outline tertiary.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.ink} border, same typography / padding / shape.

button-icon-circular — the circular icon button.

Background {colors.canvas}, ink icon, shape {rounded.full}.

Cards & Containers

card-content — the default white card.

Background {colors.canvas}, text {colors.ink}, padding {spacing.xl}, shape {rounded.xl}. No border, sits on sage canvas.

card-feature-sage — the sage-tinted feature card.

Background {colors.canvas-soft}, text {colors.ink}, padding {spacing.xl}, shape {rounded.xl}.

card-feature-green — the soft-green feature card.

Background {colors.primary-pale}, text {colors.ink}, padding {spacing.xl}, shape {rounded.xl}.

card-feature-dark — the polarity-flipped dark card with green text.

Background {colors.ink}, text {colors.primary} (Wise green!), padding {spacing.xl}, shape {rounded.xl}. Used for promotional moments.

currency-converter-card — the brand's signature interactive widget.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.ink} border, padding {spacing.xl}, shape {rounded.xl}. Hosts from/to amount inputs + currency selectors.

Inputs & Forms

text-input — the canonical text input.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.ink} border, body in {typography.body-md}, padding {spacing.md} {spacing.lg}, shape {rounded.md}.

Navigation

nav-bar — the sticky top nav.

Background {colors.canvas}, text {colors.ink}, padding {spacing.md} {spacing.xl}.

nav-link — link items inside nav.

Text {colors.ink}, set in {typography.body-sm-strong}.

footer — the dark footer band.

Background {colors.ink}, text {colors.canvas-soft}, padding {spacing.3xl} {spacing.xl}. Body in {typography.body-sm}.

Signature Components

hero-band — the sage-canvas hero band.

Background {colors.canvas-soft}, text {colors.ink}, padding {spacing.3xl} {spacing.xl}. Headline in {typography.display-mega} (Wise Sans weight 900).

hero-band-dark — the polarity-flipped dark hero.

Background {colors.ink}, text {colors.primary} (Wise green headline on near-black!), same padding / scale.

content-band — the white content band that follows hero.

Background {colors.canvas}, text {colors.ink}, padding {spacing.3xl} {spacing.xl}. Section headline in {typography.display-md}.

badge-positive — the positive status pill.

Background {colors.primary-pale}, text {colors.positive-deep}, body in {typography.body-sm-strong}, padding {spacing.xs} {spacing.md}, shape {rounded.pill}.

badge-negative — the negative status pill.

Background {colors.negative-bg}, text white, body in {typography.body-sm-strong}, padding {spacing.xs} {spacing.md}, shape {rounded.pill}.

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-wise {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #0e0f0c;
  --heading-color: #0e0f0c;
  --link-color: #428616;
  --link-hover-color: #2c5a0f;
  --border-color: #d4d4d3;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(14,15,12,0.06);
  --card-hover-shadow: 0 6px 18px rgba(14,15,12,0.12);
  --header-bg: #0e0f0c;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #626361;
  --button-bg: #9fe870;
  --button-text-color: #0e0f0c;
  --button-hover-bg: #82e144;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #f1f1f0;
  --button-secondary-text-color: #0e0f0c;
  --button-secondary-hover-bg: #e2e2e2;
  --button-secondary-border: 1px solid #d4d4d3;
  --prompt-bg: #f3f3f3;
  --prompt-text-color: #0e0f0c;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-inter);
  --card-border-radius: 12px;
}

Download theme.css

Where this came from

Source document: volt/design-md/wise/DESIGN.md · 23.8 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.