Borders & Focus

Border radius tokens and the focus ring system, how keyboard focus is communicated consistently across every interactive element in the system.

Border Radius

All radii derive from the --radius base token via calc multipliers. The system currently uses 4px, gently rounded edges throughout.

lg (base)

2xl

full

Focus States

Every interactive element inherits a focus ring from the global base layer. The ring uses the --ring token, which matches --brand red, rendered at 50% opacity via outline-ring/50.

globals.css, @layer base

* {
  @apply border-border outline-ring/50;
}

Keyboard-only: Tailwind's focus-visible: variant is used on interactive components so the ring only appears during keyboard navigation, not on mouse clicks. This follows the :focus-visible CSS pseudo-class natively supported in all modern browsers.

Opacity: The /50 modifier softens the brand red to a more ambient glow, ensuring visibility without overwhelming the UI.

Live demo, press Tab to move focus