Glow Focus

A purple glow ring applied to focus states on inputs, cards, and buttons. Provides clear, accessible focus indication using the primary color.

Input Focus

Click or tab into the input below to see the glow focus ring.

Email address

css

input:focus {
  border-color: #1db954;
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15);
}

Card Focus

For keyboard-navigable cards, apply the glow on :focus-visible to avoid showing it on mouse clicks.

Focusable Card

Tab to this card to see the glow ring appear.

Static Card

Not focusable, no glow.

css

.card:focus-visible {
  border-color: #1db954;
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15);
}

Button Focus

Press Tab to see the combined glow + focus ring

css

/* Gradient button already has a glow shadow;
   add an outer focus ring on top */
.btn-primary:focus-visible {
  box-shadow:
    0 4px 20px rgba(29, 185, 84, 0.35),
    0 0 0 3px rgba(29, 185, 84, 0.25);
}

Focus Token Values

Property	Value
Border color	#1db954
Ring shadow	0 0 0 3px rgba(29, 185, 84, 0.15)
Transition	border-color 0.15s ease, box-shadow 0.15s ease

Guidelines

Never remove focus outlines without providing a visible alternative.
Use :focus-visible over :focus when possible to avoid glow on mouse clicks.
The glow ring must have sufficient contrast against the background.
Keep the ring width consistent at 3px across all components.
For elements with existing box-shadows, layer the focus ring on top with a comma-separated value.