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 알약과 브랜드 액센트로 사용되는 선명한 라임 그린색 ``(``)은 영웅 밴드를 가로지르는 옅은 세이지색 캔버스 ``(``)과 대조됩니다. 검정색에 가까운 잉크 `` (``) 브랜드의 기본 올리브 캐스트에서 따뜻함이 느껴집니다. 이 브랜드는 은행이라기보다는 차분한 스칸디나비아 잡지처럼 읽혀집니다. 넉넉한 여백, 크고 둥근 카드, 모든 영웅 헤드라인을 담고 있는 무게 900의 유난히 무거운 디스플레이 등이 있습니다.

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

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

**주요 특성:**

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

색상

브랜드 및 액센트

• **와이즈 그린** (`` — ``): 브랜드의 보편적인 CTA 색상입니다. 모든 기본 버튼, 모든 "송금" 알약, 브랜드 로고 액센트.
• **현명한 녹색 호버**(`` — ``): 활성 상태를 나타내는 밝은 녹색입니다.
• **와이즈 그린 뉴트럴** (`` — ``): 뉴트럴 활성 채우기로 사용되는 중간 채도의 녹색입니다.
• **와이즈 그린 페일**(`` — ``): 부드러운 표면 색조/배지 배경을 위한 가장 밝은 녹색입니다.

표면

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

텍스트

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

의미

• **긍정**(`` — ``): 성공 표시기.
• **포지티브 딥**(`` — ``): 포지티브 상태를 눌렀습니다.
• **경고** (`` — ``): 주의 표시.
• **심각한 경고**(`` — ``): 경고를 눌렀습니다.
• **경고 내용**(`` — ``): 경고 표면의 텍스트.
• **부정**(`` — ``): 파괴적/오류 빨간색.
• **음의 깊이**(`` — ``): 파괴적인 누르기.
• **부정 가장 어두운**(`` — ``): 가장 강조되는 파괴적인 텍스트.
• **음수 Bg**(`` — ``): 파괴적인 콜아웃 배경을 위한 어두운 적갈색.

브랜드 강조 — 3차

• **액센트 오렌지** (`` — ``): 일러스트 콘텐츠/가격 카드에 사용되는 밝은 복숭아색.
• **액센트 청록색** (`` — ``): 3차 일러스트레이션 액센트로 사용되는 밝은 하늘색.

타이포그래피

글꼴군

두 얼굴이 시스템을 구성합니다.

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

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

계층

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

사용

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

| _`` | 126px | 900 | 107.1px | 0 | 최대 규모의 영웅 스텐실. |

| _`` | 96px | 900 | 81.6px | 0 | 서브 히어로 스케일. |_

| _`` | 64px | 900 | 54.4px | 0 | 표준 영웅 헤드라인. |_

| _`` | 47px | 400 | 70.5px | -0.108px | 더 가벼운 하위 디스플레이. |_

| _`` | 40px | 900 | 34px | 0 | 섹션/카드 헤드라인. |

| _`` | 32px | 600 | 38.4px | -0.96px | 상호 렌더링된 섹션 제목. |_

| _`` | 24px | 600 | 31.2px | -0.48px | 하위 섹션이 표시됩니다. |_

| _`` | 20픽셀 | 400 | 30px | 0 | 단락을 리드합니다. |

| _`` | 16px | 400 | 24px | 0 | 기본 본체. |

| _`` | 16px | 600 | 24px | 0 | 굵은 인라인 본문. |

| _`` | 14px | 400 | 20픽셀 | 0 | 보조 본체. |_

| _`` | 14px | 600 | 20픽셀 | 0 | 굵은 캡션/nav-link. |_

| _`` | 12px | 400 | 16px | 0 | 작은 글씨. |

| _`` | 16px | 600 | 24px | 0 | 버튼 라벨. |_

원칙

• **영웅의 무게는 900이고, 그 밖의 모든 것의 무게는 600입니다.** 브랜드의 디스플레이 천장은 풀 블랙 무게입니다. 아래의 모든 내용은 세미볼드체입니다.
• **브랜드 보이스를 위한 Wise Sans, 유틸리티를 위한 Inter.** 엄격한 역할 분리.

글꼴 대체에 대한 참고사항

Wise Sans는 독점적입니다. 오픈 소스 대체물:

