Motion
Everything uses a Quad ease-in-out curve. Duration depends on how much changes: a hover is quick, a full-screen overlay is slower.
| CSS name | Value | Used for |
|---|---|---|
--arche-motion-ease | cubic-bezier(0.455, 0.03, 0.515, 0.955) | Every transition |
--arche-motion-fast | 150ms | Hovers and pressed states |
--arche-motion-medium | 250ms | Accordion and navigation |
--arche-motion-slow | 400ms | Menu overlay and theme switch |
Reduced motion
When a visitor's system asks for reduced motion, all three durations become 0ms. State changes still show; they just happen at once. Try it by turning on "Reduce motion" in your operating system's accessibility settings.
Focus ring
Every interactive element shows a 4px ring with a 2px gap when it takes keyboard focus. The ring is never red, even on error fields. Press Tab on this page to see it on the links and buttons.
| CSS name | Used on |
|---|---|
--arche-border-focus-ring | The page surface. Black in Light, white in Dark. |
--arche-border-focus-ring-on-brand | The blue band. White, because black on Blue 500 fails 3:1. |
--arche-border-focus-ring-on-secondary | The yellow band. Near-black. |
--arche-focus-ring-width | 4px |
--arche-focus-ring-offset | 2px |
.button:focus-visible {
outline: var(--arche-focus-ring-width) solid var(--arche-border-focus-ring);
outline-offset: var(--arche-focus-ring-offset);
}Do not put overflow: hidden on a parent of a focusable element unless it leaves 4px of room around it. The ring will be cut off.
Up next
Accessibility
The WCAG 2.1 AA checks built into the components.