Developer guidelines
Colour
The palette
Teal #2DD4BF. The Switch accent: links, the main button, live states.
Peach #FBB392. A section colour, and the recording or listening state.
Orchid #E587FC. A section colour.
Coral #FB7185. The warning mark.
Charcoal #454445. The dark neutral.
Accents colour small things: a link, a lead word, the main button. Never body text, never large fills, never card backgrounds. One accent per section. Errors stay red.
Light and dark mode
Dark. Page #171717. Words white, second level words white at 62%. Teal words #5EEAD4.
Light. Page #F2F2F7, cards #FFFFFF, typing fields #EEEEF0 with a #D1D1D6 edge. Words #1D1D1F, second level #6E6E73. Teal words #0F766E.
Teal buttons. Teal #2DD4BF fill with dark words (#171717 or #1D1D1F), in both modes.
Warnings on light. Dark words with a coral mark beside them; coral is too light for small words on white.
No yellow, tan or cream. Not as a surface, not as a warning.
Follow the device. Support both modes and follow the person’s setting.
Contrast
Every word under 18 px reaches at least 4.5 to 1 against what it sits on. How the Switch pairs measure:
16.8 to 1. #1D1D1F on white.
5.5 to 1. Teal words #0F766E on white (4.9 on #F2F2F7).
5.1 to 1. #6E6E73 on white (4.5 on #F2F2F7).
12.1 to 1. Teal words #5EEAD4 on #171717.
9.6 to 1. #171717 words on a teal #2DD4BF button.
1.9 to 1, fails. Teal #2DD4BF as words on white. Use #0F766E instead.
Do and don’t
Ready. Teal for the one word that matters.
Ready. Teal for the one word that matters.
Do. Colour one word; let weight carry the rest.
Don’t. Fill a box with colour to say a status.