Durations

How long things take. These values control transition speed across demme's product surfaces and brand artifacts.

Easings

The character of motion. Easings shape how a value travels between two states — fast start vs gentle land, mechanical vs organic.

In combination

Each duration paired with the default easing. Hover any card to replay.

Reference

Drop these into any project consuming this brand's tokens.

/* brand/demme/tokens.css */
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-linear: cubic-bezier(0, 0, 1, 1);