Four colours from the practice, and this tells you whether their brand survives contact with a client page before you build one. Derives every token the templates need, checks each pair against the legibility bar, and writes the CSS.
Four values. Everything else is derived, which is the point. A practice that is asked for eleven colours sends you none.
These are what the templates actually reference. You never hand a template a raw brand colour.
Ratios are WCAG contrast. The bar here is higher than the legal minimum on purpose, because a good share of these clients are older and reading on a phone in a kitchen.
The four places a brand colour actually lands. If it looks wrong here it will look wrong to their client.
Here is everything in your protocol, what each one is for, and what you paid. Keep this page. It is yours.
| Item | What it does | Price |
|---|---|---|
| Lymphatic Flush | Drains fluid in legs and feet | $129.99 |
| Pressure Tincture | Three times daily with water | $69.99 |
| Your total | After seniors discount | $1,308.51 |
Do not stop or change any medication on your own. Let your doctor adjust your medicines with you.
:root{}
A practice does not have a design system. They have a logo, a colour they like, and a website somebody built in 2019. Ask for eleven values and you get an email saying they will check with their designer, and then nothing.
Ask for four, derive the rest, and send back a swatch card for approval. They approve a picture in a minute. They will never approve a spreadsheet.
Brand and accent are for headers, labels, buttons and money. Running text is the ink token, which is derived from the ground so it always passes. This is the single most common way a practice's colours ruin a page.
4.5 is the accessibility minimum for normal text. A meaningful share of these clients are older and reading a protocol on a phone. Anything between 4.5 and 7 shows here as a warning rather than a pass, and you should say so to the practice rather than quietly shipping it.
Whether a button takes black or white text is arithmetic, not taste. The tool picks whichever wins, so nobody has to argue about it on a call.
Prices and totals get their own token for a reason. On the demo page this week, the entire price column was invisible on a phone. A price that is present but low contrast fails the same way, just more quietly.
Most solo and small practices genuinely do not have them. Do not make them feel behind, and do not invent something and hope they like it. There is a three step version of this that takes ten minutes.
Their logo and their website header. Take two values, the dominant one and whatever they use for buttons. That is your brand and accent starting point.
Fix any failure before they ever see it, using the Fix the failures button. They should never be shown a broken palette and asked to judge it.
Copy the swatch card, paste it into an email with a screenshot of the preview, and ask one question. Yes or change one thing. Not an open ended what do you think.