Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

designRauno

Custom Selection Styling

SHOULD

SHOULD: Style `::selection` with brand colors instead of shipping the browser default blue.

Style the document selection state with ::selection to match the brand

::selection { background: var(--accent); color: var(--accent-foreground); }

Bad

Good

Why it matters

The default browser selection color is a generic blue that rarely matches your design. Customizing ::selection with your brand colors creates a more cohesive and polished experience. It's a small detail that shows attention to craft.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.