Wise

Overview

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.

Colors

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.

Typography

Font Family

Two faces ladder the system:

1. **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.

2. **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.

Layout

Spacing System

• **Base unit**: 4 px.
• **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 24 px · `{spacing.2xl}` 32 px · `{spacing.3xl}` 48 px.
• **Section padding**: bands use `{spacing.3xl}` 48 px top/bottom on desktop.
• **Card interior**: cards at `{spacing.xl}` 24 px.

Grid & Container

• Marketing container centres at ~1200 px.
• Hero: split layout (headline left, currency-converter card right) at desktop; stacked at mobile.
• Feature grids: 2-up / 3-up at desktop.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hero stacks; converter card full-width below headline; grids 1-up. |

| Tablet | 768–1023px | Grids 2-up. |

| Desktop | ≥ 1024px | Hero split; full grids. |

#### Touch Targets

Buttons render ~48 px tall (12 vertical padding + 24 line). WCAG AAA at all widths.

#### Image Behavior

Photography is sparse; the brand prefers illustrative SVGs and product mockups inside cards. Country flag thumbnails appear inside currency rows.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Level 0 — Flat | No shadow, no border. | Default. |

| Level 1 — Hairline on Dark | 1 px solid `{colors.ink}` border. | Tertiary outline buttons, form inputs. |

| Level 2 — Soft Card | Implicit Level 0 white card sitting on sage canvas — the surface contrast IS the elevation. | Cards on the sage hero band. |

The brand uses surface contrast (`{colors.canvas-soft}` background vs `{colors.canvas}` cards) as the primary elevation cue.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Full-bleed bands. |

| `{rounded.sm}` | 8px | Inline pills, small badges. |

| `{rounded.md}` | 12px | Form inputs, smaller chrome. |

| `{rounded.lg}` | 16px | Mid-size cards. |

| `{rounded.xl}` | 24px | The brand's canonical button + card radius. |

| `{rounded.pill}` | 9999px | Status pills and full-radius accents. |

| `{rounded.full}` | 9999px | Circular icon containers. |

Components

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.

• Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame.

• Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.

• Properties: `backgroundColor`, `rounded`, `padding`, `typography`

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.

개요

글로벌 송금 브랜드인 Wise는 CTA 알약과 브랜드 액센트로 사용되는 선명한 라임색 `{colors.primary}`(`#9fe870`), 영웅 밴드를 가로지르는 옅은 세이지색 캔버스 `{colors.canvas-soft}`(`#e8ebe6`) 및 검정색에 가까운 잉크 `{colors.ink}`를 배경으로 한 단일 시그니처 조합으로 아이덴티티를 표현합니다. (`#0e0f0c`) 브랜드의 기본 올리브 캐스트에서 따뜻함을 느낄 수 있습니다. 이 브랜드는 은행이라기보다는 차분한 스칸디나비아 잡지처럼 읽혀집니다. 넉넉한 여백, 크고 둥근 카드, 그리고 모든 영웅 헤드라인을 담고 있는 무게 900이 아닌 유난히 무거운 디스플레이입니다.

디스플레이 타이포그래피는 두 번째 결정적인 목소리입니다. 독점적인 'Wise Sans' 제품군은 가장 큰 영웅의 경우 64px에서 126px까지 무게 900의 영웅 디스플레이를 제공합니다. 브랜드는 하위 디스플레이를 위해 Wise Sans 900과 무게 600의 Inter를 결합합니다. 두툼한 독점 표면과 Inter의 중립성 사이의 대조는 브랜드 순간을 위한 Wise Sans, 다른 모든 것을 위한 Inter라는 특별한 계층 구조를 만듭니다.

카드는 보편적으로 알약 모양으로 되어 있습니다. `{rounded.xl}` 24px는 브랜드의 시그니처 카드 반경입니다. 버튼은 동일한 24px 알약 직사각형 모양을 취합니다. 브랜드는 UI 요소에 날카로운 모서리를 사용하지 않습니다. 시각적 부드러움은 친근한 핀테크 목소리의 일부입니다.

