Exercice Dark Academia¶

Design Tokens: Création de votre palette "Dark Academia"¶

Contexte¶

Vous créez l'interface pour une app de lecture de livres classiques, inspirée de l'esthétique "Dark Academia" (bibliothèques anciennes, tons chauds, élégance vintage).

Aperçu du résultat¶

Objectifs¶

Créer un système de design tokens (jetons de conception) cohérent
Utiliser des unités relatives
Appliquer les fonctions CSS (calc, clamp)

Consignes de base¶

1 . Créez des design tokens (jetons de conception) pour :

Couleurs : Palette Dark Academia (bruns, beiges, vert forêt, bordeaux)
- Au moins 3 couleurs principales avec variations (ex: --color-primary-400, --color-primary-500, --color-primary-600)
Espacements : Système cohérent (au moins 5 valeurs : 4px, 8px, 16px, 24px, 32px)
Typographie : 4 tailles de police (sm, base, lg, xl)
Bordures : 3 rayons de bordure (sm, md, lg)

2 . Créez une carte de livre avec :

Titre du livre (utilisez clamp() pour taille fluide)
Auteur
Citation du livre
Bouton "Commencer la lecture"
Utilisez uniquement vos design tokens (pas de valeurs en dur)
Tous les espacements en rem

Fichier de départ¶

IMPORTANT : Connectez-vous à CodePen d'abord et par la suite faire un fork du Pen de départ pour l'enregistrer dans votre compte et archiver votre exercice.

Pen de départ

🚀Vous êtes super rapide?¶

Voici des bonus pour vous rendre encore plus fort 💪 !

⭐ BONUS 1 - Mode clair/sombre¶

Trop avancé, faites les autres bonus/défis avant celui-ci.

Ajoutez un bouton qui bascule entre un thème clair et sombre en changeant les valeurs des variables CSS.

Danger

Attention, si vous faites ce bonus, demandez à la professeure de vous fournir le JavaScript nécessaire et peut-être quelques guides CSS.

⭐⭐ BONUS 2 - Typographie fluide avancée¶

Créez un système de typographie entièrement fluide où TOUTES les tailles de police utilisent clamp() pour s'adapter à la taille de l'écran.

C'est à dire que le clamp() est utilisé dans la défintion de vos variables dans le :root.

⭐⭐⭐ DÉFI 3 - Système complet¶

Ajoutez des tokens pour :

Ombres (box-shadow)
Durées d'animation
Épaisseurs de bordure
Créez 3 variantes de cartes (petite, moyenne, grande) qui utilisent tous les mêmes tokens

Remise¶

Remettre le lien de votre CodePen complété dans le Devoir Teams nommé: c4-dark-academina. Si vous ne l'avez pas terminé pendant le cours, vous devrez le terminer en devoir et le remettre avant le cours 5.

📚 Notes de cours¶

📚 Variables, unités relatives & fonctions