• **디스플레이** — 무게 900의 *Inter* 또는 무게 800/900의 *Manrope*는 기하학적인 무거움을 포착합니다. *Geist* 웨이트 800은 무난한 두 번째 선택입니다.
• **하위 디스플레이 + 본체** — *인터*는 브랜드의 실제 두 번째 얼굴입니다.

레이아웃

간격 시스템

• **기본 단위**: 4픽셀.
• **토큰**: `` 2px · `` 4px · `` 8px · `` 12px · `` 16px · `` 24픽셀 · `` 32픽셀 · `` 48픽셀.
• **섹션 패딩**: 밴드는 데스크탑에서 `` 48px 상단/하단을 사용합니다.
• **카드 내부**: `` 24픽셀의 카드

그리드 및 컨테이너

• 마케팅 컨테이너 센터는 ~1200픽셀입니다.
• Hero: 데스크탑의 분할 레이아웃(왼쪽 헤드라인, 오른쪽 통화 변환기 카드); 모바일에 쌓여있습니다.
• 피처 그리드: 데스크탑에서 2-up/3-up.

반응형 전략

#### 중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 모바일 | _< 768px | Hero stacks; converter card full-width below headline; grids 1-up. |

| 태블릿 | 768~1023px | 그리드 2업. |

| 데스크탑 | ≥ 1024px | 영웅 분할; 전체 그리드. |_

#### 터치 대상

버튼은 높이가 ~48px(세로 패딩 12개 + 줄 24개)로 렌더링됩니다. 모든 너비의 WCAG AAA.

#### 이미지 동작

사진이 부족합니다. 이 브랜드는 카드 내부에 예시적인 SVG와 제품 모형을 선호합니다. 국가 국기 썸네일은 통화 행 안에 표시됩니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 레벨 0 — 평면 | 그림자도 없고 국경도 없습니다. | 기본. |_

| 레벨 1 — 어두운 부분의 헤어라인 | 1픽셀 실선 `` 테두리. | 3차 개요 버튼, 양식 입력. |_

| 레벨 2 — 소프트 카드 | 세이지 캔버스에 놓인 암시적 레벨 0 흰색 카드 — 표면 대비는 고도와 같습니다. | 현자 영웅 밴드의 카드입니다. |_

브랜드는 표면 대비(`` 배경 대 `` 카드)를 기본 고도 신호로 사용합니다.

도형

테두리 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 0픽셀 | 풀 블리드 밴드. |

| _`` | 8픽셀 | 인라인 알약, 작은 배지. |

| _`` | 12px | 양식 입력, 더 작은 크롬. |

| _`` | 16px | 중간 크기 카드. |

| _`` | 24px | 브랜드의 표준 버튼 + 카드 반경. |

| _`` | 9999px | 상태 알약과 전체 반경 악센트. |

| _`` | 9999px | 원형 아이콘 컨테이너. |

구성요소

버튼

**`button-primary`** — 라임 그린 CTA 알약.

• 배경 ``, 텍스트 ``, 라벨 ``, 패딩 ` `, 모양 `` 24px.

**`button-secondary`** — 샐비어 색상의 보조 색상입니다.

• 배경 ``, 텍스트 ``, 동일한 타이포그래피/패딩/모양.

**`button-tertiary`** — 흰색 윤곽선 3차.

• 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, 동일한 타이포그래피/패딩/모양.

_**`button-icon-circular`** — 원형 아이콘 버튼.

• 배경 ``, 잉크 아이콘, 모양 ``.

카드 및 용기

**`card-content`** — 기본 흰색 카드.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``. 테두리가 없으며 세이지 캔버스 위에 놓여 있습니다.

**`card-feature-sage`** — 샐비어 색상 기능 카드.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``.

**`card-feature-green`** — 부드러운 녹색 기능 카드.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``.

**`card-feature-dark`** — 녹색 텍스트가 있는 극성이 반전된 어두운 카드입니다.

• 배경 ``, 텍스트 ``(현명한 녹색!), 패딩 ``, 모양 ``. 홍보용으로 사용됩니다.

**`currency-converter-card`** — 브랜드의 시그니처 대화형 위젯.

• 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, 패딩 ``, 모양 ``. 호스트 금액 입력 + 통화 선택기.

입력 및 양식

**`text-input`** — 표준 텍스트 입력.

• 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, 본문 ``, 패딩 ` `, 모양 ``.

탐색

**`nav-bar`** — 고정 상단 탐색

• 배경 ``, 텍스트 ``, 패딩 ` `.

