SYSTEM / DESIGN FOUNDATION

Clarity in every state.

Semantic roles create consistent typography, borders, focus rings and interaction surfaces.

All examples are HTML and CSS only. Forms do not submit or save information.

Controls and validation

Use Tab to inspect visible focus. The busy example is visual only; it does not run a task.

Display name Email address

Enter a valid email address. This error is illustrative.

Classless control

Theme-scoped surface and interaction roles.

Compact density changes padding and control height, not text scaling.