prismdinstrument

EXTRACTED · 10 SECTIONS · 27 COLORS · GRADE B

wise.com

Accent #9fe870 · Inter — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

shadows

keyframes

DESIGN.md tokens.json

real render · source of truth

wise.com is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(159, 232, 112) as the accent for primary actions and brand signals. Fully-rounded CTAs (9999px) signal a friendly, tactile interaction model alongside Wise Sans as the primary typeface. A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 56 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

27 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 9.37:1

Ink

#454745

AAA 9.37:1

Accent

#9fe870

Fail 1.47:1

Line

#454745

AAA 9.37:1

Semantic states

success#054d28warning#ffd11a

2 semantic roles found.

27 colors mined from the live renderexpand

Type — the ladder, in the real face

8 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl105.428px · 900

display md

display-md40px · 400 · ×2.64

headline

headline20px · 600 · ×2.00

body

body18px · 400 · ×1.11

caption

caption14px · 500 · ×1.29

button

button18px · 600 · ×0.78

eyebrow

eyebrow14px · 400 · ×1.29

mono

mono52px · 400 · ×0.27

Depth — elevation is extracted, not invented

5 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — easings, transitions & live keyframes

3 easing curves · 56 keyframes · hover a tile to preview

Easing & transitions

transition-2ease-in-out

transition-3cubic-bezier(0.8, 0.05, 0.2, 0.95)

navigation-transition-timing-functioncubic-bezier(0.8,0.05,0.2,0.95)

56 keyframe animations extracted

rotating

droppable-fade-in

listSlideOver

loaderStroke

loaderFill

cover-fade-in

process-chase-circle-xxs

process-success-circle-xxs

process-chase-circle-xs

process-success-circle-xs

process-chase-circle-sm

process-success-circle-sm

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 4px

sm · 8px

md · 12px

base · 16px

lg · 24px

xl · 32px

2xl · 48px

3xl · 64px

Radius

none
0px

xs
2px

sm
8px

md
16px

lg
18.7693px

xl
30px

full
1000px

Components — the closed vocabulary

17 component families · 108 variants counted on the live DOM

Component	Variants found
buttons	×10
cards	×10
cta Banner	×10
heading H2	×10
links	×10
avatar	×10
product Card	×10
nav Links	×8
eyebrow Labels	×5
badges	×4
heading H4	×4
table Headers	×4
alert	×4
footer Links	×3
heading H3	×3
inputs	×2
heading H1	×1

Component style specs (§4)expand

Buttons

Pill

Background: transparent
Text: #163300 {colors.primary-hover}
Padding: 8px 9.38462px
Radius: 9999px
Font: 18px weight 400
Use: Status pills, tags, chips

Pill

Background: transparent
Text: #163300 {colors.primary-hover}
Padding: 8px 12px
Radius: 9999px
Font: 18px weight 600
Use: Status pills, tags, chips

Icon Button

Background: #ffffff {colors.background}
Text: #454745 {colors.hairline}
Padding: 0px
Radius: 50%
Border: 2px solid rgba(14, 15, 12, 0.12)
Font: 18px weight 400
Use: Toolbar/UI icons

Cards & Containers

Standard Card

Background: transparent
Padding: 0px
Radius: 10px
Border: 1px solid rgba(14, 15, 12, 0.12)
Use: Content containers, listing items

Inputs & Forms

Text Input

Background: transparent
Text: #163300 {colors.primary-hover}
Padding: 0px
Radius: 0px
Border: 0px none rgb(22, 51, 0)
Font: 52px weight 400
Use: Text fields, search inputs

Alerts

Alert Banner

Background: #ecf9f9 {colors.surface-2}
Text: #0b4c72
Padding: 8px
Radius: 8px
Font: 14px weight 500
Use: System alert, banner notification, toast

Layout — structure & dimensions

4 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

25 media-query stops read from the live CSS

320px

332px

399px

479px

480px

481px

484px

566px

575px

576px

640px

767px

768px

770px

960px

991px

992px

1199px

1200px

1366px

1439px

1440px

1601px

1640px

1920px

Do's & Don'ts

20 enforceable rules pulled verbatim from the spec

Use Inter as the primary typeface — it defines the brand personality

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use #9fe870 (`#9fe870`) as the primary accent — it's the brand's signature interactive color

Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs

Use 10px border-radius on cards — consistent with the grid card corners

Maintain nav height at 76px — consistent vertical space for the navigation bar

Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose

Each card includes a top image — imagery is part of the card identity, not optional

Use a 3-column grid on desktop — density matters for this content type

Repeat the primary CTA across 3 banner sections — conversion paths are layered, not single

Don't

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't invent new shadow values — use only the extracted shadow levels

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't use rectangular buttons for primary actions — the rounded pill shape is the brand standard

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the wise.com design system. Canvas #ffffff · ink #454745 · accent #9fe870. Type: Inter — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add wise

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press