Design system du Quiz HP : or, bordeaux et thème scoped

L'ADR HPQ-002 tranchait un entre-deux : réutiliser la base du design system turquoise du hub, avec des accents Harry Potter ponctuels — pas un re-skin complet.

À l'implémentation, j'ai poussé un peu plus loin : un thème scoped qui remplace visuellement le hub dans la zone quiz, tout en gardant les mêmes composants et tokens sémantiques.

Articles précédents : vision · intégration.

Le dilemme

Trois options étaient sur la table :

• Turquoise strict — zéro travail design, mais le quiz paraît générique pour un univers aussi fort que Harry Potter
• Univers HP complet — parchemin, illustrations, animations… immersion max, scope MVP explosé
• Entre-deux (retenu à l'écrit) — structure UI du hub + accents thématiques limités

En pratique, le résultat ressemble plus à un thème dédié qu'à de simples accents sur le header hub — volontairement, pour marquer l'entrée dans le jeu.

Palette retenue

Inspirée or / bordeaux / violet nuit (ambiance maisons, sans choix de maison côté joueur en v1) :

• Fond — violet nuit #0f0a18 + dégradé bordeaux radial
• Primary — or #c9a227
• Accent — or clair #e8c547
• Secondary — bordeaux #5c2d4a
• Feedback — vert #3cb86a (bonne réponse), rouge #e05252 (mauvaise)

Les couleurs de maisons restent décoratives, pas personnalisées — le MVP ne propose pas de sélection Gryffondor vs Serpentard.

Même tokens, autres valeurs

Le hub et le quiz partagent la même grammaire CSS : --text, --background, --primary, --accent, --border, ombres, boutons, liens, titres.

Dans le thème HPQ, seules les valeurs changent. Les composants continuent d'utiliser text-(--primary), border-(--border), etc. — pas de duplication de Button ou Card.

Astuce Tailwind v4 : les utilitaires ocean-* du hub sont remappés dans le thème HPQ pour que les classes existantes restent valides sans fork.

Typographie

• Corps de texte — Inter (identique au hub, lisibilité des questions)
• Display — Cinzel uniquement sur le titre « Quiz Harry Potter » dans le header et les titres marquants

Pas de typo fantasy sur les énoncés : une question illisible, c'est une mauvaise UX.

Architecture du thème

Activation via data-theme="hpq" sur le layout du route group dédié :

• Fichier styles/themes/hpq.css — tokens et fond
• Import depuis app layout HPQ, pas depuis globals.css

Pourquoi ? Avec Tailwind v4, un import de thème dans globals.css peut être stripé au build. Le layout HPQ charge le CSS explicitement — le thème est garanti en prod.

Le header hub turquoise (nav portfolio) n'apparaît pas dans la zone quiz. À la place : un header HPQ minimal — lien retour portfolio, titre Cinzel, lien accueil quiz.

Le body reçoit un fond plein écran violet nuit (body:has([data-theme='hpq'])) pour éviter que le turquoise du hub transparaisse entre les pages.

Ce qui reste partagé avec le hub

• Composants shadcn/ui et patterns (cartes, boutons, spacing, radius)
• Dark mode only — cohérent avec ADR-001
• Règles d'accessibilité : contrastes, focus visible (outline-color sur l'accent or)

Ce qui est spécifique au quiz

• Feedback immédiat vert/rouge sur la carte question et les boutons Vrai/Faux
• Wizard setup en trois étapes (film → difficulté → confirmation) pensé mobile-first
• Iconographie légère si besoin — via la lib déjà présente, sans nouvelle dépendance

Ce qui a été écarté

• Fond parchemin, textures, illustrations custom
• Animations lourdes type fan-site
• Re-skin complet indépendant du design system hub

Écart ADR vs implémentation

L'ADR parlait d'accents non intrusifs en gardant header/footer hub. En dev, j'ai opté pour une zone visuelle séparée : plus de rupture, meilleure immersion, même coût de maintenance (un fichier CSS, un layout).

Si le quiz redevient un simple module « plug-in » du hub un jour, on pourra rapprocher le header turquoise. Pour le MVP, la séparation nette me semble le bon compromis.

Suite de la série

• Choix Gemini et quotas free tier (article dédié)
• Stockage Neon et dédup sujet
• Stratégie de repopulation
• Format JSON et double passe de validation

Quiz en prod : andrewchicout.dev.