Controls standard
One height scale, one radius, one focus ring and the same states for every control. Candidate for the framework: everything here reads --xo-* and the palette tokens.
Scale
Three heights, a few paddings. Mixing them in one toolbar is allowed; mixing them in one row of a form is not.
sm 32px
md 40px · default
lg 48px · touch
| Token | Value | Used for |
|---|---|---|
--xo-control-h | 2.5rem | Default height of every control |
--xo-control-h-sm / -lg | 2rem / 3rem | Dense rows and toolbars / touch |
--xo-control-px | 0.9rem | Horizontal padding |
--xo-control-gap | 0.5rem | Icon to label, control to control |
--xo-control-border | --line-strong | Control borders, 3:1 against the page |
--xo-ring | 3px solid --ember-deep | The focus ring, everywhere |
Buttons
Default
Primary
Danger
Ghost
With icons
Fields
Label above, then the control, then a hint or an error. Same gaps in every form, so columns line up.
A hint under the field.
Enter a valid e-mail.
Options
Choice
Tabs, chips, menu, tooltip
Underline tabs for sections and code.
Pills for switching a view in place.
Choose a colour palette
Feedback
Info. Something worth knowing.
Saved. Your changes are live.
Careful. This cannot be undone.
Failed. Try again.