UI Elements & ComponentsPenelopepattern
Focus-Visible Contract
One ring treatment for the whole app — never removed, never replaced by colour alone, always :focus-visible.
Penelope: Long-running fidelity. Maintained excellence over years.
Exhibit case
Why it matters
Removing outlines to look "clean" is how keyboard users get lost. A single contract keeps every control honest.
Key techniques
:focus-visibleonly — mouse users stay quiet.- Ring colour from
--color-ring, offset from background. - Forced states in the Athena bench for capture.
What to steal
The transferable part.Design the ring once. Components inherit; they do not invent.
What not to copy
Context-specific or costly.Do not use outline: none without a replacement ring.
Inclusion rationale
The quiet law underneath every Athena component.
Technical register
Performance
Pure CSS — zero JS cost.
Mobile
Coarse pointers rarely show focus-visible; tap targets still meet 44px.
Accessibility
Colour is the second signal; thickness and offset remain under forced colours.
Study next
Related entries
AthenaWeighted PressA button whose six states were designed together, with an asymmetric press that gives the control apparent mass.Learning value: 5 of 5AthenaField Validation StatesOne field in four designed states, with a live instance whose validation waits until the user has actually said something.Learning value: 4 of 5AthenaRoving FocusA grouped control that takes one tab stop and moves internally by arrow key, with the active tabindex reported live.Learning value: 5 of 5AsclepiusReduced Motion ContractOne honest global switch — system preference plus user override — that every animation layer already reads.Learning value: 5 of 5