Component demo
One field, every state.
The outlined text field from the fromAtoB component library, rebuilt as a demo with every interaction state in both themes. One token table drives the live field and generates the sheet below it, so the two error reds from the case study’s opening can’t happen here.
Type a station · try one that doesn’t exist · force a state · flip the theme · the footer reads tokens
Station or city
The sheet
Generated at load from the same token table the live field reads, not drawn by hand.
A grid showing the field in six states (rest, hover, focus, filled, error, disabled), rendered in both the light and dark theme.
Every visual decision routes through a role token (field/outline, field/label) that aliases one palette per theme. The error outline can only ever be signal/error, so the two competing error styles that opened the case study can’t be expressed here at all. Nobody has to remember the rule, because the system doesn’t offer a way to break it.
SERIES · PROTO_01: Ten drives → · PROTO_02: Set the line → · PROTO_04: Swipe to classify →