One of the most catastrophic mistakes in web design is removing the browser's default outline using CSS outline: none without providing an accessible alternative. Without a visible focus indicator, sighted keyboard users cannot tell which element currently has focus.
A modern design system provides a dedicated focus ring token:
2px offset (outline-offset: 2px or a double-ring shadow) so the ring does not blend into the component border.:focus-visible): Use CSS :focus-visible so focus rings appear for keyboard navigation (Tab/Arrow keys) but remain discreet during mouse clicks.Level 2 · Core Principles & Governance