The full dashboard set, same brand and colour tokens as the mobile components. Control ladder: button 24 / 28 / 32px, fields 28 / 32px.
Button, Input and Select on one row — every top and bottom edge should land on the same line.
32 default · 28 sm · 24 xs
Only the primary action carries brand fill
Square, matching the height ladder
32px, 14px text
A field on the 32px ladder, not a native date input — the OS picker brings its own type ramp and its own locale format.
Always six weeks, so the grid never changes height between months
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
Label, helper, error — 6px row gap
As written on the ID card brought to the visit.
Always paired with a numeric readout
One indicator that slides — and the line rule is the same colour as its label
No X, no outside-click dismiss. Only where undo is impossible — anything reversible gets an undo toast instead.
Dismissible. For a task with a way out — the destructive confirm above is a different component.
28px rows, one step below the trigger
2× size jump from label to value
Bookings today
24
Up: +3 from yesterday
Beds in use
2/3
Down: 1 tersedia
Names the situation and offers one way out
No bookings today
New bookings appear here once they are confirmed.
| Service | Status | Cost | ||
|---|---|---|---|---|
| Amanda Lestari | Dermatology consult | Confirmed | Rp 450.000 | |
| Bagus Nugroho | Facial acne treatment | Confirmed | Rp 1.250.000 | |
| Citra Halim | Chemical peeling | Waiting list | Rp 980.000 |
Every tone ships an icon, not just a tint
Pengingat otomatis aktif
Slot tersedia
3 patients have not received a reminder
Conflict: Bed 1 is taken by Bagus Nugroho
Last crumb is not a link
Select with a filter. Reach for it past ~10 options, or when the user knows the name but not the position.
Right-click a row. Always a duplicate of something reachable another way — a menu with no visible affordance cannot be the only route to an action.
Overlay scrollbar that appears on scroll. For panels inside a fixed-height box — never for the page itself.
Series colour defaults to the --chart-1..5 ramp by position, so the lazy path and the token-correct path are the same path.
240px expanded, 48px rail. Toggle it — rows keep their centre, labels give way to tooltips, group headings become a hairline.