08Brand guidelines
Motion
Every Covenant animation has a destination. The field comes together to form the mark, words rise into place and the dark opening screen 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. The field is made of the same squares as the logo. Each square stays in place and changes only in size, brightness and color. When the field seems to drift or gather into the mark, what you see is that change passing from square to square. Nothing spins, bounces or flips in 3D.
- 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 | 1.9 s | The mark holds for 0.5 s. The dark screen then clears square by square from top left to bottom right: the squares start clearing one after another over the next 0.75 s, and each takes no more than 0.6 s to clear. |
| 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 dark screen with the mark at its center. After half a second, the mark breaks into its squares and the dark screen starts to clear, square by square, from top left to bottom right in the direction of the gradient. As each square clears, it shrinks and lights up in the Covenant colors, glowing brightest where the field will appear. Most of the squares disappear to reveal the page, and the rest become the field behind the headline. The opening plays every time the home page loads in full, but not when you return to it from another page on the site.
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