A CMS for editors who aren't the developers

The editors are older than the people who usually test admin panels.

A default admin template assumes a 14 px table, grey-on-grey placeholders and icons without labels. That's fine for a developer at 2 a.m. It's a wall for someone who updates the site now and then and doesn't want to call for help. So the brief for the CMS said it plainly: bold, easy to read, friendly to older users.

Every size is larger than in a typical admin panel.

• page title: 28 px / 36 px, bold
• section title: 22 px / 30 px
• table headers: 18 px / 26 px
• body and table cells: 16 px / 26 px
• labels and captions: 14 px
• 13 px only for breadcrumbs and meta, and nothing smaller anywhere

The public site and the CMS use different body fonts on purpose.

The public site keeps its modern sans. The CMS switches to Source Sans 3, which has a large x-height and open letterforms, so it holds up better at small sizes for older eyes. The headings keep the brand's heading font, so the CMS still feels like theirs.

Most of the wins are rules, not styling.

• Every text/background pair meets WCAG AA (4.5:1 for normal text).
• Never say something with colour alone. Add an icon, text or a pattern.
• Every field has a visible label. Placeholders are hints, not labels.
• Errors appear as text under the field, not just a red border.
• Every interactive element has a visible 2 px focus ring.
• Language tabs for bilingual content open on Indonesian, the editors' main language, and switch with the arrow keys.

On another CMS, QA asked for more room, and they were right.

The design file used a 4 px spacing unit. After QA feedback I raised the base unit to 4.8 px and moved the whole type scale up one step. That deliberately diverges from the design file, and the reason is documented, so nobody "fixes" it back later.

Design for the person holding the mouse.

I applied the same thinking to a small browser tool that prints house-number plates, with presets per housing estate: buttons at least 50 px tall and 16 px text, because it was designed for older users. None of this is special. It just isn't the default.