Wam
Log inOpen an account
Wam accountTT and US dollars in one appGlobal accountsUSD, EUR and GBP account detailsSend and requestTo anyone on Wam, in secondsWam cardComing soon
Explore Personal
In personTap to phone and QR at the counterOnlineCheckout, payment links and invoicesPayoutsFrom your Wam balance to your bankBusiness portalSales, refunds and your team
Explore Business
AboutWho we are and why we built WamSecurityRegistrations, safeguarding and protectionDesignOur design language and brand kitHelp centerAnswers and supportBlogNews from WamContactTalk to our team
Design

Money is
a liquid

Wam's design language, and the thinking behind it. In Wam, value is a liquid and the interface is the glass you see it through.

Download the brand kitZIP, 216 KBSee the materials
9:41
Good morning, AmaraA
Total balance
TT$12,480.50
TT and US dollars in one app
Add moneySendScan
Mum · New YorkUSD received+US$200.00
PPearl's Roti ShopScan to pay-TT$45.00
KKeishaWam to Wam+TT$120.00
DDevRequest paid+TT$60.00
SSandra's DoublesScan to pay-TT$18.00
RRiaWam to Wam-TT$75.00
Tap or drag the tabsThe tab bar from the Wam app
The idea

Glass you see through.
Colour that moves.

Glass is clear, so you see what is real behind it: your balance, the rate, the person you are paying.

The colour is the liquid, and colour only ever moves. It flows, swells and settles. It does not cut, jump or teleport.

Money in Wam moves between people, between TT and US dollars, between a phone and a shop counter. The interface should feel like that before you make a single payment.

Calm surface, colour underneath

Pages are paper and ink. Colour lives in soft blobs behind the content, and in one yellow action per screen.

Glass only over something

Glass reads only when it bends what is behind it, so it never sits on flat white.

Proof beats adjectives

We show the seconds, the rate and the fee instead of calling anything fast or seamless.

Drawn in code

Phones, cards and receipts are built in HTML and CSS, so they stay sharp and change with the words.

In the app

The goo tab bar

Each tab in the Wam app is a colour blob. Blur the blobs, then cut the blurred edge sharp again, and whatever overlaps fuses into one shape. So the selected tab swells and bleeds into its neighbours.

  • Tap a tab and its blob swells while the others give way
  • Drag across the bar and the colour follows your finger, then springs to the nearest tab
  • The same trick joins the menu and your profile picture in the header

Cut the blurred alpha (alpha x 20, minus 7) and the overlap becomes one crisp shape. Drag the blue blob.

On the web

Liquid glass

The nav at the top of this page is a lens, not a frosted panel. It bends what scrolls beneath it, splits the light a little at the rim and catches a highlight on its edge. Drag the lens to try it.2

  • Refracts the content behind it
  • Catches light at the rim
  • Frosted glass where refraction is not supported
In design

Liquid glass goo

Where the app goes next. The glass is the surface, the goo is the money, and your finger is the pressure that makes it show through.1

  • At rest, each tab's colour is a faint pool under the glass
  • Press, and the colour wells up to meet your finger
  • Drag, and the liquid stretches between tabs, then settles with one soft spring
In design
ActivityToday

Press and drag the bar

In design

The same idea, across the app

Sketches of where the liquid goes next. None of this is in the app yet.1

Swap

Exchange as a pour

The colour drains out of one card and fills the other through a short glass tube. The amount you type is the volume.

TT dollarsUS dollarsYou exchangeYou get
Send

Your colour flows to them

Pick a person and your balance colour flows into their row. Confirm, and it leaves the glass the way a drop falls off a surface.

The action button

One drop, three actions

Send, Request and Scan bead off the main drop as droplets of glass, and merge back in when you close it.

Notifications

A pulse, not a red dot

Something new arrives as a pulse of colour under the glass.

Motion

Your finger moves things

At rest the glass is calm. Anything you do often takes under 300ms, and every spring can be interrupted, so a reversed drag reverses the liquid.

What we are still deciding

Three open questions before any of this reaches the app.

  1. 1How much colour at rest

    Faint pools under every tab, or full colour that only domes when you touch it.

  2. 2Whether colour means currency

    A set colour per currency that flows through Swap and Send, or colour that stays with navigation.

  3. 3Where to start

    The tab bar, or the Swap pour as the clearest small first step.

Materials

Colour, type, motion and shape

The tokens behind every Wam screen. Click a colour to copy it.

Colour

Paper and ink, with colour underneath

Purple is the brand. Yellow is the logo and the one main action. The tab colours belong to the app's goo bar.

Brand
Tab bar
Neutrals
States
Type

Circular, and only Circular

Headlines are Book, never bold, with tight tracking. Licensed, so it is not in the brand kit.3

Book 400Medium 500Bold 700
Motion

Springs, from the app

Press scale is 0.97. Navigation never springs: it eases out over 340ms. With reduced motion on, every loop stops.

Smooth26 / 170
Snappy20 / 300
Bouncy14 / 200
Sheet30 / 120
Shape

Squircles, and circles for logos

Radii are 10, 16, 22, 28 and pill, drawn as continuous curves where the browser allows. The only true circles are logo and avatar tiles.

10162228PillLogo
Assets

Logos and the brand kit

Use them as they are: no redrawing, recolouring or effects. The kit has every logo below and the colours as JSON.

Download the brand kitZIP, 216 KB
Wam wordmark
WordmarkSVG
Wam logomark
LogomarkSVG
Wam one colour, black
One colour, blackSVG
Wam one colour, white
One colour, whiteSVG
Wam app icon
App iconPNG, 1024 px
Wam social banner
Social bannerPNG, 4096 px
Bank partners
Republic BankFirst Citizens
Building with
VisaBridgeRain

Partner marks belong to their owners and are not in the brand kit.4

Questions

Can I use the Wam logo?
Yes, to refer to Wam: in an article, in a list of ways to pay, or to show that your business takes Wam. Use the files from the brand kit as they are. Do not redraw, recolour, stretch or rotate them, add effects, or crowd them. For anything else, such as co-branded material, talk to us first.
Why does the logo say WAM!?
The logo is drawn as a mark, in capitals with an exclamation mark. In writing, the name is always Wam: a capital W and no exclamation mark.
Which colour is primary?
Wam purple, #B34AFF, is the brand colour. Wam yellow, #FFDD2D, is the logo and the one main action on a screen. Everything else is paper and ink, with colour kept for the blobs underneath.
Is the font available?
No. Wam is set in Circular, a typeface licensed from Lineto, so it is not in the brand kit. You can license it from Lineto, or use your system's sans serif.
Can I embed the goo tab bar?
Not as a package yet. The technique is simple: draw the blobs, blur them, then sharpen the alpha so overlapping blobs fuse into one shape. In the app it is a Skia layer with a blur of 8, an alpha gain of 20 and a bias of minus 7. On the web it is the same maths as an SVG filter.
Is liquid glass goo in the app?
Not yet. It is the direction we are designing towards, and it may change before it ships. The goo tab bar at the top of this page is in the Wam app today.

Feel the goo in your hand

The tab bar at the top of this page is in the Wam app today.

Building with Wam?

Take card and Wam payments in your own checkout.

Read the docs
About Wam

Who we are and the people behind Wam.

About