20 · Room for tired eyes
Layout and spacing
A 4 px base, generous space and a single column of attention. On small screens, what matters moves up; nothing piles up.
Spacing scale
4
8
12
16
24
32
48
64
- Base
- 4 px. All spacing is a multiple of 4.
- Use
- 8 px between icon and text; 16 px between fields; 24 px between blocks; 48 px between sections.
- Margins
- 16 px on phone, 24 px on tablet, 32 px on desktop.
- Content
- Maximum width of 1120 px; running text of 65 ch.
Breakpoints
| Name | From | Schedule layout |
|---|---|---|
| Phone | 0 px | One column: the day’s list; the detail opens full screen |
| Tablet | 600 px | List and detail in two columns |
| Desktop | 960 px | Sidebar, list and detail |
| Wide | 1280 px | Same, with the content centered |
Schedule wireframe
Navigation
Today
Appointment detail
Density
Comfortable density is the default. Compact density exists for people who review many appointments, but no row goes below 40 px, and the touch target stays at 44 px on touchscreens.
- 8:00Example Patient ACheck-upConfirmed
- 9:00Example Patient BFirst visitTo confirm
- 10:30Example Patient CFollow-upConfirmed
- 11:30Example Patient DCheck-upCanceled
Do
- One main action per screen, at the top right or at the end of the flow
- The most important data (time, name) on the left, the status on the right
- Vertical space before divider lines
- Cards with 16 to 24 px of padding
Don't
- More than seven columns in a table
- Mixing three text sizes in one row
- Placing buttons less than 8 px apart
- Fixing heights: enlarged text must be able to grow