Dr. Amanda Wijaya
General practitioner
Dr. Rizky Saputra
General practitioner
The full mobile set — one hand, a thumb, a phone. Same brand and colour tokens as the dashboard, a different ladder: buttons 24 / 32 / 44 / 48px, fields 32 / 36px, body copy 16px. Specimens sit in a 335px column, the real content measure of a 375px screen.
Dashed outline is the 44×44 minimum. The small sizes stay visually small and reach it with a coarse-pointer overlay, so the zone is real even though the pixels are not. Two of them 8px apart have overlapping zones and the wrong one takes the tap — hence 12px minimum between bordered controls, 24px around bare icons.
44 default · 48 lg · 32 sm · 24 xs
One filled action per screen — it is the answer to “what now?”
Square. Always an aria-label — the glyph is not the name.
data-icon tightens the padding on the icon side
The footer action. Reaches both gutters so the thumb cannot miss it.
36px tall, 16px text — under 16px iOS zooms the viewport on focus
Grows with its content, never scrolls internally
The default on mobile — opens the OS picker instead of a scroll surface that can trap the page
Custom popup — translucent, blurred. Only when the option list needs icons or descriptions.
Opens as a sheet with the search inside — never a dropdown under the thumb
Also a sheet. Sundays are vetoed, which a native date input cannot express.
16px glyphs with an invisible 44px zone around each
Label, control, help text, error — one grouped unit
We only use this to confirm your booking.
Switch on the right — the label is the tap target
A message the evening before your visit.
A legend groups related fields for a screen reader too
Filled pill on brand-50 — carries the brand without a primary button's weight
Position is in the label as well as the dots — a dot row tells a screen reader nothing
20px radius, shadow for lift, no border
Status carries hue, icon and word — never hue alone
24 sm · 32 default · 40 lg
Skeleton mirrors the shape it replaces, not a generic bar
4:3, not the dashboard's 16:9 — at 16:9 in a 335px column the data band is under 150px once the axis takes its share.
No axes, no tooltip. Decorative on its own — always next to the number it summarises, because it says “rising”, not how much.
Centred, not a sheet. No outside-tap dismiss — the action behind it cannot be undone.
Enters from the bottom on a phone — the top of the screen is out of thumb reach
Mobile only. Swipeable and snappable — for a surface the user pulls up and pushes back down.
Confirms an action that left no visible trace on screen
375px frame. Fills reach the physical edge, content stays inside the safe area, and the footer action can never scroll out of reach.
Empty and error share one shape: orient, explain, offer one way forward
Nothing booked yet
Your upcoming visits will show up here once you book one.