Writing/Essays

Essay

Making focus states feel designed

The 2:1 focus ring isn’t a compliance checkbox — it’s the most visible part of your design system.

By SulJan 20266 min readAccessibilityDesign systems

On why the focus ring deserves the same attention as the colour palette.

Most of a design system is seen by the people who use the product. The focus ring is different: it’s seen by the people who can’t use a mouse — and it’s the most visible proof a product gives that it was designed for them.

The bar I hold on this site: a visible focus ring on every interactive element, at least 2:1 against the surrounding surface, on keyboard focus only — never painted on for mouse users.

Treat focus like a state, not a default — and never let the browser’s default be the best you can do.

When the focus ring is designed, it stops being a compliance checkbox and becomes part of the brand — the same way the ink colour or the type scale is. That’s the standard this site is built to, and the reason the code samples in my essays keep coming back to it.