Style guide
The visual foundations of Dose. Every choice serves someone who reads little or not at all, who has poor eyesight, or who uses a small phone in bright sunlight.
Colours
A cream background, with less glare than pure white, and a deep indigo for actions. The time-of-day colours are decoration only: they never carry text and are never the only information. Contrast ratios are computed live.
Typography
Atkinson Hyperlegible, designed by the Braille Institute for low-vision readers. Look-alike characters (I, l, 1 · 0, O · b, d) have clearly distinct shapes. Base size: 17 px, 21 px in larger-text mode.
Heading 1 · 52 px bold
Hello Afi
Heading 2 · 32 px bold
Evening · around 7 pm
Quantity · 22 px bold
4 tablets
Body · 17 px
Take them with a meal or a glass of milk. Keep going even if the fever goes away.
Look-alike characters
Il1 O0 bd 5S 8B
Times of day
Four moments you can recognise without reading the time. Morning and evening differ by the colour of the sun, but also by the arrow (the sun rises or sets) and by the background.
Medicine drawings
The patient recognises the medicine in their hand: same shape, same colour. A dark outline keeps the drawing visible, even for a white tablet.
Forms
Colours
Drawn quantity
4 tablets means 4 drawings: you can count without reading numbers. Above 4, a single drawing followed by “× n” avoids an unreadable row.
Meals
The order of the pictures tells the instruction: pill then plate means “before eating”. The text label is always shown next to it.
Buttons
Every target is at least 48 px. The “I took it” button is 60 px tall: it is the most frequent action in the app. Its state changes colour, text and icon together.
Put together: one dose
All the elements together, as they appear in the patient view. The buttons work.
Rules
Always pair colour with a shape, a drawing and a text.
“Take the red tablet” with no drawing: colour-blind people and damaged screens lose the information.
One moment, one instruction, one action. Today's screen only shows what is useful today.
Medical abbreviations (“tab”, “x3/d”, “w/ meals”) and jargon.