- Home design
- Web guide
Design system
Calm, clear and quiet
The shared look for the family home apps: mostly white and soft greys, one slate-blue accent, generous space and the phone’s own font.
Colour
Every colour is a --home-* custom property. Ratios are against white unless noted; the test checks them.
- accent#3a6390 · 6.2:1
- accent-soft#e8eef5
- ink#1d1d1f · 16.8:1
- ink-2#3c3c43 · 10.9:1
- muted#636368 · 6.0:1
- control#8a8a91 · 3.4:1
- line#e3e3e8
- fill#ececf0
- bg#f5f5f7
- surface#ffffff
- ok on ok-bg#1e6b3c · 5.7:1
- warn on warn-bg#8a5300 · 5.6:1
- bad on bad-bg#b3261e · 5.5:1
Type
The phone’s own font: San Francisco on Apple devices, Segoe on Windows, Roboto on Android. No font files to load.
Display 40
Title 28
Title 22
Lead 20
Body 17. The quick brown fox jumps over the lazy dog.
Small 16, the floor for any sentence.
Label 13, short labels only
Space and shape
A 4px grid: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64. Corners: 6 badges, 8 thumbnails, 12 buttons and inputs, 16 cards, 24 sheets.
Buttons and links
A link in a sentence is underlined. A standalone action: See the phone kit
Cards and badges
Pantry
What is in the fridge, freezer and cupboards, and what to use first.
A plain card
Hairline edge on white; a soft shadow on the grey page.
Tables
| Item | Place | Left | Status |
|---|---|---|---|
| Oat milk | Fridge | 1 | Expired |
| Baby spinach | Fridge | 1 | 2 days |
| Basmati rice | Cupboard | 1 | Fresh |
Forms
Notes
NoteA quiet aside on the grey ground.
TipAdd the app to your home screen to use it offline.
DoneEverything is up to date.
SoonThree things need using this week.
ProblemThe list could not be saved. Check your signal and try again.
Icons
24 line icons in icons.svg: 24px, 1.75 stroke, round ends, drawn in the text colour.
Prose
Long reading sits in .h-prose: 17px, lines of at most 68 characters and a little more line height. Write plainly, in British English and sentence case.
A smaller heading
- Lists keep their bullets.
- Links are underlined in the accent, never colour alone.
Quiet by default; the accent marks what you can do.
How to use the files: README.md. The rules: DESIGN.md and DESIGN-APP.md.