**`nav-link`** — 탐색 내부의 링크 항목

• 텍스트 ``, ``에 설정됨.

**`footer`** — 어두운 바닥글 밴드.

• 배경 ``, 텍스트 ``, 패딩 ` `. ``.
의 본문

서명 구성요소

**`hero-band`** — 세이지 캔버스 히어로 밴드.

• 배경 ``, 텍스트 ``, 패딩 ` `. ``(Wise Sans 가중치 900)의 헤드라인.

**`hero-band-dark`** — 극성이 뒤바뀐 어둠의 영웅.

• 배경 ``, 텍스트 ``(검은색에 가까운 녹색 헤드라인!), 동일한 패딩/크기.

**`content-band`** — 영웅을 따르는 흰색 콘텐츠 밴드

• 배경 ``, 텍스트 ``, 패딩 ` `. ``.
의 섹션 헤드라인

**`badge-positive`** — 양성 상태 알약.

• 배경 ``, 텍스트 ``, 본문 ``, 패딩 ` `, 모양 ``.

**`badge-negative`** — 부정적인 상태 알약.

• 배경 ``, 텍스트 흰색, 본문 ``, 패딩 ` `, 모양 ``.

예(예시)

> 자동 파생 키트-미러 데모 표면(`scripts/derive-examples-block.mjs`). 각 `ex-*` 항목은 브랜드 기본 기본 요소를 참조하므로 다운스트림 소비자(`/preview-design`, `/generate-kit`)는 동일한 10개 표면을 일관되게 다시 스킨합니다. `TO_FILL` 마커는 누락된 기본 요소를 나타냅니다. LLM 판단 단계에서 해결됩니다.

**`ex-pricing-tier`** — 기본 가격 등급 카드. 브랜드 캔버스처럼 부드러운 표면에 기능 카드 크롬을 재사용합니다.

• 속성: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — 추천/강조 표시된 계층 — 극성이 반전된 표면(밝은 모드에서 어두운 채우기 + 밝은 텍스트, 어두운 모드에서 밝은 채우기 + 어두운 텍스트).

• 속성: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — 포함 내용 요약 카드 — SaaS/B2B 업종에 맞게 용도가 변경되었습니다(문자 그대로의 제품 갤러리 아님).

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — 구독 요약 — SaaS/B2B용으로 재사용됨(리터럴 카트가 아닌 추가 기능당 항목).

• 속성: `backgroundColor`, `rounded`, `padding`, `item-divider`

_**`ex-app-shell-row`** — 앱 셸 예시 내부의 사이드바 탐색 행. 활성 상태는 기본 브랜드를 지표로 사용합니다.

• 속성: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — 기본 데이터 테이블 th + td chrome. 헤더는 모노 캡 눈썹 타이포그래피를 사용합니다. body는 body-sm을 사용합니다.

• 속성: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — 로그인/가입 카드. 내부에 텍스트 입력 기본 요소가 포함된 기능 카드 크롬을 재사용합니다.

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — 모달 대화 상자 표면 — 높은 그림자가 있는 기능 카드와 동일한 크롬입니다.

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — 빈 상태 그림 프레임.

• 속성: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — 토스트 알림 표면 — 기능 카드 모양 + 중간 그림자.

• 속성: `backgroundColor`, `rounded`, `padding`, `typography`

해야 할 일과 하지 말아야 할 일

하라

• 예약 `` 모든 기본 CTA에 대해 현명한 녹색입니다. 라임 그린 알약은 브랜드의 전환 시그니처입니다.
• 영웅 헤드라인을 `` / `` Wise Sans 무게 900으로 설정하세요. 결코 가볍지 않습니다.
• 버튼과 카드에는 `` 24픽셀을 사용하세요. 넉넉한 반경은 브랜드의 친근함을 상징합니다.
• `` 세이지 캔버스 → `` 흰색 카드의 페이지 표면을 순환합니다. 표면 대비는 고도를 전달합니다.
• 제품 내 상태에 대해 전체 의미 체계 팔레트(긍정적/경고/부정적)를 사용하십시오. Wise 녹색은 브랜드 CTA이므로 성공 표시기로 재사용하지 마십시오.

하지 마세요

