08Brand guidelines
Motion
Every Covenant animation has a destination. The field comes together to form the mark, words rise into place and a grid of squares clears to reveal the page. Motion shows where something came from and where it belongs, and it is never there for show.
Motion
Principles
Six rules every animation follows.
- 01Arrive, then rest.Every animation moves toward a final state, then stops. The field's slow drift is the one exception. Nothing loops to compete for attention.
- 02One curve. Everything that enters uses the same ease-out: a quick start and a long, soft landing.
- 03Quick to touch, unhurried to reveal. 150 ms answers a pointer; 600–800 ms brings content in.
- 04Built from the mark. Motion uses the same squares as the logo: a grid clearing, shapes growing, the field drifting. Never a spin, a bounce or a 3D flip.
- 05Nothing plays unseen. Animations pause when they are out of view or the tab is hidden.
- 06Reduced motion loses nothing. With it on, every element lands in its final state at once.
Motion
The curve
cubic-bezier(0.16, 1, 0.3, 1), an exponential ease-out. Most of the distance is covered in the first third of the time; the rest is a long, gentle finish.
Hover and color changes use a standard ease at 150 ms.
--ease: cubic-bezier(0.16, 1, 0.3, 1);
transition: transform 0.7s var(--ease),
opacity 0.7s var(--ease);Motion
Durations
The complete set of timings. Use these values only.
| Movement | Duration | What happens |
|---|---|---|
| Hover | 150 ms | Buttons rise 2 px; the primary button brightens 12%. |
| Header border | 200 ms | Appears below the header once the page scrolls. |
| Reveal | 700 ms | Content fades in and rises 18 px as it enters. |
| Word reveal | 780 ms | Headline words rise into view, 55 ms apart. |
| Opening animation | 620 ms | Per square; the sweep crosses the screen in about 0.9 s. |
| Forming the mark | Scroll | Follows the scroll of the home page, eased at both ends. |
| Field | Continuous | A slow, steady drift; each shape grows and fades at its own pace. |
| Section bands | Continuous | Move with the scroll and respond to its speed. |
| Side menu | 600 ms | The menu slides in from the right, and its items rise into place one by one, 55 ms apart. |
Motion
Word reveal
Section titles rise into view word by word as they enter: 780 ms per word, 55 ms apart, on the Covenant curve. Use it for headlines only, never for body text.
One computer, safely shared by humans and agents
Motion
Opening animation
The home page opens on a grid of squares with the mark at its center. After half a second, the squares shrink, round off and clear diagonally from top left to bottom right, in the direction of the gradient. It plays once, on the home page only.
Motion
Forming the mark
Covenant's signature motion. As you scroll the home page, the field comes together to form the mark. Because it follows the scroll, it moves at the reader's pace.
Motion
Interaction
Buttons lift 2 px on hover, and the primary button also brightens. Links and cards change only their color or border. Focus is shown with a 2 px mint outline, offset 3 px.
Motion
Reduced motion
When a device requests reduced motion, Covenant removes animation without losing any content.
- 01The opening animation is skipped.
- 02Headlines and content appear in place; nothing rises or fades.
- 03The home page shows the finished mark, and the bands between sections show a single still frame.
- 04Pointer effects are hidden and smooth scrolling is turned off.
Motion