The token layer
Ten primitive ramps across 69 steps resolve into 119 semantic tokens, aliased once per theme. Nothing in the component layer names a colour. Defined once, themed twice.
Design system · consumer banking
Money that moves should feel like it.
Kinetic is a consumer banking design system you can operate. One token engine drives every surface, any brand seed resolves into a theme that has already passed a contrast gate, and motion is a token rather than a garnish.
Opens in a new tab.
119
semantic tokens
17
component groups
15
composite blocks
15
screen archetypes
11
pattern contracts
0
forked components
Overview
What Kinetic is
A consumer banking design system, built and running. Every swatch, button, block and screen in the next tab is the live implementation, themed by the same tokens at the moment you look at it. Changing the brand seed re-resolves the whole surface, contrast gate included.
The activity list
A single activity list carries selection, roles, masking, gating and every data state. Blocks and screens reuse it verbatim, so a fix in one place is a fix everywhere.
Contrast and permissions
Permissions, resilience and contrast are demonstrated against the running system. Where a claim has a caveat, the caveat is on the page next to the claim.
Structure
The four layers
Each layer composes the one above it. Tokens flow up; nothing below reaches around the layer above. Every row here opens that part of the running system in a new tab.
L1
Foundations
Colour, type, spacing, radius, elevation, focus, density, motion.
Ten sections of token, each one live.
L2
Components
Seventeen groups, from primitives through amount entry, one-time
codes, hold to confirm, receipts and the consumer activity list.
L3
Blocks
Fifteen framed composites: balance, activity feed, send money,
splits, limits, receipts. Built from L1 and L2 only.
L4
Screens
Fifteen archetypes inside one 402 by 780 phone frame. The wall
shows all of them at once, and one account role masks and gates every one.
C1
Patterns
Eleven cross-cutting contracts: data state, permissions, resilience,
idempotency, fee disclosure and step-up authentication.
C2
Governance
How a value enters the system and how drift is kept out. The lint
runs on the page you are reading it on.
Live embeds
Five components from the system
The panel below is the design system itself, embedded. These are not copies, so they cannot go out of date: if a component changes in the next tab, it changes here on the same deploy. Each one is interactive. Type into the keypad.
Live from the system. Interact with it here, or
open it in the system ↗
Theming
The brand engine
Kinetic derives its ramp and its whole semantic layer in OKLCH from a single brand colour. A contrast gate then corrects every derived text token until it clears WCAG AA, reports each adjustment it made, and refuses any seed it cannot make pass. Status hues stay fixed so green always means money, with a collision guard that moves success to teal when a brand seed lands on top of it.
Electric Emerald
Trust Blue
Coral
Orchid
Teal
Any hex you paste
Contrast gate
Derived text is corrected until it clears AA, and every correction is
listed so you can see what the engine had to move.
Account roles
Primary, joint, teen and view only drive masking and gating from the
same activity list, in components, blocks and screens alike.
Data states
Data, loading, empty, error and partial are a contract the feed
satisfies on every surface that shows it.
Motion tokens
Eight motion tokens carry duration and easing, and reduced motion is
honoured by the system rather than bolted on.
Anti-drift lint
Governance checks 42 tokens under gate against the live document, so a
drift claim is a result rather than a promise.
No forked components
Fifteen screens and fifteen blocks introduce no new component.
Everything they show already exists one layer down.
Open the system
Pick a brand seed in the top right of the next tab and switch to dark. All 119 tokens re-resolve across every component, block and screen at once.