• 두 번째 브랜드 강조점을 도입하지 마세요. 현명한 녹색은 유일한 아이덴티티 컬러입니다.
• 영웅의 무게를 700 이하로 렌더링하지 마세요. 브랜드의 디스플레이 무게는 900입니다.
• CTA를 선명한 직사각형으로 렌더링하지 마세요. 24px 알약 모양은 협상할 수 없습니다.
• 녹색 CTA를 녹색 배경과 결합하지 마세요. 브랜드는 항상 중립적인 표면(세이지/화이트/잉크)에 현명한 녹색으로 자리잡고 있습니다.
• 영웅 타이포그래피를 위해 Wise Sans를 일반적인 기하학적 산세로 대체하지 마십시오. 독점 문자는 브랜드의 목소리입니다.

概要

Wise — グローバル送金ブランド — は、単一のシグネチャー ペアリングでそのアイデンティティを身に着けています。CTA ピルとブランド アクセントとして使用される鮮やかなライム グリーンの `` (``) は、ヒーロー バンドを横切る淡いセージ色のキャンバス `` (``) を背景にしています。黒に近いインク `` (``) に、ブランドの根底にあるオリーブキャストからの暖かさのヒントが含まれています。このブランドは、銀行というよりも、落ち着いたスカンジナビアの雑誌に似ています。たっぷりとした余白、大きな丸いカード、重量 900 に設定されていない異常に重いディスプレイには、すべてのヒーローの見出しが掲載されています。

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

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

**主な特徴:**

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

色

ブランドとアクセント

• **ワイズ グリーン** (`` — ``): ブランドの普遍的な CTA カラー。すべての主ボタン、すべての「送金」錠剤、ブランドのロゴのアクセント。
• **ワイズ グリーン ホバー** (`` — ``): 明るい緑色はアクティブ状態を示します。
• **ワイズ グリーン ニュートラル** (`` — ``): ニュートラルなアクティブ塗りつぶしとして使用される中彩度のグリーン。
• **ワイズ グリーン ペール** (`` — ``): 柔らかい表面の色合い/バッジの背景用の最も明るい緑色。

サーフェス

• **キャンバス** (`` — ``): カードの内側はピュアホワイト。
• **キャンバス ソフト** (`` — ``): セージ色のページ背景。 ブランドの雰囲気を定義します。

テキスト

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

セマンティック

• **肯定的** (`` — ``): 成功インジケーター。
• **ポジティブディープ** (`` — ``): 押されたポジティブ状態。
• **警告** (`` — ``): 注意インジケーター。
• **深い警告** (`` — ``): 警告が押されました。
• **警告コンテンツ** (`` — ``): 警告面のテキスト。
• **ネガティブ** (`` — ``): 破壊的/エラー赤色。
• **ネガティブディープ** (`` — ``): 破壊的な押下。
• **最も暗いネガティブ** (`` — ``): 最も強調された破壊的なテキスト。
• **ネガティブ背景** (`` — ``): 破壊的な吹き出し背景の濃い栗色。

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

• **アクセント オレンジ** (`` — ``): イラスト付きコンテンツ/価格カードの内側に明るい桃が使用されています。
• **アクセントシアン** (`` — ``): 三次イラストのアクセントとして使用される明るいスカイブルー。

タイポグラフィ

フォント ファミリー

2 つの顔がシステムを梯子します:

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

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

階層_

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

を使用します

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

| `` | 126ピクセル | 900 | 107.1ピクセル | 0 |最大スケールのヒーロー ステンシル。 |

| `` | 96ピクセル | 900 | 81.6ピクセル | 0 |サブヒーロースケール。 |

| `` | 64ピクセル | 900 | 54.4ピクセル | 0 |標準的なヒーローの見出し。 |

| `` | 47ピクセル | 400 | 70.5ピクセル | -0.108ピクセル |サブディスプレイの軽量化。 |

| `` | 40ピクセル | 900 | 34ピクセル | 0 |セクション/カードの見出し。 |

| `` | 32ピクセル | 600 | 38.4ピクセル | -0.96ピクセル |インターレンダリングされたセクション見出し。 |

| `` | 24ピクセル | 600 | 31.2ピクセル | -0.48ピクセル |サブセクションが表示されます。 |

| `` | 20ピクセル | 400 | 30ピクセル | 0 |段落をリードします。 |

| `` | 16ピクセル | 400 | 24ピクセル | 0 |デフォルトの本体。 |

| `` | 16ピクセル | 600 | 24ピクセル | 0 |太字のインラインボディ。 |

| `` | 14ピクセル | 400 | 20ピクセル | 0 |二次本体。 |

