Clear space: one block
Keep a quarter of the mark's width free on every side: the size of one block. Nothing else enters that space.
Brand sheet
Local money, said plainly.
Locals is the brand partners see when they move money for their customers. It should feel like a bank statement you trust: warm paper, one deep green, one signal lime, numbers set in mono.
locals
Plus Jakarta Sans 800lowercase · tracking −5%
Forest#10291E
Lime#C8F169
AaJakarta200–800
01 · Logo
Nine blocks. One of them is lit.
B3 is a 3×3 grid of city blocks. Five are built and draw the L of locals. Three are still waiting. One is lit: the market where the money lands.
-
A 32-unit gridThree blocks of 8 with gaps of 2 and a margin of 2 on every side. Corners round at 2.2.
-
The L, in inkFive blocks: the left column and the bottom row. They take the deep colour of the background they sit on.
-
Three blocks waitingThe same colour at 16%. Never a second colour, never removed.
-
One lit dotLime, radius 4.2, centred in the top-right cell. A touch larger than a block, so it reads as round at small sizes.
-
The wordmarklocals, lowercase, Plus Jakarta Sans 800 at −5% tracking. Never in capitals, never with a gradient.
48
32
24
20
16
locals
64 px wideMinimum sizes
The mark holds down to 16 px, the favicon size. The lock-up needs at least 64 px of width. Below that, use the mark alone.
YAYour App
Balance2,410.55 USDC
Powered bylocals
Partner co-branding
In white-label use the partner's brand leads. Locals appears once, as "Powered by locals", in a footer or a settings screen.
locals
locals
locals
02 · Colour
One deep, one signal, lots of paper.
Forest carries the brand and the dark sections. Lime is for one thing per screen: the main action on dark, the highlighted word, the lit dot. Click a swatch to copy it.
A typical page
Mostly paper. Forest for the sections that matter. Lime is the smallest slice, which is why it works.
LiveActive
Live, active, completed
#E4F6CF fill, #24531A text, #3FAE2A dot.
Coming soonPending
Coming soon, pending
#FBEFD6 fill, #7A4F05 text, #F2B33D amber.
Early accessquoted
Early access, quoted
Paper 2 fill, muted text, #B7B2A3 dot.
failed
Failed
#EF6F4D coral, for failed transfers and errors.
03 · Type
Plus Jakarta Sans, self-hosted.
One open-source variable family, served from our own domain: no font service, no tracking. Amounts, ids and codes use the system mono.
Aa
Local400
Local550
Local650
Local750
Local800
Display · 76–92 · 800 · −3.5%Local rails.H2 · 34–60 · 750Global money.H3 · 22–28 · 750Quote first. Then pay.Body · 17 / 1.55 · 400Customers pay the way they always do, from their own bank, in their own currency.Eyebrow · 13 · 650 · +8%How it worksMono · system · 13.5A$12,500.00 → 8,137.50 USDC
Mono is for what you could copy
route_3f9aBSB 000-0001234 56780x7a3f…91c21 AUD = 0.6510 USDCtransfer.completed
ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace
-
Tight display, relaxed bodyHeadlines at −3.5% and line height 1.02; body at 1.55 for long reads.
-
Tabular figures in numbersCounters keep their width while they change.
-
Periods pulled inJakarta's period is wide, so headline periods sit 0.09em closer. The build adds it.
04 · Icons
Twenty icons, one hand.
Drawn on a 24 grid with a 1.6 stroke and round caps. Duotone: the line takes the text colour and the fill takes --ic-fill, so one file works on paper and on forest.
In use Icons sit in a rounded box: 18–22 px inside 32–46 px. Paper box on light, forest box with lime line for the active or the important one. Use as {{> i_name}}.
05 · Flags
Every currency gets a real flag.
Circular, simplified to read at 24 px, with a hairline ring. Keys are currency codes. Regional currencies use the Locals roundel; stablecoins use their coin. 28 in the set.
Sizes in use
20 chip
26 list
38 header
52 hero
AUD → USDCUSDC → PHPEurozone SEPA
06 · Voice
Say what it does. Then stop.
Short sentences that end with a period. Rails, currencies and statuses by name. No promises we cannot show.
WhereWriteNot
HeadlineCollect in AUD. Settle in USDC.The future of borderless money is here!CoverageLive in Australia and the US. Coming soon in the UK.Available in 160+ markets*PricePrice locked until the quote expires.Best rates, guaranteed.StatusTransfer completed. 8,137.50 USDC settled.Woohoo! Your money is flying your way!!CardsAvailability depends on where the cardholder lives.Cards for everyone, everywhere.Sample dataBSB 000-000 · account 1234 5678 · Harbour & CoReal-looking numbers and real names.ActionsTalk to us · Read the docsGet started for free today!
07 · Motion
Money moves. Decoration does not.
Animation shows a state changing: a deposit arriving, a rate locking, a route turning live. Every animated block also has a still version that shows where it ends.
route_3f9aAUD → USDCPending
State changes
Colour and label change together, in 0.4 s. The pill never moves.
Ease out, never bounce
--ease-out is cubic-bezier(0.22, 1, 0.36, 1). Fast start, soft landing.
Ambient, but slow
The barrio grid lights one block every 0.7 s and fades it over 1.6 s. It sits behind content, never on top.
Settled to wallet
8,137.50USDC
Count once
Amounts count up when they enter the screen, once per change. Never on a loop.
-
Paused off-screenLoops run only while they are visible and the tab is open.
-
Reduced motion respectedWith
prefers-reduced-motion, every block renders its final state. No loops, no typing. -
Still mode for screenshots
?shotin the URL renders the same final state, so every capture is the finished one.
See the still version of this section.
08 · Components
The parts every page uses.
Built once in ui.css and reused everywhere. The class name is under each one.
.btn-dark · .btn-ghost
.btn-primary on forest
.live-pill
LiveComing soonEarly access
.status · .soon · .pending
BSB000-000
Account1234 5678
.bank
transfer.completed200 OK
.hook-chip
-
Bank transfer received09:41:07 · ref HC-2210A$12,500.00
-
Converted at locked rate1 AUD = 0.6510 USDC8,137.50 USDC
.timeline · .tl.is-done
Payout delivered₱182,400.00 to a bank in Manila
.payout-toast
-
Idempotency on every writeRetry safely. The same key returns the same result.
-
Signed webhooksVerify every event before you credit a balance.
.checks with icon ticks
localsDEBIT
•••• 4821USDC
.mini-card
Go local in every market you serve.
Tell us where your customers are. We will tell you what is live, what is next, and how fast you can launch.