Foundations

Motion

Functional, never decorative. Two curves, three durations. Exit is faster than enter — leaving should feel immediate, arriving should feel placed.

--duration-fast

120ms

A state change on a control.

--duration-base

150ms

The default. Colour and border.

--duration-slow

220ms

A layer entering or leaving.

What may animate

Allowed

transition-colors — colour, background, border
transition-field — border-color + box-shadow
transition-measure — width + background-color, for a bar growing
transform in exactly two places: the sheet — bottom, or a side drawer — and the spinner

Forbidden

transition: all
A hand-written property list inside a component
Hover scale, hover translate, hover shadow
Anything decorative on a page that is read, not used

Named keyframes

anim-fade-in · 150msanim-fade-out · 120msanim-pop-in · 160msanim-slide-up · 220msanim-slide-in · 180msanim-spin · 700ms

Overlay motion is driven by data-state, not by a JS animation library — the design system ships no third-party CSS. The skeleton pulse is wrapped in motion-safe:.

Sporting Scouter Design System

Every token on this site is generated from theme.css.