callCash() / Design system
The parts callCash is built from. Tokens, type and every control.
Semantic tokens for dark and light, one typeface to read and one for code, a 4-point grid, and every control drawn by us. No browser defaults anywhere.
Colour
Surfaces
--bgThe ground. Riverrr ink in dark, white in light.--surface-1Raised once: panels, fields, code.--surface-2Raised twice: hover, selected rows.--surface-3Raised three times: the selected segment.--borderHairlines. Low contrast on purpose.
Text
--textHeadings and body.--text-2Secondary text, 7:1 or better.--text-3Placeholders and disabled only.
Brand and meaning
--accentRiverrr orange: brackets, focus, the map.--accent-textOrange that passes as text.--inverseThe primary button: the most contrast against the ground.--paidA payment went through. Never decoration.--warnWaiting on someone: pending, in review.--eishSomething failed. Destructive actions.
Type
Schibsted Grotesk for everything you read. IBM Plex Mono only inside code. Six sizes; display at −3% tracking.
- Display, 68Get paid.
- Heading, 40Every gateway.
- Title, 24One webhook
- Body, 18Your money goes straight to your bank.
- Small, 15Instant EFT, no card needed
- Caption, 13Test mode, simulated
Space
Everything on a 4-point grid, so every gap halves cleanly.
4812162432486496
Radius
Stepped by size. Inner radius is outer minus padding.
--r-scontrols, chips--r-mcards, code--r-lpanels, bands
Buttons
The more important, the louder. One primary per view. Horizontal padding is double the vertical.
Chips
Status, never action. Thinner than a button and never in the CTA colour.
HTTP verbs
The one place colour encodes a word: reading is green, writing is orange.
Controls
Fields, segmented controls and switches are drawn by the system. Click out of a field to see its error state.
Rand, up to two decimals.
Leave it, and you'll see the error state.
Code
await callCash({ amount: 250, reference: "order_1042" })