디자인 시스템
web
v1.0.0
90/100

Wise

@dante · Fintech & Crypto

Wise-flavored global fintech system: vivid lime-green CTA pills, sage-tinted canvas, near-black olive ink, and Wise Sans weight-900 hero displays on generous 24px rounded cards.

HTML/CSS
React
shadcn/ui
Tailwind
#crypto
#fintech
#wise
Wise
다운로드11
패키지 JSON 다운로드
DESIGN.mdSKILL.md

개요

Wise

Visual Theme

A global money-transfer brand that reads more like a calm Scandinavian magazine than a bank. The whole experience sits on a sage-tinted canvas (#e8ebe6) with generous whitespace, large 24px-rounded white cards, and an unusually heavy display sans set at weight 900 carrying every hero headline. The signature move is a single vivid lime-green CTA pill (#9fe870) against near-black olive ink (#0e0f0c) — friendly, trustworthy, and unmistakably fintech-without-the-cold. Bands alternate between sage canvas and polarity-flipped near-black, where the lime-green headline glows against the dark.

Color Principles

One accent, no compromises. Wise Green (#9fe870) is the sole brand identity colour — every primary CTA, every logo accent — supported by its lighter active (#cdffad), neutral (#c5edab), and pale (#e2f6d5) tints. Surfaces are just two notes: pure white (#ffffff) cards on the sage canvas (#e8ebe6), and surface contrast alone carries elevation. Text runs near-black olive ink (#0e0f0c) down through body (#454745) to mute (#868685). A full semantic palette — positive green (#2ead4b), warning yellow (#ffd11a), negative red (#d03238) — handles in-product status so the brand green is never repurposed as a success signal. Tertiary peach (#ffc091) and cyan (#38c8ff) appear only inside illustrative content.

Typography

Two faces, strict roles. Wise Sans — a proprietary geometric sans — carries all hero displays at weight 900, from 64px up to 126px, and is the brand's typographic voice. Inter at weight 600 handles every sub-display, all body, and form labels. The contrast between the chunky proprietary face and Inter's neutrality is the hierarchy. Open-source substitutes: Inter 900 or Manrope 800/900 for the display face. Weight 900 for hero, weight 600 for everything else — never lighter on the marketing surface.

Layout

4px base spacing scaling through 8/12/16/24/32 to 48px section bands. Marketing container centres at ~1200px; the hero splits headline-left / currency-converter-card-right on desktop and stacks on mobile. Border-radius climbs from 8px inline pills to 12px form inputs, 16px mid cards, and the canonical 24px for buttons and cards — the generous radius is the brand's friendliness signature. Depth comes from surface contrast (white cards on sage) and a 1px ink hairline on outline buttons and inputs — never heavy drop shadows.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (22)

wiseGreen
#9fe870
onPrimary
#0e0f0c
wiseGreenActive
#cdffad
wiseGreenNeutral
#c5edab
wiseGreenPale
#e2f6d5
ink
#0e0f0c
inkDeep
#163300
body
#454745
mute
#868685
canvas
#ffffff
canvasSoft
#e8ebe6
positive
#2ead4b
positiveDeep
#054d28
warning
#ffd11a
warningDeep
#b86700
warningContent
#4a3b1c
negative
#d03238
negativeDeep
#a72027
negativeDarkest
#a7000d
negativeBg
#320707
accentOrange
#ffc091
accentCyan
#38c8ff

타이포그래피 (6)

display
Wise Sans, Inter, Manrope, system-ui, -apple-system, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
heading
Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
ui
Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
'JetBrains Mono', ui-monospace, Menlo, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
scale
unparsed
{
  "displayMega": "126px/107.1px",
  "displayXxl": "96px/81.6px",
  "displayXl": "64px/54.4px",
  "displayLg": "47px/70.5px",
  "displayMd": "40px/34px",
  "displaySm": "32px/38.4px",
  "displayXs": "24px/31.2px",
  "bodyLg": "20px/30px",
  "bodyMd": "16px/24px",
  "bodySm": "14px/20px",
  "caption": "12px/16px",
  "button": "16px/24px"
}

컴포넌트 (14)

Button

Primary affordances as 24px pill-rectangles. Lime-green primary is the brand's universal CTA; sage secondary and ink-outlined tertiary support it.

html
Hand-tuned CSS, no framework
2 props · 5 states · 10 tags · 2 소스
누락 상태: loading

Input

Single-line field on white with a 1px ink hairline border and 12px radius. Focus lifts to the lime-green ring.

html
Hand-tuned CSS, no framework
2 props · 5 states · 8 tags · 2 소스

Card

White 24px-rounded card resting on the sage canvas — surface contrast alone carries elevation, no drop shadow.

html
Hand-tuned CSS, no framework
1 props · 2 states · 10 tags · 2 소스
누락 상태: focus-visible, disabled

Badge

Status pill — pale-green background with forest-green text for positive, dark maroon for negative.

html
Hand-tuned CSS, no framework
1 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Heading

Two-face hierarchy — Wise Sans weight 900 for the brand moment, Inter weight 600 for everything below.

html
Hand-tuned CSS, no framework
1 props · 1 states · 9 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Link

Quiet inline links in ink with underline-on-hover; lime-green accent surfaces only on the dark footer band.

html
Hand-tuned CSS, no framework
1 props · 4 states · 4 tags · 2 소스
누락 상태: disabled

Hero

Sage-canvas hero band with a Wise Sans weight-900 headline left and the signature currency-converter card right.

html
Hand-tuned CSS, no framework
1 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Nav

Sticky white top nav with ink links in body-sm-strong and a single lime-green CTA pill.

html
Hand-tuned CSS, no framework
0 props · 3 states · 6 tags · 2 소스
누락 상태: disabled

Footer

Near-black footer band with sage-tinted utility links — the inverted, calming bookend of the page.

html
Hand-tuned CSS, no framework
0 props · 2 states · 7 tags · 2 소스
누락 상태: focus-visible, disabled

Stat

Large Wise Sans weight-900 numeric figure with an Inter label — the display-scale proof point for scale and savings.

html
Hand-tuned CSS, no framework
1 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Quote

Customer pull-quote in 40px Wise Sans weight 900 with a lime-green opening mark — the brand's editorial testimonial move.

html
Hand-tuned CSS, no framework
0 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Tag

Currency chip with a flag dot — pill-rounded, used inside currency rows and filter groups.

html
Hand-tuned CSS, no framework
1 props · 2 states · 8 tags · 2 소스
누락 상태: focus-visible, disabled

Avatar

Round avatar with a sage ring — used for recipient lists, contact rows, and team rosters.

html
Hand-tuned CSS, no framework
1 props · 1 states · 9 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Tab

Pill-style tab list inside a 24px-rounded sage container — used to switch Send, Convert, and Receive views.

html
Hand-tuned CSS, no framework
1 props · 4 states · 4 tags · 2 소스
누락 상태: disabled

DESIGN.md

Wise

Visual Theme

A global money-transfer brand that reads more like a calm Scandinavian magazine than a bank. The whole experience sits on a sage-tinted canvas (#e8ebe6) with generous whitespace, large 24px-rounded white cards, and an unusually heavy display sans set at weight 900 carrying every hero headline. The signature move is a single vivid lime-green CTA pill (#9fe870) against near-black olive ink (#0e0f0c) — friendly, trustworthy, and unmistakably fintech-without-the-cold. Bands alternate between sage canvas and polarity-flipped near-black, where the lime-green headline glows against the dark.

Color Principles

One accent, no compromises. Wise Green (#9fe870) is the sole brand identity colour — every primary CTA, every logo accent — supported by its lighter active (#cdffad), neutral (#c5edab), and pale (#e2f6d5) tints. Surfaces are just two notes: pure white (#ffffff) cards on the sage canvas (#e8ebe6), and surface contrast alone carries elevation. Text runs near-black olive ink (#0e0f0c) down through body (#454745) to mute (#868685). A full semantic palette — positive green (#2ead4b), warning yellow (#ffd11a), negative red (#d03238) — handles in-product status so the brand green is never repurposed as a success signal. Tertiary peach (#ffc091) and cyan (#38c8ff) appear only inside illustrative content.

Typography

Two faces, strict roles. Wise Sans — a proprietary geometric sans — carries all hero displays at weight 900, from 64px up to 126px, and is the brand's typographic voice. Inter at weight 600 handles every sub-display, all body, and form labels. The contrast between the chunky proprietary face and Inter's neutrality is the hierarchy. Open-source substitutes: Inter 900 or Manrope 800/900 for the display face. Weight 900 for hero, weight 600 for everything else — never lighter on the marketing surface.

Layout

4px base spacing scaling through 8/12/16/24/32 to 48px section bands. Marketing container centres at ~1200px; the hero splits headline-left / currency-converter-card-right on desktop and stacks on mobile. Border-radius climbs from 8px inline pills to 12px form inputs, 16px mid cards, and the canonical 24px for buttons and cards — the generous radius is the brand's friendliness signature. Depth comes from surface contrast (white cards on sage) and a 1px ink hairline on outline buttons and inputs — never heavy drop shadows.

어댑터 (6)

전체 파일 (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

버전