Effects

Shadow elevation tokens and focus ring styles for depth, hierarchy, and interaction feedback.

Naos effects cover two concerns: shadow elevation and focus rings. Shadow tokens communicate depth and layer separation. Focus rings communicate keyboard interaction state and are a core accessibility requirement.

Shadow elevation

The shadow system has two layers - a brand-level core and a product-level layer built on top.

Core tokens (--brand-shadow_*) define the raw shadow values. Product tokens (--sib-shadow_*) are the ones components and layouts use directly. Always use product tokens in implementation.

Focus ring

The focus ring is a visual indicator applied to interactive elements when they receive keyboard focus. It is not a standalone design token but a shared visual pattern defined per component using :focus-visible.

Two styles are available:

Focused offset - A double ring: a 2px white gap separates the element with a 2px iris-purple/500 ring. Use on elements where the background is white or light, so the white gap creates visible separation.

Focused no-offset - A single 2px iris-purple/500 applied directly to the element boundary. Use when the element itself is already visually separated from its background, or when a gap would look inconsistent with the layout.

Do not override the focus states of components already applied.