The single reference for Canteen's visual language: tokens, type, the coin, components, motion, and voice. Obsidian and brass, held to a service member's standards. This page is built from the same theme the product uses.
Never pure black or shiny yellow. A cool obsidian ground. Brass spent sparingly, on engraving, a thin rule, or the single most important action on a screen. Beside it, three semantic colours that each answer who is acting: green when something is confirmed, blue for what belongs to the service rather than to us, and red for something being done to a member. None of them decorates. A screen that needs no state shows none of them.
A confident display, a quiet body, and a monospace "readout" for money, rank, and technical labels.
Buttons are full pills, the native language of iOS 26 & Material 3. Shape no longer encodes role, so emphasis does: solid brass = primary, outline = secondary, small mono chip = state.
The name is set in the same monospace readout that carries money and rank: caps, brass, wide tracking. Nothing is drawn for it, because nothing on issued kit is. Tracking is 0.34em at every size - that spacing is the mark, and it sits above the 0.14–0.28em band the eyebrows and rails use so the wordmark outranks the labels it shares a typeface with.
It is brass, so it counts against the one accent a screen gets. On a page that needs its brass elsewhere, pass tone="bone" and leave the brass to the action.
The hero of the brand. In the military your gear is issued. So is your bank. Rank chevrons, reeded edge, a slow catch-the-light sheen. Never any real branch insignia.
Every touch answers back; nothing fidgets. Motion confirms an action, reveals hierarchy, or celebrates something earned. It never decorates. Imagery is engraved, not photographed. Voice is earned, plain, and on the member's side. Never hype or hooah-speak. Errors explain what happened and how to fix it.