| `` | 14ピクセル | 600 | 20ピクセル | 0 |太字のキャプション/ナビゲーションリンク。 |

| `` | 12ピクセル | 400 | 16ピクセル | 0 |細かい文字。 |

| `` | 16ピクセル | 600 | 24ピクセル | 0 |ボタンのラベル。 |

原則

• **ヒーローのウェイト 900、その他すべてのウェイト 600。** ブランドのディスプレイ天井は完全に黒のウェイトです。以下はすべて半太字です。
• **ブランドの声には Wise Sans、実用性には Inter。** 厳密な役割分担。

フォントの代替に関する注意

Wise Sans は独自のものです。オープンソースの代替品:

• **ディスプレイ** — ウェイト 900 の *Inter* またはウェイト 800 / 900 の *Manrope* は、幾何学的重さをキャプチャします。 *Geist* ウェイト 800 は、2 番目の選択肢としては妥当です。
• **サブディスプレイ + ボディ** — *Inter* はブランドの実際の 2 番目の顔です。

レイアウト

間隔システム

• **基本単位**: 4 ピクセル
• _**トークン**: `` 2 px · `` 4 px · `` 8 px · `` 12 px · `` 16 px · `` 24 px · `` 32 ピクセル · `` 48 ピクセル.
• **セクション パディング**: バンドはデスクトップ上で `` 48 ピクセルの上下を使用します。
• **カード内部**: `` 24 ピクセルのカード。

グリッドとコンテナ

• ~1200 ピクセルのマーケティング コンテナ センター。
• ヒーロー: デスクトップの分割レイアウト (見出しが左、通貨換算カードが右)。モバイルにスタックされています。
• 機能グリッド: デスクトップでの 2 アップ / 3 アップ。

レスポンシブ戦略

#### ブレークポイント

|名前 |幅 |主な変更点 |

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

|モバイル | < 768px | Hero stacks; converter card full-width below headline; grids 1-up. |

|タブレット | 768–1023ピクセル |グリッド 2 アップ。 |

|デスクトップ | ≥ 1024 ピクセル |ヒーロー分割。フルグリッド。 |

#### タッチターゲット

ボタンは高さ約 48 ピクセル (垂直方向のパディング 12 + 24 行) でレンダリングされます。すべての幅で WCAG AAA。

#### 画像の動作

写真はまばらです。このブランドは、カード内のイラスト的な SVG や製品モックアップを好みます。国旗のサムネイルは通貨行内に表示されます。

標高と深さ

|レベル |治療 | |

を使用します

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

|レベル 0 — フラット |影も境界線もありません。 |デフォルト。 |

|レベル 1 — 暗い色のヘアライン | 1 ピクセルの実線__CODEBCK_698___ の境界線。 |三次アウトライン ボタン、フォーム入力。 |

|レベル 2 — ソフトカード |セージ キャンバス上にある暗黙のレベル 0 の白いカード — 表面のコントラストが標高です。 |賢者の英雄バンドのカード。 |

このブランドは、表面のコントラスト (`` 背景と `` カード) を主な標高の手がかりとして使用しています。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 0ピクセル |フルブリードバンド。 |

| `` | 8ピクセル |インライン錠剤、小さなバッジ。 |

| `` | 12ピクセル |フォーム入力、小さなクロム。 |

| `` | 16ピクセル |中サイズのカード。 |

| `` | 24ピクセル |ブランドの正規のボタン + カードの半径。 |

| `` | 9999ピクセル |ステータスピルとフルラジアスアクセント。 |

| `` | 9999ピクセル |円形のアイコンコンテナー。 |

コンポーネント

ボタン

**`button-primary`** — ライムグリーンの CTA 錠剤。

• 背景__CODEBCK_709___、テキスト__CODEBCK_710___、ラベル__CODEBCK_711___、パディング__CODEBCK_712___、形状__CODEBCK_713___ 24ピクセル

**`button-secondary`** — セージ色のセカンダリ。

• 背景__CODEBCK_715___、テキスト__CODEBCK_716___、同じタイポグラフィ/パディング/形状。

_**`button-tertiary`** — 白いアウトラインの三次。

• 背景__CODEBCK_718___、テキスト__CODEBCK_719___、1ピクセルの実線__CODEBCK_720___境界線、同じタイポグラフィ/パディング/形状。

**`button-icon-circular`** — 円形のアイコン ボタン。