**주요 특징:**

• 단일 라임 그린 CTA 강조 `{colors.primary}`(`#9fe870`) — 브랜드의 보편적인 기본 액션 색상입니다. 두 번째 악센트가 없습니다.
• 양면 디스플레이 타이포그래피 — Wise Sans(전용, 중량 900, 영웅 스케일) + Inter(중량 600, 하위 디스플레이 스케일). 대조는 브랜드의 타이포그래피 스토리입니다.
• `{rounded.xl}` 24px는 표준 카드 및 버튼 반경입니다. 관대하고 친절합니다.
• 세이지색 캔버스 `{colors.canvas-soft}`(`#e8ebe6`)는 브랜드의 영웅 표면입니다. 흰색 `{colors.canvas}`는 세이지 밴드 내의 카드용으로 예약되어 있습니다.
• 전체 의미 체계 팔레트: 긍정적인 녹색 계열, 경고 노란색 계열, 부정적인 빨간색 계열 - 각각 제품 내 사용을 위한 콘텐츠/호버/활성 변형으로 문서화됩니다.
• 영웅의 환율 변환기 카드 - 금액 입력/금액 입력을 호스팅하는 브랜드의 시그니처 대화형 구성 요소입니다.

색상

브랜드 및 액센트

• **와이즈 그린** (`{colors.primary}` — `#9fe870`): 브랜드의 보편적인 CTA 색상입니다. 모든 기본 버튼, 모든 "송금" 알약, 브랜드 로고 액센트.
• **현명한 녹색 호버** (`{colors.primary-active}` — `#cdffad`): 활성 상태를 나타내는 밝은 녹색입니다.
• **현명한 녹색 중립** (`{colors.primary-neutral}` — `#c5edab`): 중립 활성 채우기로 사용되는 중간 채도의 녹색입니다.
• **Wise Green Pale** (`{colors.primary-pale}` — `#e2f6d5`): 부드러운 표면 색조/배지 배경을 위한 가장 밝은 녹색입니다.

표면

• **캔버스** (`{colors.canvas}` — `#ffffff`): 카드 내부용 순백색입니다.
• **캔버스 소프트** (`{colors.canvas-soft}` — `#e8ebe6`): 연한 색의 페이지 배경입니다. 브랜드의 분위기를 정의합니다.

텍스트

• **잉크**(`{colors.ink}` — `#0e0f0c`): 올리브색의 따뜻함이 살짝 가미된 검정색에 가까운 색상으로 브랜드의 기본 텍스트 및 제목 색상입니다.
• **잉크 딥**(`{colors.ink-deep}` — `#163300`): 포지티브 상태 표면에 사용되는 진한 숲색 잉크입니다.
• **본문**(`{colors.body}` — `#454745`): 보조 본문 텍스트입니다.
• **음소거**(`{colors.mute}` — `#868685`): 우선순위가 가장 낮은 텍스트 — 캡션, 자리 표시자, 작은 글씨.

의미론

• **긍정**(`{colors.긍정적}` — `#2ead4b`): 성공 표시기입니다.
• **Positive Deep** (`{colors.Positive-deep}` — `#054d28`): 양수 상태를 눌렀습니다.
• **경고** (`{colors.warning}` — `#ffd11a`): 주의 표시.
• **경고 깊이** (`{colors.warning-deep}` — `#b86700`): 경고가 눌렸습니다.
• **경고 내용** (`{colors.warning-content}` — `#4a3b1c`): 경고 표면의 텍스트입니다.
• **부정**(`{colors.negative}` — `#d03238`): 파괴적/오류 빨간색.
• **음의 깊은** (`{colors.negative-deep}` — `#a72027`): 파괴적인 누르기.
• **Negative Darkest** (`{colors.negative-darkest}` — `#a7000d`): 가장 강조된 파괴적인 텍스트입니다.
• **음수 Bg** (`{colors.negative-bg}` — `#320707`): 파괴적인 설명선 배경을 위한 어두운 적갈색입니다.

