Component demo
One field, every state.
The outlined text field from the component library I led at fromAtoB, rebuilt as a demo, every interaction state, 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 by construction.
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.
The architecture is the point. 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 stop being a discipline problem and become impossible to express. Consistency as a property of the system, not a hope about the team.
SERIES · PROTO_01: Ten drives → · PROTO_02: Set the line → · PROTO_04: Swipe to classify →