.svg)
- components:
- chip
- inline_link
**Disclaimers**
- summary: Neutral band holding one white rounded card of numbered footnotes in small Inter.
- ground: #EDEFEB
- desktop: y8853-9588, padding 56. Card x100-1340 y8946-9493, radius 28, padding 38, white. Ordered list (bold numerals 1, 2, 3 inline) Inter 16/24 #454745, items 28px apart; links (Program Agreement, www.FDIC.gov) Inter 600 #163300 underlined
- phone: Card x16-374 y9831-11118 (1287 tall), radius 24, text at x48 (32 inset), 294 wide, from y9863; Inter 14/22 #454745; item 1 8 lines, item 2 40 lines (including its two blank lines), item 3 5 lines; 24px between items
- anatomy:
- Three numbered footnotes; the numeral is bold #0E0F0C inline before the text. Desktop text x138, 1165 wide, Inter 16/24; items at y8984, 9060, 9400 (28px apart)
- Footnote text below is a PARAPHRASE written for this book: it keeps the meaning of Wise's own footnotes (same facts, figures, bank names, dates and links) in different wording, and its length is matched so it sets in the measured line counts at Inter 16/24 in the 1165px measure (and 14/22 in 294px on phone). Set it as given, in full: never truncate it, never add an ellipsis, never add a claim of your own, and never reserve empty height. Mark it in the HTML source with a comment
- 1 (PARAPHRASE, 2 lines desktop, 8 phone): "How quickly a transfer arrives depends on funds being available, on approval by Wise’s own verification system and on our banking partners’ systems being available, so the speed shown may not apply to all transfers. On average, 77% of transfers arrive in under 20 seconds and 95% within 24 hours."
- 2: one item of 13 lines desktop / 40 phone: an 8-line paragraph, a blank line, a 1-line sentence, a blank line, a 2-line paragraph (desktop; phone 29 / blank / 3 / blank / 6). Paragraph 1 (PARAPHRASE, 8 lines desktop): "FDIC insurance is pass-through insurance provided through our current program bank (Wise is not a bank). The current Program Bank is JPMorgan Chase Bank, N.A.; Appendix 1 of the Program Agreement carries the most up-to-date list of Program Bank(s). Eligible customers have to opt in to the interest feature before they earn interest. Once they do, the balance of the USD funds held in their Wise Account is “swept” into an account insured by the Federal Deposit Insurance Corporation (“FDIC”) at one or more participating banks (each of them a “Program Bank”), which will hold those deposit funds. For the complete list of Program Banks, see Appendix 1 of the Program Agreement. Whether FDIC deposit insurance is available for the deposit funds depends on certain conditions; for more on FDIC insurance coverage, visit www.FDIC.gov. Customers are responsible for keeping track of their total assets at each of the Program Banks to work out how much FDIC insurance coverage is available to them under FDIC rules. The Program is not meant to be a long-term investment option, a checking or savings account, an investment contract or a security." Link "Program Agreement" (first mention, line 2) and "www.FDIC.gov" (line 6) in Inter 600 #163300 underlined. Sentence (PARAPHRASE, 1 line): "No minimum balance is needed to earn the advertised APY. Fees may reduce what you earn." Paragraph 3 (PARAPHRASE, 2 lines): "For customers who opt in to interest on EUR and GBP, the FDIC pass-through insurance from our program bank covers up to the equivalent of 250,000 in total across the combined USD, EUR and GBP balances (together, the “Eligible Balances”)."
- 3 (PARAPHRASE, 2 lines desktop, 5 phone; the date as the US page shows it): "Annual Percentage Yield (APY): every rate shown here is accurate and expressed as an APY as of 9/17/2026. The rate can change after the account is opened. See the Program Agreement for details." with "Program Agreement" linked
- The card height then comes from the text, as on the site: desktop card y8946-9493 (547 tall: 38 top padding, items at y8984 (2 lines), 9060 (13 lines) and 9400 (2 lines) with 28px between items, last line ending y9448, then 45 to the card bottom), phone y9831-11118 (1287). Never min-height on this card
- components:
- panel_white
**Footer**
- summary: Neutral #EDEFEB footer continuing the disclaimer band: three link columns, a hairline, the large wordmark with five social icons, three columns of legal links, then copyright and regulatory text.
- ground: #EDEFEB
- anatomy:
- Container x94-1346. Columns at x94, x530, x966 (436 apart), headings Inter 600 18/26 #0E0F0C from y9644, links Inter 400 18/26 #163300 every 45px from y9687: each link a 44.8px-tall block, so Resources' 7th link (Feature availability) starts y9956 and Company and team's 9th (Reviews) y10045; measure these with Playwright, the r3 build drifted 10px tight by the 7th row
- Column 1: Products (Wise Personal, Wise Business, Wise Platform), then at y9878 Wise Personal (Wise account, International money transfer, Large amount transfer, International debit card, Receive money, Assets)
- Column 2: Resources (Currency converter, International stock ticker, SWIFT/BIC codes, IBAN codes, Rate alerts, Compare exchange rates, Feature availability)
- Column 3: Company and team (Company and team, News and blog, Security, Press, Careers, Investor relations, Our mission, Affiliates and partnerships, Reviews), then at y10146 Help (Help centre, Service status)
- Hairline 1px #0E0F0C at 12% across x94-1346 at y10336, then 56px padding
- Logo row y10393: wordmark 165x38 #163300 at x94 (assets/wise-logo-forest.svg); right-aligned social icons #163300, about 32px: Facebook x1070, X x1131, Instagram x1194, YouTube x1252, LinkedIn x1313
- Legal links, 3 columns, rows y10488 / 10533 / 10578: Legal, Research privacy policy, Modern slavery statement (col 1); Privacy policy, Complaints, Accessibility (col 2); Cookie policy, Country site map, Intellectual property (col 3)
- Copyright "© Wise US Inc 2026" Inter 16/24 #0E0F0C at y10679
- Regulatory paragraph at y10721: ONE spanning the full 1252px footer container (x94-1346; never a narrower measure), Inter 16/24 #0E0F0C, 6 lines = 4 lines of text + a blank line + the line "*Lead Bank and Community Federal Savings Bank." (the site separates them with
inside the same paragraph); "most states" bold underlined. Text: "Wise is a Money Service Business ("MSB") registered with FinCen, not an FDIC-insured bank. It is authorized to operate as a MSB in most states. In other states, the program is sponsored by Community Federal Savings Bank, to which we’re a service provider. The Wise Multi-Currency Card Program is issued by Wise’s sponsor Bank(s)*, member(s) FDIC. pursuant to licensing by Visa® U.S.A. Inc. The Wise Multi-Currency Card is available to eligible consumers and commercial entities. Not available in all countries. Fees vary based on type of transaction. T&C apply."
- Then a separate 1-line paragraph at y10884, full 1252 width: "All investment services are provided by the respective Wise Assets entity in your location." (link: entity in your location); page ends y10983
- No postal address or phone number appears in the footer
- phone: One column at x16: headings Inter 600 15.27/24 #0E0F0C at y11246 (Products), 11455 (Wise Personal), 11783 (Resources), 12152 (Company and team), 12601 (Help); links Inter 400 15.27/24 #163300 every 40px starting 40px below each heading (link boxes x8, 40 tall, text at x16); hairline; logo 141x32 at y12818; social icons in a row at y12883 (x16, 73, 132, 186, 244); legal links one column every 40px from y12970 to 13290 (Legal, Privacy policy, Cookie policy, Research privacy policy, Complaints, Country site map, Modern slavery statement, Accessibility, Intellectual property); copyright Inter 14/22 at y13379; regulatory paragraph 14 lines at y13417 (Inter 14/22, 358 wide, including the blank line and the *Lead Bank line); the investment-services line block (2 lines) at y13741; page ends y13849
**On dark grounds**
- secondary button: on Forest #163300 the button is Bright Green #9FE870 filled with a #163300 label (View on Trustpilot); never an outline
- link: #9FE870
- muted text: #9FE870 (the testimonial cards use Bright Green for both quote and author; no grey on Forest)
- hairline: not used on dark grounds on this page
- logo variant: Bright Green wordmark on Forest Green (assets/wise-logo-bright-green.svg), per the guide's primary colour versions
## Components
- **button primary forest** (observed): fill #163300, text #9FE870, height 48, padding x 24, radius pill, font size 16, weight 600, face body. Hero "Sign up": 200x48 at desktop (min-width 200, centred), full width 358 on phone. Label Inter 600 16/24, tracking -0.176px. 1px border same colour as fill. Transition color, background-color 0.15s ease-in-out
- hover (observed): background #0D1F00, border #0D1F00
- **button accent** (observed): fill #9FE870, text #163300, height 48, padding x 24, radius pill, font size 16, weight 600, face body. The common CTA: Send money now, Get Wise, See our security, Try demo, View on Trustpilot (187 wide), calculator Send money (full card width 459, padding 16). Min-width 200 on desktop; full width on phone. 1px border #9FE870. Hover not measured
- **button secondary** (observed): fill none, text #163300, height 48, padding x 24, radius pill, font size 16, weight 600, face body, ring #163300, ring px 1. Outlined: product-card buttons (Explore getting paid, Learn about Wise cards, See our interest feature). 1px #163300 ring, transparent fill; width fits label (201, 229, 227px) desktop, full card width 310 phone
- **button nav signup** (observed): fill #163300, text #9FE870, height 32, padding x 12, radius pill, font size 16, weight 600, face body. Nav Sign up, exactly 81x32 desktop at x1265 y22: padding 4px 12px, label Inter 600 16/24 (line-height 24px; 4 + 24 + 4 = 32), min-width none, 1px border #163300. Phone: 74x32 at x244 y17, label Inter 600 14/21.7 (50px wide), padding 5px 12px: the small size uses a 14px label, not 16
- **button link** (observed): fill none, text #163300, height 48, padding x 24, radius pill, font size 16, weight 600, face body. Text button with underline (Learn more, View popular destinations): transparent, underline 1px, offset 4.8px
- **nav link** (observed): height 32, padding 4px 12px (with the 24px line: 4 + 24 + 4 = 32), radius pill, font Inter 600 16/24, tracking -0.176px, color #163300. Personal, Business, Platform, EN, Help, Log in. Transition 0.35s cubic-bezier(0.8,0.05,0.2,0.95)
- hover (observed): background #E2F6D5, color #0D1F00
- **footer link** (observed): font Inter 400 18/26 (phone 15.27/24), tracking 0.18px, color #163300, row pitch 45px desktop (each link is a 44.8px-tall block: 18/26 text with about 9.4px above and below; never 26px rows with a margin), 40px phone (40.1px blocks, 15.27/24 text), link tops desktop Products y9687, 9732, 9777; Wise Personal y9921, 9966, 10011, 10056, 10100, 10145; Resources y9687, 9732, 9777, 9822, 9866, 9911, 9956; Company and team y9687, 9732, 9777, 9822, 9866, 9911, 9956, 10001, 10045; Help y10190, 10235 (link box tops; headings at y9644, 9878, 9644, 9644, 10146), link tops phone Products y11286, 11326, 11366; Wise Personal y11495, 11535, 11575, 11615, 11655, 11695; Resources y11823 then every 40.1 (7 links, last 12064); Company and team y12192 then every 40.1 (9 links, last 12512); Help y12641, 12681 (headings y11246, 11455, 11783, 12152, 12601)
- hover (observed): color #0D1F00, text-decoration underline
- **inline link** (observed): font Inter 600, size of its paragraph, color #163300, decoration underline, thickness auto, offset 0.3em (4.8px at 16px), footnote marker Footnote superscripts (hero ¹, benefits ¹, products ² ³, comparison *) are NEVER underlined: sup and its a both text-decoration none; Inter 600 at 0.75 of the paragraph size, #163300 (the comparison * is Inter 400 10.5px #454745)
- **chip** (observed): height 32, radius 16, padding 0 16px, font Inter 600 14/21.7 #163300, selected fill #9FE870, 1px #9FE870 border, unselected transparent, 1px #868685 border, gap 8
- **currency select** (observed): height 40, radius pill, fill rgba(62,59,7,0.07) = #F1F1ED on white, padding 8, anatomy Calculator select (USD / EUR in the hero card): a tight cluster that hugs its content, 99x40 (USD) / 97x40 (EUR), padding 8 on all sides: 24px circular flag, 4px gap, code Inter 600 16/24 #0E0F0C (33 / 31px wide), 4px gap, 18px chevron-down #163300, 8px to the pill edge. Never 12px gaps here and never a fixed wider pill: the chevron sits 4px after the code, not at the far edge. Comparison-card From / To selects are the large variant: 321x72, padding 8/16, 48px flag, 12px gap, code Inter 600 20/20 in a flexible span, 16px chevron at the right end (16px inset)
- **card neutral** (observed): radius 28, radius phone 24, fill #EDEFEB, padding 38px 28px desktop, 32px 24px phone. Product cards; no border, no shadow. The outlined button is 48 tall but sits in a 40px wrapper, so it overhangs the bottom padding by 8: 30px of card shows below the button on desktop (settled; both 38 and 30 are true)
- **card forest** (observed): radius 28, radius phone 24, fill #163300, padding 28, size 392x542 desktop, 277x445 phone
- **panel white** (observed): radius 38, radius phone 32, fill #FFFFFF. Calculator (radius 37.5, padding 28) and app card (padding 75). Comparison card is radius 30 with shadow 0 6px 20px rgba(0,0,0,0.08); disclaimer card radius 28 padding 38
- **icon avatar** (observed): size 72px desktop / 48px phone (benefits); 48px (security rows, calculator rows), fill benefits #EDEFEB; security and calculator rows white with 1px #0E0F0C at 12% ring, icon 32px (benefits desktop), 24px elsewhere, #0E0F0C
- **carousel arrow** (observed): size 78px desktop, 48px phone, radius pill, glyph arrow icon box 42x42 centred in the 78px button (18px inset), the drawn arrow 35x30.5, stroke-heavy; phone 24x24 box in the 48px button (the arrow 20x17.4). Never a 24px arrow in the 78px desktop button, next fill #9FE870, arrow #163300, previous at rest disabled: fill #EAEAEA, arrow #9E9E9E, gap 14px desktop, 12px phone
## Motion tokens
| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-colour | ease-in-out | 150ms | primary button hover colour change | observed |
| nav-hover | cubic-bezier(0.8, 0.05, 0.2, 0.95) | 350ms | nav link hover fill | observed |
## Icon tokens
Grid not published (flags are built on the same grid as icons), stroke not published (published).
| Name | Size | Use |
|---|---|---|
| product-16 | 16px | product |
| product-24 | 24px | product |
| product-32 | 32px | product |
| editorial-48 | 48px | editorial |
| editorial-64 | 64px | editorial |
| editorial-96 | 96px | editorial |
## Signature moves
### Bright Green field with a Forest Wise Sans shout
Where: nav + hero (the first screen), and anywhere a page opens.
Do: Nav and hero share one Bright Green #9FE870 ground; the headline is Wise Sans capitals in Forest Green #163300 at 88.5px with a 75.2px line box (0.85 of the Wise Sans size; with the stand-in, set 75.2px, never 0.85 of the stand-in size), centred, 2 lines; subtitle Inter 600 in Forest; one Forest pill CTA with a Bright Green label.
Don't: put white or black type on Bright Green, add a gradient, or open a page on a secondary colour (the guide: start and end with green).
### Circular flags
Where: flags strip, currency selects, testimonials, coverage grid.
Do: Every flag is a circle from Wise's own 10-colour flag set (assets/flags/*.svg); the strip sits on the green/white seam in 88px white discs; overlapping pairs (from/to) overlap by about 12%.
Don't: use rectangular or emoji flags, or flags without the circle crop.
### Pills everywhere
Where: buttons, chips, selects, inputs, comparison bars, rate pill.
Do: radius 9999 on every control; cards and panels are rounded rectangles (28 / 38 desktop, 24 / 32 phone); no square corners anywhere.
Don't: use small 4-8px radii on buttons, or shadows on buttons.
### Neutral and white alternation
Where: section grounds.
Do: white #FFFFFF and the 8% Forest tint (#EDEFEB on white) alternate; cards on white are neutral, cards on neutral are white.
Don't: use grey #F5F5F5 or any non-green-tinted grey.
### Forest cards, Bright Green type
Where: testimonials (the one dark moment on the page).
Do: #163300 card, all text #9FE870 Inter 600, Bright Green filled button with Forest label.
Don't: use white text on Forest Green.
### Tapestry band
Where: the app-download band.
Do: a full-bleed photographic collage (tapestry) behind a large white rounded card; the logo or type on a tapestry is only white or Bright Green with plenty of contrast.
Don't: put text straight on the tapestry without the card or with low contrast.
## Voice: rules
One Wise voice, tone flexing by situation: standing out (billboards, social), converting customers (landing pages, App Store), adding delight, providing reassurance. Principles: intrepid, universally authentic, delightfully simple. How: celebrate the mission, be concise, make it modern, give it energy, add colour. The homepage is the converting tone.
Why it works: Customers should only ever hear Wise, whoever writes (published).
| | |
|---|---|
| Tones | standing out, converting customers, adding delight, providing reassurance |
- Landing pages: direct and concise, real language, lead with the benefit (published "Converting customers")
- Write headlines as if subcopy were illegal
- Talk about many currencies, not just GBP, USD and euros
- Transcreate rather than translate; allow for 30% longer text
- Reassurance moments: personable but to the point, no metaphors or humour
- Don't use stiff sales jargon
- Don't stereotype cultures
Sources: https://wise.design/foundations/tone-of-voice (Wise brand guide, archived 2026-04-19: https://web.archive.org/web/20260419181509/https://wise.design/foundations/tone-of-voice), https://wise.design/brand (Wise brand page, live, read 2026-10-29), https://wise.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, 2026-10-29)
## Logo: rules
The logo is the Wise wordmark plus the Fast Flag, a forward-leaning flag mark. Green is used first, last and nearly everywhere; Forest on Bright Green and Bright Green on Forest are the primary versions. On the homepage the nav logo is 88x20 Forest Green on Bright Green; the footer logo is 165x38.
Why it works: The Fast Flag stands for constant progress, not tied to borders (published).
| | |
|---|---|
| Primary | Forest #163300 on Bright Green #9FE870; Bright Green on Forest |
| Min size | 35px high digital; 6mm print |
| Clear space | one Fast Flag |
| Homepage nav | 88x20 at x94 y28 |
| Homepage footer | 165x38 |
- Clear space: one Fast Flag in all directions
- Minimum size: 35px high digital, 6mm print
- Place it in a corner; centred is allowed with plenty of space, sitting slightly left
- App tile: Fast Flag larger and further left than anywhere else; social avatar: smaller, slightly left
- Partner lock-up: partner logo at Fast Flag height (horizontal) or at wordmark width below (vertical)
- On tapestries: white or Bright Green only, with plenty of contrast
- Secondary-colour logos only deep in marketing
- Don't change the lock-up or adjust the logo
- Don't place it on an angle
- Don't add effects
- Don't use it as a mask
- Don't use it as a keyline
Real examples, to look at on Wise's own pages (not for reuse):
- The Wise logo: https://web.archive.org/web/20260513155603im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d29c072d-2437-48a3-a8ed-14c78a114bdb
- Wise logo with the correct border: https://web.archive.org/web/20260513155603im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1fd8a16d-1cb2-453c-af96-241df84c2dca
- Fast Flag app icon: https://web.archive.org/web/20260513155603im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9f673efc-e1f3-4386-b8d8-7dd1bd32d2f5
Sources: https://wise.design/foundations/logo (Wise brand guide, archived 2026-05-13: https://web.archive.org/web/20260513155603/https://wise.design/foundations/logo), https://wise.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, 2026-10-29)
## Color: rules
Wise is green: Bright Green #9FE870 and Forest Green #163300, plus white with an 8% Forest tint. A secondary palette of four brights and four darks comes in only once green is established. Product tokens give content greys tinted with green, interactive, background, border, sentiment and base colours. The homepage uses only the core greens, white, the 8% neutral and content greys, with tiny functional colours (fee red, savings green, info blue).
Why it works: Green is the first impression and the goodbye; the secondary palette signals getting closer (published).
| | |
|---|---|
| Bright Green | #9FE870, PMS 7487 |
| Forest Green | #163300, PMS 2411 |
| Neutral | #16330014 (renders #EDEFEB on white) |
| Border | rgba(14,15,12,0.12) (#0E0F0C at 12%) |
| Content | #0E0F0C / #454745 / #6A6C6A |
| Sentiment | #A8200D / #2F5711 / #EDC843 |
| Base dark | #121511 |
- Always start and end with green
- Introduce secondary colours only once green is established, dialling them up further into a piece
- White is the most prominent UI colour; then the neutral; then content greys; then a little Forest for interactivity and a pop of Bright Green (published proportion order, no percentages)
- Body text Content Secondary #454745; emphasis Content Primary #0E0F0C; links Forest #163300
- HARD RULE, headings by ground: on Bright Green (nav, hero) display type is Forest #163300; on white and on the neutral #EDEFEB (pricing, products, security, testimonials intro, business, app card, coverage, every card title) every heading is Content Primary #0E0F0C. Never #163300 for a heading on a white or neutral ground. Do not let one shared display class carry a colour: set colour per band
- Bright Green surfaces carry Forest text/icons (Interactive Control); Forest surfaces carry Bright Green (Interactive Contrast)
- Sentiment colours only in alerts and errors; Warning #EDC843 never as text
- Use only the published good type/colour combinations
- Don't use Forest #163300 for headings on white or neutral grounds (#0E0F0C there)
- Don't use Content Tertiary #6A6C6A outside placeholders and Optional labels
- Don't use Interactive Secondary #868685 on text
- Don't lead a page with a secondary colour
Real examples, to look at on Wise's own pages (not for reuse):
- Colour balance in product screens: https://web.archive.org/web/20260513165831im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/37602fb7-ab40-47b0-900e-0e66ad492716
- Secondary palette logos: https://web.archive.org/web/20260513165831im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1dfc6705-23c8-40e2-af8e-5d3ac4038267
Sources: https://wise.design/foundations/colour (Wise brand guide, archived 2026-05-13: https://web.archive.org/web/20260513165831/https://wise.design/foundations/colour), https://wise.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, 2026-10-29)
## Typography: rules
Two faces. Inter for most things (headings and body, product). Wise Sans, a proprietary heavy display face, for short, loud headlines; on wise.com every section headline and big number is Wise Sans in capitals at line-height 0.85. International glyphs are a campaign extra.
Why it works: Clarity and accessibility first, with one loud face for moments that celebrate (published).
| | |
|---|---|
| Display | Wise Sans (proprietary); stand-in Plus Jakarta Sans 800, 0.9032x size, -0.095em, word 0.13em, stroke 0.03em currentColor |
| Body | Inter 400/600 (open) |
| Product weights shown | Inter Medium, Inter Semi Bold |
| Line length | 50-60 characters |
| Glyph swaps | about 3 per headline |
- Default to Inter; use Wise Sans only for short headlines that celebrate or shout
- Inter: left- or centre-align (right-align for RTL); never justify; 50-60 characters per line
- Never set Inter in all caps, even for headlines
- Do not mix treatments too close together
- Wise Sans headlines can be aligned any way, as long as they are clear
- International glyphs: big, bold, sparing; about 3 swaps per headline; simple alternates like E may repeat, complex ones like L once or twice
- For long text or serious topics use plain Wise Sans, no glyphs
- Web stand-in for Wise Sans: Plus Jakarta Sans 800, 0.9032x the Wise Sans size, uppercase, letter-spacing -0.095em, word-spacing 0.13em, -webkit-text-stroke 0.03em currentColor (amounts 0.045em), line-height in px as measured. Checked line by line: every headline within 2% of Wise Sans width at 1440, ink 4% lighter on average, numerals within 2%. Never Anybody (too condensed), never Archivo wdth 68
- Homepage scale: display 88.5 / 58px desktop, 44.9 / 40.9 phone; Inter 20/28 leads, 16/24 body, 600 for titles and buttons
- Don't set Inter in capitals
- Don't use glyphs on every letter
- Don't use Wise Sans for long copy
Real examples, to look at on Wise's own pages (not for reuse):
- International glyphs headline (Riyal to Real Really Fast): https://web.archive.org/web/20260419183616im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/78f2e504-3704-4106-bbd7-a466b7c306dd
- Font calibration r4: Wise Sans (live) vs the Plus Jakarta Sans 800 recipe (0.03em stroke; numerals 0.045em) vs Figtree 900 and Onest 900, every headline and both calculator numerals at matched cap height: https://wise.com/
Sources: https://wise.design/foundations/typography (Wise brand guide, archived 2026-03-14: https://web.archive.org/web/20260314122548/https://wise.design/foundations/typography), https://wise.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, 2026-10-29)
## Graphic elements: rules
Flags (circular, from a 10-colour palette, bordered with Border Neutral on white, detailed versions above 150px), the Fast Flag as the default flag, tapestries (photographic collages), pills and big rounded cards.
Why it works: The flags carry the global story; tapestries carry culture and texture (published).
| | |
|---|---|
| Flag palette | #FFFFFF #78C9FF #FFD400 #FF7700 #F0263C #000000 #231D9A #005B13 #CC9500 #960A3C |
| Detailed flag threshold | 150px |
| Card radius (marketing) | x-large 40 desktop / 32 mobile in the Card Cluster |
- Flags are always circles
- On white, give a flag a Border Neutral rgba(14,15,12,0.12) border
- Use the detailed flag above 150px, the simplified one below
- When no single flag fits, use the Fast Flag
- Tapestries can sit behind Wise Sans as a background or mask
- Logo on a tapestry: white or Bright Green only
- Don't draw rectangular flags
- Don't animate tapestries flat (animate each layer)
Real examples, to look at on Wise's own pages (not for reuse):
- Circle flags in product: https://web.archive.org/web/20260513163900im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9a59ad59-581e-480b-a726-64f87adab23a
- Wise logo on a tapestry: https://web.archive.org/web/20260513155603im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6f1326fd-184b-4021-be8a-dd84e96c1131
Sources: https://wise.design/foundations/flags (Wise brand guide, archived 2026-05-13: https://web.archive.org/web/20260513163900/https://wise.design/foundations/flags), https://wise.design/foundations/tapestries (Wise brand guide, archived 2026-06-18: https://web.archive.org/web/20260618180357/https://wise.design/foundations/tapestries), https://wise.design/foundations/marketing-radius (Wise brand guide, archived 2024-09-01: https://web.archive.org/web/20240901094248/https://wise.design/foundations/marketing-radius)
## Iconography: rules
Simple solid-line icons that pair with both faces. Product sizes 16/24/32; editorial 16/24/48/64/96. Six key feature icons (send, receive, convert, spend, keep, invest). On the homepage icons are 24-32px #0E0F0C inside 48-72px circles.
Why it works: Clarity beats clever concepts for a global audience (published).
| | |
|---|---|
| Product sizes | 16, 24, 32px |
| Editorial sizes | 16, 24, 48, 64, 96px |
| Homepage | 24-32px icons in 48/72px circles |
| Homepage icon files | assets/icons/*.svg, the site's own 24x24 filled-path icons (tw-icon set): benefits mass-payout, switch, headset; security bank, shield, mobile-lock; calculator padlock, tags, lightning-bolt, receipt; chevrons, arrows, check-circle-fill, question-mark-circle, menu; footer social-* |
- Icons for product functions; illustration for celebration or metaphor; words for a change of pace
- Interactive icons Forest Green on neutral; informational icons Content Primary on neutral; a white circular-background version exists; Bright Green background only to highlight, sparingly
- Key feature icons may be used large and expressively, but in a relevant message, not as decoration
- Don't use a key feature icon as a decorative graphic
Real examples, to look at on Wise's own pages (not for reuse):
- Key feature icons: send: https://web.archive.org/web/20260419183616im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d2db3292-6ab5-4884-98d5-fe67b203d189
Sources: https://wise.design/foundations/icons (Wise brand guide, archived 2026-04-19: https://web.archive.org/web/20260419183616/https://wise.design/foundations/icons)
## Illustration: rules
The archived illustration page only captured its introduction: illustration adds energy and character, moments of magic. Motion guidance adds that illustrations and tapestries loop fluidly along an axis. The homepage uses no illustrations.
| | |
|---|---|
| Homepage | none |
- Use illustration for celebration, metaphor or something bigger on screen (published via the icons page)
- Loop illustration motion fluidly, keep it grounded, move along an axis
Real examples, to look at on Wise's own pages (not for reuse):
- Illustration page hero (Whoa): https://web.archive.org/web/20260426234759im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/948209cd-2759-4873-a1f7-f3b4817ef3bf
Sources: https://wise.design/foundations/illustration (Wise brand guide, archived 2026-04-26: https://web.archive.org/web/20260426234759/https://wise.design/foundations/illustration), https://wise.design/foundations/motion-system (Wise brand guide, archived 2026-03-14: https://web.archive.org/web/20260314122041/https://wise.design/foundations/motion-system)
## Photography: rules
Real, bold snaps anyone would be proud to take: international, unapologetic, authentic. Lifestyle shots of people using money; product shots of devices first-person against real backdrops, and still lifes with travel props. On the homepage: three warm lifestyle photos in 555x739 portrait frames (radius 28) and a looping video of customers, each with a white UI pill (Sent amount, 24/7 support, payment amounts) laid over the photo.
Why it works: People are proud to use Wise; real moments build trust (published).
| | |
|---|---|
| Homepage frame | 555x739, radius 28 (phone 358x477, radius 24) |
- Diverse people, places and details; colourful and inclusive
- Strong, direct poses: hold the card or phone like you mean it
- Natural light; flash when dark; never shoot into the sun
- Show money in use; the product need not appear
- Homepage photos carry one white rounded UI pill overlay (Inter 600, a flag or Fast Flag circle at left)
- Don't over-direct people or stage scenes
Real examples, to look at on Wise's own pages (not for reuse):
- Security photo with support pill (homepage): https://wise.com/
- Business photo with amount pills (homepage): https://wise.com/
- Benefits video, frame 0: https://wise.com/
Sources: https://wise.design/foundations/photography (Wise brand guide, archived 2026-05-13: https://web.archive.org/web/20260513165053/https://wise.design/foundations/photography), https://wise.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, 2026-10-29)
## Interface and layout: rules
Published grid: 12 columns, 100px margins and 32px gutters at 1200-1440, centred above 1440; 6 columns at mobile with 20/32px margins and 12px gutters. Spacing tokens 5-160px desktop and 4-128px mobile; every pattern has space-7 (60 / 48) top and bottom. The homepage follows it: 1240px content at x100, sections padded 56 (the site scales tokens by 0.9385 at 1440), centred stacks for H2 + lead + one CTA, two-column photo/text splits at 555 + 555 with a 130px gutter, 3-up card rows with 28px gaps.
Why it works: Consistent rhythm makes long pages easy to scan (published).
| | |
|---|---|
| Desktop scale | 5 10 15 20 30 40 60 80 120 160 |
| Mobile scale | 4 8 12 16 24 32 48 64 96 128 |
| Radius desktop | 16 20 30 40 60 |
| Radius mobile | 10 16 24 32 48 |
| Grid XL | 12 cols, margin 100, gutter 32 |
- Content max 1240 inside 100px margins at 1440; 16px margins at 390
- Section padding 56 desktop / 48 phone
- Centre the H2, lead and single CTA of a section; split sections put the photo left and the text right, vertically centred
- On phone, split sections stack text first, image second
- Card Cluster: 32px vertical spacing between cards on desktop (published); homepage card rows use 28
Real examples, to look at on Wise's own pages (not for reuse):
- Grid on XL desktop: https://web.archive.org/web/20260314124649im_/https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b1a878f1-cf34-4ac6-ad5c-9092bf230390
Sources: https://wise.design/foundations/grid (Wise brand guide, archived 2026-03-14: https://web.archive.org/web/20260314124649/https://wise.design/foundations/grid), https://wise.design/foundations/marketing-spacing (Wise brand guide, archived 2024-05-21: https://web.archive.org/web/20240521174755/https://wise.design/foundations/marketing-spacing), https://wise.design/foundations/marketing-radius (Wise brand guide, archived 2024-09-01: https://web.archive.org/web/20240901094248/https://wise.design/foundations/marketing-radius), https://wise.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, 2026-10-29)
## Rules: rules
What never changes, across guide and homepage.
| | |
|---|---|
- Green first and last
- Wise Sans only for short display lines, in capitals; Inter for everything else, never in capitals
- Circular flags only
- Pill-shaped controls; rounded cards
- Forest text on Bright Green; Bright Green text on Forest
- Logo clear space one Fast Flag; min 35px digital
- Neutral grounds are the 8% Forest tint, never a plain grey
Sources: https://wise.design/foundations/colour (Wise brand guide, archived 2026-05-13: https://web.archive.org/web/20260513165831/https://wise.design/foundations/colour), https://wise.design/foundations/typography (Wise brand guide, archived 2026-03-14: https://web.archive.org/web/20260314122548/https://wise.design/foundations/typography), https://wise.design/foundations/logo (Wise brand guide, archived 2026-05-13: https://web.archive.org/web/20260513155603/https://wise.design/foundations/logo), https://wise.design/foundations/flags (Wise brand guide, archived 2026-05-13: https://web.archive.org/web/20260513163900/https://wise.design/foundations/flags)
## By format
Where the system shows up and how loud it gets. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).
| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page (wise.com homepage, as the live site builds it) | 3 | Exactly kit.spec.page, sections in this order: Bright Green nav + hero (Wise Sans capitals H1, Inter 600 subtitle, Forest Sign up, white calculator card), flags strip on the green/white seam, benefits + video, neutral pricing comparison, products cards, security split, Forest testimonial carousel, business split, tapestry app band, neutral coverage grid, disclaimer card, neutral footer. Display type: Plus Jakarta Sans 800 as the Wise Sans stand-in (0.9032x the Wise Sans size, -0.095em, word-spacing 0.13em, same-colour 0.03em stroke, uppercase, measured px line boxes, each headline placed by its measured cap-top ink y); everything else Inter 400/600. Headings #0E0F0C on every white or neutral band, #163300 only on Bright Green. Voice: the homepage voice (kit.voice.notes, the guide's Converting customers tone); no international glyphs and no secondary colours on this page. Nav, footer and legal labels verbatim and in order. Every image slot uses study.slot_assets | Live numbers (exchange rate, amounts, fees) may change but keep the reference values for a rebuild; testimonial cards beyond the first two are off-screen |
| Campaign landing page (guide-led) | 5 | Open and close on green; Wise Sans headline, optionally with up to 3 international glyphs; a tapestry or bold lifestyle photo; secondary colours only after green is established; Standing out tone | Which secondary colour; tapestry vs photo |
| Product screen | 1 | White first, neutral, content greys, Forest for interactivity, a pop of Bright Green; Inter only, Wise Sans only on success, success-progress and feature-intro screens | Dark mode |
| Social / Instagram story | 4 | Start and end with green; dial secondary colours up as the story goes | Colour sequence |
| Video | 3 | Snappy, fluid, intuitive motion; captions reviewed; no more than three colour flashes per second | Cuts and transitions |
## Make it your own
Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Wise's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.
## Not published
- Full verbatim text of testimonial quotes 1-3 and of homepage footnotes 1-3: this book carries 15-word verbatim excerpts and a marked paraphrase; request permission to reproduce the full text if exact copy is needed
- Wise Sans font files and licence: proprietary, not published for third parties; stand-in calibrated instead
- Typography text styles (Product / Editorial size tables): tab content not captured in the archived page; not published here
- Illustration chapter body: archived snapshots captured only the intro (2026-04-26 and earlier attempts empty)
- Tapestries chapter body: archived snapshots captured only the intro paragraph
- Icon grid, stroke weight and corner radius values: not published
- Logo clear space in units other than "one Fast Flag", and Fast Flag proportions: not published
- Colour proportions as percentages: not published (order only)
- Dark mode hex values: not published (only that the colours work in dark mode)
- Motion durations and easing curves: not published (principles only; two site transitions measured)
- Cards, padding, focus states, size, promo assets, vocabulary and grammar pages: listed in the guide nav but not captured
- Hover/focus/pressed states for the Bright Green and outlined buttons: not measured
- Postal address and phone number: not on the homepage footer
- Secondary colour good/bad combination pairs: shown as swatches only; exact pairs not captured as text
Logos and reference images belong to Wise. Look at them on Wise's own pages; don't reuse them.