• 背景__CODEBCK_722___、インクアイコン、形状__CODEBCK_723___.

カードとコンテナ

**`card-content`** — デフォルトの白いカード。

• 背景__CODEBCK_725___、テキスト__CODEBCK_726___、パディング__CODEBCK_727___、形状__CODEBCK_728___。枠線はなく、セージ キャンバス上に配置されます。

**`card-feature-sage`** — セージ色のフィーチャー カード。

• 背景__CODEBCK_730___、テキスト__CODEBCK_731___、パディング__CODEBCK_732___、形状__CODEBCK_733___.

**`card-feature-green`** — ソフトグリーンのフィーチャーカード。

• 背景__CODEBCK_735___、テキスト__CODEBCK_736___、パディング__CODEBCK_737___、形状__CODEBCK_738___.

**`card-feature-dark`** — 緑色のテキストが付いた極性反転されたダークカード。

• 背景__CODEBCK_740___、テキスト__CODEBCK_741___(賢明な緑!)、パディング__CODEBCK_742___、形状__CODEBCK_743___。プロモーション目的で使用されます。

**`currency-converter-card`** — ブランドの特徴的なインタラクティブ ウィジェット。

• 背景__CODEBCK_745___、テキスト__CODEBCK_746___、1ピクセルの実線__CODEBCK_747___境界線、パディング__CODEBCK_748___、形状__CODEBCK_749___。 金額入力 + 通貨セレクター間のホスト。

入力とフォーム

**`text-input`** — 正規のテキスト入力。

• 背景__CODEBCK_751___、テキスト__CODEBCK_752___、1ピクセルの実線__CODEBCK_753___境界線、本文__CODEBCK_754___、パディング__CODEBCK_755___、形状__CODEBCK_756___.

ナビゲーション

**`nav-bar`** — スティッキートップナビゲーション

• 背景__CODEBCK_758___、テキスト__CODEBCK_759___、パディング__CODEBCK_760___.

**`nav-link`** — ナビゲーション内の項目をリンクします

• テキスト__CODEBCK_762___、__CODEBCK_763___に設定。

**`footer`** — ダークフッターバンド。

• 背景__CODEBCK_765___、テキスト__CODEBCK_766___、パディング__CODEBCK_767___。 ``.
の本文

署名コンポーネント

**`hero-band`** — セージキャンバスのヒーローバンド。

• 背景__CODEBCK_770___、テキスト__CODEBCK_771___、パディング__CODEBCK_772___。 `` (Wise Sans ウェイト 900) の見出し。

_**`hero-band-dark`** — 極性が反転したダーク ヒーロー。

• 背景__CODEBCK_775___、テキスト__CODEBCK_776___(ほぼ黒に賢明な緑色の見出し!)、同じパディング/スケール。

**`content-band`** — ヒーローに続く白いコンテンツ バンド。

• 背景__CODEBCK_778___、テキスト__CODEBCK_779___、パディング__CODEBCK_780___。 ``.
のセクション見出し

**`badge-positive`** — ポジティブ ステータスの薬。

• 背景__CODEBCK_783___、テキスト__CODEBCK_784___、本文__CODEBCK_785___、パディング__CODEBCK_786___、形状__CODEBCK_787___.

**`badge-negative`** — ネガティブなステータスの薬。

• 背景__CODEBCK_789___、テキスト白、本文__CODEBCK_790___、パディング__CODEBCK_791___、形状__CODEBCK_792___.

例 (説明)

> 自動派生キットミラー デモンストレーション サーフェス (`scripts/derive-examples-block.mjs`)。各 `ex-*` エントリはブランドネイティブのプリミティブを参照するため、下流のコンシューマ (`/preview-design`、__CODEBCK_796___) は同じ 10 個のサーフェスを一貫して再スキンします。 `TO_FILL` マーカーはプリミティブが欠落していることを示しています — LLM 判定パスで解決されます。

**`ex-pricing-tier`** — デフォルトの価格帯カード。 ブランドキャンバスのような柔らかい表面を備えたフィーチャーカードクロムを再利用します。

• プロパティ: `backgroundColor`、__CODEBCK_800___、__CODEBCK_801___、__CODEBCK_802___、__CODEBCK_803___

**`ex-pricing-tier-featured`** — 注目/ハイライト層 — 極性反転サーフェス (ライト モードでは暗い塗りつぶし + 明るいテキスト、ダーク モードでは明るい塗りつぶし + 暗いテキスト)。

