Overlays & States
Modal/dialog backdrops and accessible hover/focus/active states. The backdrop dims and blurs; the panel stays solid and readable. Interactive states keep foreground and background paired so an icon can never land white-on-white.
Review Status
Modal overlay
The backdrop (.ds-overlay) carries the dim + blur,
matching the site nav. The panel (.ds-modal) always sits
on a solid, opaque color — never a translucent or blurred surface — so its text
stays readable over any page content behind it.
Hover / focus / active
Use .ds-item for menu and nav items. Hover tints the
background and darkens the text (both move). Active/current sets a solid cobolt fill with white
text and icon — locked together, so a white icon can never sit on a white background. Tab through
these with the keyboard to see the focus ring.
Default · Hover · Active
Buttons with focus ring