← Về thư mục

Design System: Wise

Hermes Agent — Implementation Notes

The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary: Inter | Mono: system monospace stack - Font stack (CSS): font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; - Mono stack (CSS): font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> Use write_file to create HTML, serve via generative-widgets skill (cloudflared tunnel). Verify visual accuracy with browser_vision after generating.

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