• プロパティ: `backgroundColor`、__CODEBCK_806___、__CODEBCK_807___、__CODEBCK_808___

_**`ex-product-selector`** — 含まれるもの概要カード — SaaS / B2B 業種向けに再利用されています (文字通りの製品ギャラリーではありません)。

• プロパティ: `backgroundColor`、__CODEBCK_811___、__CODEBCK_812___

**`ex-cart-drawer`** — サブスクリプションの概要 — SaaS / B2B 用に再利用 (文字通りのカートではなく、アドオンごとの品目)。

• プロパティ: `backgroundColor`、__CODEBCK_815___、__CODEBCK_816___、__CODEBCK_817__HTMLTAG_549___

**`ex-app-shell-row`** — App Shell サンプル内のサイドバーのナビゲーション行。アクティブな状態では、ブランドのプライマリを指標として使用します。

• プロパティ: `backgroundColor`、__CODEBCK_820___、__CODEBCK_821___、__CODEBCK_822___

**`ex-data-table-cell`** — デフォルトのデータテーブル th + td chrome。ヘッダーにはモノキャップの眉毛タイポグラフィが使用されています。 body は body-sm を使用します。

• プロパティ: `headerBackground`、__CODEBCK_825___、__CODEBCK_826___、__CODEBCK_827___、__CODEBCK_828___

_**`ex-auth-form-card`** — サインイン/サインアップ カード。テキスト入力プリミティブを内部に備えた機能カード クロムを再利用します。

• プロパティ: `backgroundColor`、__CODEBCK_831___、__CODEBCK_832___

**`ex-modal-card`** — モーダル ダイアログ サーフェス — 影が高くなったフィーチャー カードと同じクロム。

• プロパティ: `backgroundColor`、__CODEBCK_835___、__CODEBCK_836___

**`ex-empty-state-card`** — 空の状態のイラスト フレーム。

• プロパティ: `backgroundColor`、__CODEBCK_839___、__CODEBCK_840___、__CODEBCK_841___

_**`ex-toast`** — トースト通知面 — フィーチャー カードの形状 + 中程度の影。

• プロパティ: `backgroundColor`、__CODEBCK_844___、__CODEBCK_845___、__CODEBCK_846___

推奨事項と禁止事項

__HTMLTAG_590___ を実行してください

• 予約 `` すべての主要 CTA に適した賢明なグリーン。ライムグリーンの錠剤は、ブランドのコンバージョンのサインです。
• __CODEBCK_848___ / `` でヒーローの見出しを設定します。Wise Sans ウェイト 900。決して軽くなりません。
• ボタンとカードには__CODEBCK_850___ 24 ピクセルを使用します。ゆったりとした半径がブランドの親しみやすさの特徴です。
• `` セージ キャンバス → `` の白いカードでページ サーフェスを循環します。表面のコントラストは高低をもたらします。
• 製品内のステータスには完全なセマンティック パレット (肯定的/警告/否定的) を使用します。ワイズ グリーンはブランド CTA であるため、成功指標として再利用しないでください。

しないでください

• 第二のブランドアクセントを導入しないでください。 ワイズグリーンが唯一のアイデンティティカラーです。
• _ヒーローをウェイト 700 以下でレンダリングしないでください。ブランドの表示ウェイトは 900 です。
• CTA を鋭い長方形として表示しないでください。 24 ピクセルの錠剤のジオメトリは交渉の余地がありません。
• 緑色の CTA を緑色の背景と組み合わせないでください。このブランドは、ニュートラルな表面 (セージ / ホワイト / インク) では常にワイズ グリーンを保ちます。
• ヒーローのタイポグラフィーとして、Wise Sans を一般的な幾何学的な Sans に置き換えないでください。独自の顔がブランドの声です。

Visual Identity & Brand Recognition

What makes Wise's design system memorable is not any single element but the cohesive interaction of its parts. The #0a0a0a brand color, the consistent use of system font across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Wise's design system memorable is not any single element but the cohesive interaction of its parts. The #0a0a0a brand color, the consistent use of system font across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Wise's design system memorable is not any single element but the cohesive interaction of its parts. The #0a0a0a brand color, the consistent use of system font across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Related Design Systems

Explore similar design languages from the same category:

• Kraken Design System
• Stripe Design System
• Revolut Design System
• Binance Design System