Docs Brands
The brand check
A live check that every page is readable and on brand, with one-click fixes.
While you edit, Soda checks the page against the brand kit and basic readability rules. The badge at the top of the Studio shows how many things need a look. Click it, or choose View → Brand check, to open the panel.
Issues are in two groups: To fix (the post will look wrong or be hard to read) and Worth a look (probably unintended, your call). Most have a fix button. Fix all applies every available fix as one step you can undo.
What it checks
| It tells you | Why it matters | The fix it offers |
|---|---|---|
| A text is hard to read against what is behind it | Needs a contrast of 4.5:1, or 3:1 for large text (the WCAG AA standard). | Use a readable brand colour |
| A layer extends past the edge of the page | That part will be cut off. | Move it onto the page |
| A text may be too long for its box | It can run off the page. | None: shorten the copy or reduce the size |
| A text is too small to read on a phone | Below 22 px on a 1080-wide page (scaled for other sizes). | Increase to the minimum size |
| A colour is not a brand colour | Applies to the page background, shapes, text and single coloured words. | Use the closest brand colour |
| A font is not a brand font | Compared with the kit's heading and body fonts. | Switch to the brand font |
| The brand logo is not on the page | Checked on the first page of a design. | None: add it from the library |
Things to know
- Text sitting on a photo cannot be measured automatically. Soda says so and asks you to look at it at phone size.
- Hidden layers are ignored.
- With no brand kit, colour, font and logo checks are skipped. Readability checks still run. The panel links to the brand kit so you can set it up.
- The check is advice. Nothing stops you exporting or publishing a page with open issues.
The agent uses the same check
When the agent finishes building a page it runs the same rules on its own work, plus two more: text overlapping other text, and anything placed where a Story's interface would cover it. That is why its pages usually arrive clean, and why asking "check this design" gives the same answers as the panel.