Brand guidelines
Motion & layout
Motion in the CoVet experience should feel calm and purposeful. It guides attention without demanding it. Subtle over dramatic — animations support understanding; they don’t perform.
Motion principles
Fast and responsive
Interactions should feel immediate. Nothing should make a busy professional wait.
Consistent rhythm
The same type of action gets the same type of transition everywhere.
Purposeful entrances, quiet exits
Elements arrive with intent and leave without fuss.
Timing & easing
| Pattern | Duration | Easing | Use |
|---|---|---|---|
| Micro-interactions | 200ms | ease | Button hover, color transitions, toggle states |
| UI transitions | 300ms | ease-out / ease-in | Menu open/close, dropdown reveal, overlay fade |
| Content reveals | 300–400ms | ease-out | Scroll-triggered section entrances, card appearances |
| Continuous motion | 68–84s | linear, infinite | Partner logo carousels, ambient background loops |
Approved patterns
Use
- Fade: opacity 0 → 1 (300ms, ease-out) for overlays, modals, section reveals.
- Slide down: translateY -10px → 0 with opacity (300ms, ease-out) for dropdowns and mobile navigation.
- Color shift: background and text color transitions (200ms, ease) for all hover states.
- Subtle scale (1.00 → 1.02) on card hover only.
- Carousel scroll: continuous translateX loop with edge-fade masking.
Avoid
- Bouncing or elastic easing.
- Parallax scrolling.
- Auto-playing video with sound.
- AI-generated animation or video.
- Any motion that could trigger vestibular discomfort.
Respect prefers-reduced-motion at all times. For why we keep animation human-made, see “Human before AI” in Foundations.
Grid system
All layouts are built on a responsive container with a max-width of 1440px, centered horizontally.
Horizontal padding by breakpoint: 16px on mobile (<1024px), 48px on tablet (1024–1279px), 96px on desktop (≥1280px).
Vertical section padding: 64px mobile, 80px tablet, 96px desktop. Most section layouts follow a single-column or two-column pattern, with cards and tiles in responsive grids of 2–4 columns.
Spacing scale (8px base unit)
| Token | Pixels | Typical use |
|---|---|---|
| gap-1 | 4px | Tag to headline |
| gap-2 | 8px | Tight element groups |
| gap-4 | 16px | Standard element spacing |
| gap-6 | 24px | Medium groups, button rows |
| gap-8 | 32px | Section content groups |
| gap-12 | 48px | Between sections |
| gap-16 | 64px | Large section gaps |