Gallery
every component, in the design, theme and brand chosen bottom right · desktop + phone side by sideFoundations
Logo and brand
The ][ mark plus one character in --brand; a custom brand replaces it with an image and an optional dark variant.
Tokens
Icons
Actions
Buttons
More
Dialogs and confirmation
Feedback
Messages
Invoice 2026-0042 sent.
The month is not closed yet; hours may still change.
With JS the two flash messages above move to the bottom right as toasts: success fades after 5 s, errors stay until closed; each has an × to close it at once.
Progress
Status lights
Glyph or dot plus color, never color alone; aria-label carries the word.
Session
Five minutes before the sign-in ends a bar offers to stay signed in; after it ended, the page keeps its input.
Inputs
Whole forms with autosave and errors: form · dates, durations, money, ids: formats.
Autocomplete
data-pick, type to filter, Tab or Enter picks
one value: a native <datalist>, no JS
Tag colors
Tags are accent-colored by default; a user-chosen color (style="--c:#…") turns the tag into a tinted pill whose text keeps full contrast.
Upload
A drop zone with the supported files, and a plain button. Drag a file over this window: the zone lights up; over it, it says what will happen.
Data
Filters, chips, tags
Table and pager
| name | open | |
|---|---|---|
| ACME GmbH | 1.240,00 € | |
| Globex AG | 980,00 € | |
| Initech | 0,00 € | |
| Σ 3 | 2.220,00 € |
Row list
Empty state
Cards
api.example.org
200 in 84 ms · 99.98 % 30 d
mail
queue 120, slow since 10:42
backup
last success 2 days ago
Bulk selection: customers · charts and stat tiles: dashboard · calendars: week, month.