Tokens
Tokens are named values for things like color and spacing. Ten color scales with 69 shades feed 119 tokens, set once for light mode and once for dark. Components never pick a color directly.
Design system · banking app
A design system for a banking app, with motion built in
Kinetic is a design system for a consumer banking app. It covers the basics like color and type, the components, ready-made sections, full screens, and the rules that keep them consistent. Motion was designed in from the start, not added at the end. Every part runs live, and the phone screens run together as one working banking app you can use.
Opens in a new tab.
119
tokens
17
component groups
15
blocks
15
screen types
11
shared rules
0
one-off components
Overview
What Kinetic is
Everything in the system is the real thing, running live. Change the brand color and every screen updates, with the contrast checks run again.
One activity list
One transaction list handles selection, account roles, hidden amounts, locked actions, and every loading and error state. Blocks and screens reuse it as is, so one fix fixes it everywhere.
Contrast and permissions
Permissions, error recovery and contrast are shown working in the live system. Where a claim has a limit, the limit is written next to it.
Structure
The four layers, plus the rules
Each layer is built only from the one below it. Every row opens that part of the system in a new tab.
L1
Foundations
Color, type, spacing, corner radius, shadows, focus, density and
motion. Ten sections, all live.
L2
Components
Seventeen groups, from basic buttons and inputs to amount entry,
one-time codes, hold to confirm, receipts and the activity list.
L3
Blocks
Fifteen ready-made sections, like balance, activity feed, send
money, splits, limits and receipts. Built only from L1 and L2.
L4
Screens
Fifteen screen types in one 402 by 780 phone frame. You can see
them all at once, and the account role decides what each one hides or locks. They
also run together as the phone app at the top of this page.
C1
Patterns
Eleven rules every screen follows: data states, permissions, error
recovery, never charging twice (idempotency), showing fees, and asking for extra
security on risky actions (step-up authentication).
C2
Governance
How a new value gets added, and an automatic check that catches
anything that drifts from the system. The check runs on that page.
Try it
Five live components
These come straight from the system, not copies, so they are always up to date. They all work. Try typing into the keypad.
Live from the system. Try it here, or
open it in the system ↗
Theming
Any brand color, still readable
Kinetic builds all its colors from one brand color, using OKLCH, a color model that keeps lightness even. Then it adjusts any text color that fails WCAG AA contrast, lists every change, and rejects a color it can’t fix. Status colors stay fixed so green always means money. If a brand color is too close to that green, success turns teal.
Electric Emerald
Trust Blue
Coral
Orchid
Teal
Any hex you paste
Contrast check
Text colors are adjusted until they pass AA, and every change is
listed.
Account roles
Primary, joint, teen and view only decide what is hidden or locked,
using the same activity list in components, blocks and screens.
Data states
The feed handles data, loading, empty, error and partial states
everywhere it appears.
Motion tokens
Eight motion tokens set timing and easing. The system itself handles
the reduced motion setting.
Drift check
An automatic check tests 42 tokens against the live page, so you can
see for yourself whether anything has drifted.
No one-off components
The fifteen screens and fifteen blocks add no new components.
Everything they use already exists one layer down.
Open the system
In the new tab, pick a brand color at the top right and switch to dark mode. All 119 tokens update across every component, block and screen at once. Or open the phone app and send some money.