브랜드 강조 - 3차

• **액센트 오렌지** (`{colors.accent-orange}` — `#ffc091`): 일러스트 콘텐츠/가격 카드에 밝은 복숭아색이 사용됩니다.
• **액센트 청록색** (`{colors.accent-yan}` — `#38c8ff`): 3차 일러스트레이션 악센트로 사용되는 밝은 하늘색.

타이포그래피

글꼴 계열

두 얼굴이 시스템에 사다리를 추가합니다.

1. **Wise Sans** — 모든 영웅 디스플레이에 사용되는 비정상적으로 무거운 900의 기하학적 산입니다. 얼굴은 브랜드의 타이포그래피 시그니처입니다. 항상 무게는 900이며, 마케팅 표면에서는 결코 가볍지 않습니다.

2. **인터** — 하위 디스플레이(가중치 600), 모든 본문 및 양식 라벨에 사용됩니다. 상황별 대체를 위해 `font-feature-settings: "calt"`가 로드됩니다.

계층 구조

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | 사용 |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 126px | 900 | 107.1px | 0 | M의 영웅 스텐실

概要

世界的な送金ブランドである Wise は、単一のシグネチャー ペアリングでそのアイデンティティを身に着けています。CTA ピルとブランド アクセントとして使用される鮮やかなライム グリーンの「{colors.primary}」 (「#9fe870」) が、ヒーロー バンドを横切る淡いセージ色のキャンバス「{colors.canvas-soft}」 (「#e8ebe6」) と黒に近いインク「{colors.ink}」を背景にしています。 (`#0e0f0c`) ブランドの根底にあるオリーブキャストからの温かみを感じさせます。このブランドは、銀行というよりは、落ち着いたスカンジナビアの雑誌に似ています。たっぷりとした余白、大きな丸いカード、重量 900 に設定されていない異常に重いディスプレイには、すべてのヒーローの見出しが掲載されています。

ディスプレイのタイポグラフィーは 2 番目の決定的な声です。独自の「Wise Sans」ファミリーは、最大のヒーローに 64 ピクセルから 126 ピクセルまでのスケールで重量 900 のヒーロー ディスプレイを搭載しています。このブランドは、サブディスプレイとして Wise Sans 900 とウェイト 600 の Inter を組み合わせています。分厚い独自の顔と Inter の中立性とのコントラストが特定の階層を生み出しています。Wise Sans はブランドの瞬間、Inter はその他すべてのものです。

カードは一般的に丸薬で丸められています。`{rounded.xl}` 24 ピクセルは、ブランドの特徴的なカード半径です。ボタンは同じ 24 ピクセルの錠剤長方形の形状をとります。このブランドは UI 要素に鋭い角を決して使用しません。視覚的な柔らかさは、フレンドリーなフィンテックの声の一部です。

**主な特徴:**

• 単一のライム グリーンの CTA アクセント `{colors.primary}` (`#9fe870`) — ブランドの普遍的なプライマリ アクション カラーです。第二アクセントはありません。
• 2 面表示タイポグラフィ — Wise Sans (独自仕様、ウェイト 900、ヒーロー スケール) + Inter (ウェイト 600、サブディスプレイ スケール)。コントラストはブランドのタイポグラフィーのストーリーです。
• `{rounded.xl}` 24 ピクセルは正規のカードとボタンの半径です。寛大で、フレンドリー。
• セージ色のキャンバス `{colors.canvas-soft}` (`#e8ebe6`) はブランドのヒーローの表面です。白の `{colors.canvas}` は、sage バンド内のカード用に予約されています。
• 完全なセマンティック パレット: ポジティブな緑のファミリー、警告の黄色のファミリー、ネガティブな赤のファミリー — それぞれが製品内で使用するためのコンテンツ / ホバー / アクティブなバリアントとともに文書化されています。
• ヒーローの通貨換算カード — ブランドの特徴的なインタラクティブ コンポーネントで、金額入力の送受信をホストします。

色

ブランドとアクセント

• **ワイズ グリーン** (`{colors.primary}` — `#9fe870`): ブランドの普遍的な CTA カラー。すべての主ボタン、すべての「送金」錠剤、ブランドのロゴのアクセント。
• **Wise Green Hover** (`{colors.primary-active}` — `#cdffad`): アクティブ状態を示す明るい緑色。
• **ワイズ グリーン ニュートラル** (`{colors.primary-neutral}` — `#c5edab`): ニュートラルなアクティブ塗りつぶしとして使用される中彩度のグリーン。
• **Wise Green Pale** (`{colors.primary-pale}` — `#e2f6d5`): 柔らかい表面の色合い/バッジの背景用の最も明るい緑です。

表面

• **キャンバス** (`{colors.canvas}` — `#ffffff`): カードの内側の純白。
• **Canvas Soft** (`{colors.canvas-soft}` — `#e8ebe6`): セージ色のページ背景。ブランドの雰囲気を決定づけます。

テキスト

• **インク** (`{colors.ink}` — `#0e0f0c`): ほのかにオリーブの温かみのある黒に近い色 - ブランドのデフォルトのテキストと見出しの色。
• **インク ディープ** (`{colors.ink-deep}` — `#163300`): ポジ状態の表面に使用される深いフォレスト グリーンのインク。
• **本文** (`{colors.body}` — `#454745`): 二次的な本文テキスト。
• **ミュート** (`{colors.mute}` — `#868685`): 優先度の最も低いテキスト — キャプション、プレースホルダー、細字。

セマンティック

• **ポジティブ** (`{colors.positive}` — `#2ead4b`): 成功インジケーター。
• **ポジティブディープ** (`{colors.positive-deep}` — `#054d28`): 押されたポジティブ状態。
• **警告** (`{colors.warning}` — `#ffd11a`): 注意インジケーター。
• **警告ディープ** (`{colors.warning-deep}` — `#b86700`): 警告が押されました。
• **警告コンテンツ** (`{colors.warning-content}` — `#4a3b1c`): 警告面のテキスト。
• **ネガティブ** (`{colors.negative}` — `#d03238`): 破壊的/エラーレッド。
• **ネガティブディープ** (`{colors.negative-deep}` — `#a72027`): 破壊的に押されました。
• **Negative Darkest** (`{colors.negative-darkest}` — `#a7000d`): 最も強調された破壊的なテキスト。
• **Negative Bg** (`{colors.negative-bg}` — `#320707`): 破壊的な吹き出し背景用の濃い栗色。

ブランド アクセント — 三次

• **アクセント オレンジ** (`{colors.accent-orange}` — `#ffc091`): イラスト付きのコンテンツ/価格カードの内側に使用される明るい桃。
• **アクセント シアン** (`{colors.accent-chan}` — `#38c8ff`): 三次イラストのアクセントとして使用される明るいスカイブルー。

タイポグラフィー

フォントファミリー

2 つの面がシステムを梯子します。

1. **Wise Sans** — すべてのヒーロー ディスプレイに使用される、異常に重いウェイト 900 を備えた独自の幾何学的な Sans。文字盤はブランドのタイポグラフィーのサインです。重量は常に 900 であり、マーケティング面で軽量化されることはありません。

2. **Inter** — サブディスプレイ (ウェイト 600)、すべてのボディ、フォーム ラベルに使用されます。コンテキストに応じた代替の `font-feature-settings: "calt"` がロードされています。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 |使用 |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 126ピクセル | 900 | 107.1ピクセル | 0 | M のヒーロー ステンシル