Brand kit
Identité iconographique WatchMe — Progress Ring (arc 70% + play + dot terminal).
Marks
3 variants — aurora (marque), mono-dark (fonds clairs), mono-light (fonds sombres)
Wordmark
Mark + typo « WatchMe » horizontal — Inter 800, letter-spacing serré
Tailles
6 échelles — xs (16px) · sm (24px) · md (32px) · lg (40px) · xl (64px) · 2xl (96px)
Animations
7 états — passe la souris sur l'état 'hover', clique 'Replay' sur les one-shot
Boot / Splash
one-shot
→ Démarrage app, apparition du logo dans le header
Arc se dessine 0→70%, play pop-in bouncy, dot arrive en dernier. ~1.7s.
Loading
continu
→ Chargement asynchrone à la place d'un spinner générique
Arc court qui tourne à 1.4s/tour. Play fixe au centre, ancre stable.
Progress bump
one-shot
→ L'utilisateur marque un épisode comme vu (30% → 70%)
L'arc s'étire, le dot glisse le long du parcours circulaire. Easing spring.
Completion
one-shot
→ Dernier épisode vu — le film/série passe en état « vu »
Arc complète 70→100%, play morphe en check, halo aurora explose vers l'extérieur.
Idle breathing
continu
→ En permanence dans le header — signal « vivant » discret
Halo du dot qui respire toutes les 2.4s. Subtil, ne distrait pas.
Hover
interactif
→ Souris sur le logo (header, footer, CTA marketing)
Scale léger (1.06×) + halo qui s'intensifie. Feedback micro-interaction.
Aurora shimmer
continu
→ Optionnel — usage marketing / hero, pas dans l'app
Gradient qui tourne lentement (6s/tour). Effet ambient, à réserver aux contextes calmes.
Static (référence)
continu
→ Fallback sans animation (email, PDF, prefers-reduced-motion)
État de base sans animation. Le point de départ visuel de tous les autres.
Palette Aurora
Tokens couleurs — light & dark ont des accents différents pour la luminosité perçue
Violet
Light
oklch(57.86% 0.2468 288.24)
Dark
oklch(65.08% 0.2108 295.52)
Pink
Light
oklch(68.87% 0.2202 0.14)
Dark
oklch(71.29% 0.2053 355.34)
Teal
Light
oklch(76.26% 0.1236 200.21)
Dark
oklch(83.15% 0.1221 202.34)
Assets
Sources SVG + PNG rasterisés + favicon.ico + og-image + manifest PWA
Sources SVG (source of truth)
Usage React
Composants dans `apps/web/src/components/brand/`
import { Logo, Wordmark, AnimatedLogo } from '@/components/brand';
// Mark statique
<Logo size="md" />
<Logo variant="mono-dark" size="lg" />
// Mark + wordmark
<Wordmark size="md" />
<Wordmark variant="mono-light" size="xl" />
// Mark animé (utilise CSS modules, respecte prefers-reduced-motion)
<AnimatedLogo state="idle" size="md" /> // header
<AnimatedLogo state="loading" size="lg" /> // pendant fetch
<AnimatedLogo state="boot" size="2xl" /> // splash au premier load
<AnimatedLogo state="bump" size="md" /> // au marquage épisode vu
<AnimatedLogo state="complete" size="xl" /> // fin de saison
<AnimatedLogo state="hover" size="md" /> // logo cliquable
<AnimatedLogo state="shimmer" size="3xl" /> // hero marketing