Concept 07 · Wallet
A wallet you want to touch.
Every linked bank account is a card with a nickname, printed in the colour and pattern its owner picked. You pay a friend by passing one across. The brand is soft, a bit squishy and very plain-spoken, so the cards can be the loud part.
The coin
The front is an f with two bars, like a currency sign, because faloos means money. Flip it and the two bars stay where they are and become the arrow: =>. That arrow is how every payment is written. Hover or tap any coin on this page.
How it moves
- Hop. On hover, focus or tap the coin lifts 22% of its height and its shadow shrinks underneath.
- Flip. It turns 180° on the Flip spring (stiffness 210, damping 17), overshooting a few degrees so you catch its ink edge.
- Land. It settles showing =>. Leaving flips it home with the same hop, so it never just snaps.
Built from real layers: two faces and six edge discs in CSS 3D, so the coin has thickness mid-flip. Reduced motion shows the back without turning.
Lockups
Wordmark: Fredoka SemiBold at width 108, tracking −3.5%. The coin sits at 1.25× the wordmark’s cap size with a gap of a third of the coin. Clear space all round is half the coin.
Minimum sizes
Colour
Pastels come from the things that end up in a wallet: tickets, receipts, stickers, sweet wrappers. The brand itself only owns warm neutrals, Ink and one Jam red. Everything bright belongs to people, because they pick their cards’ colours. Cobalt reads as a bank; this should read as a pocket.
Brand
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
Card colours (people pick these)
- #
- #
- #
- #
- #
- #
- #
- #
Every card colour keeps ink text above 9.8:1, so a nickname is always readable whatever someone picks. Pastels sit between 86 and 92% OKLCH lightness so no card shouts louder than another; Liquorice is the one dark option.
Type
Fredoka is round enough to feel like a toy and has a width axis, so long nicknames condense instead of shrinking. Figtree does the reading: friendly, geometric, very clear at small sizes. Both are OFL.
Display · Fredoka SemiBold
Pass a card.
Nothing moves until you approve it.
Bills with open slots
Text · Figtree
Link the bank accounts you already have and give each one a nickname. The money goes straight from your bank to theirs.
Small · 14 px · Lowercase letters and numbers, up to 16.
Label · 12 px caps · Linked account
£8.50 · £24.50 · £120.00 tabular figures for money
Embossed nicknames that condense
Voice
Say what happens to the money, in the words you’d use to a friend. Name the account, not the bank. No hype, no reassurance we can’t back up.
Motion
Springs stand in for haptics. Anything that behaves like an object moves on a spring, and nothing moves on its own unless you started it.
- Springs, not curves. Four springs cover everything. The same numbers drive the JavaScript springs and the CSS
linear()easings, so a flip feels the same everywhere. - Things have weight. Cards lift before they move, tilt with how fast you drag them, and their shadow grows as they rise.
- One toy at a time. Only what you’re holding moves. Everything else waits, dims, or points the way.
- Approval is still. The approval side doesn’t bounce. The fingerprint drawing in is the only motion, because that moment should feel calm.
- Reduced motion is a still life. Every state exists without movement: the card shows its approval side, the stamp appears on the friend’s card, the line is drawn.
The account card
A card here is a linked bank account, drawn as a card. It never pretends to be a debit card: no chip, no long number, no expiry date. Eight colours times six patterns gives everyone 48 ways to tell their accounts apart at a glance.
Rules
- A nickname belongs to one account, never to a bank. Two accounts at the same bank get two names.
- Nicknames are lowercase letters and numbers, up to 16. Past 7 letters they condense on Fredoka’s width axis; past 11 they also step down in size.
- The colour and pattern are the owner’s choice and travel with the card: friends see the same card when they pay into it.
- Patterns are drawn in a tone of the card’s own colour, so they add texture without fighting the nickname.
- Every surface catches light: a soft highlight on the top edge and a sheen that follows the pointer.
| Colour | Plain | Stripes | Polka | Waves | Gingham | Sunburst |
|---|---|---|---|---|---|---|
| Butter | ||||||
| Peach | ||||||
| Bubblegum | ||||||
| Lilac | ||||||
| Sky | ||||||
| Mint | ||||||
| Pistachio | ||||||
| Liquorice |
App icon
The coin, sitting on Jam with its edge showing, like it just landed. It reads at 40 px because it’s one shape, and the Jam is the only red on most home screens.
Proposal only. Final masks, the 1024 px export and store artwork come later.