Documentation
Design system codemaroc
Les fondations et les composants utilisés dans toute l'application. Une seule couleur d'action (bleu), des bordures fines, des rayons de 8 px, la police Source Sans 3 et aucun emoji : l'interface doit rester sobre et lisible pour se concentrer sur le contenu.
Fondations
Couleurs sémantiques, rayons, ombres et icônes. Les composants n'utilisent que ces valeurs.
Primaire
#0056d2
Actions, liens, sélection
Primaire survol
#00419e
Survol des boutons primaires
Bleu 50
#f0f6ff
Fonds de sélection, en-têtes
Panneau
#f2f5fa
Conteneurs de listes
Texte
#1f1f1f
Titres et texte principal
Texte secondaire
#5b6780
Descriptions, méta-données
Bordure
#dae1ed
Cartes, séparateurs
Succès
#1f8354
Bonne réponse, réussite
Erreur
#d30001
Mauvaise réponse, alerte
Avertissement
#8a5300
Astuces, pièges
Bleu nuit
#002761
Bandeau chiffre clé
Pied de page
#f5f7f8
Fond du pied de page
Rayons
4 px
Boutons, champs
8 px
Cartes
12 px
Bandeaux
Élévation
Icônes des axes (Lucide, trait 2 px)
Typographie
Source Sans 3 pour le latin, Noto Sans Arabic pour l'arabe. Graisses : 400 (texte), 600 (titres, boutons), 700 (logo).
Display · 40/46 · 600
Prépare ton code en confiance
H1 · 34/40 · 600
Règles de priorité
H2 · 24/30 · 600
Les panneaux de danger
H3 · 20/26 · 600
Ton programme du jour
H4 · 16/22 · 600
Chapitres à retravailler
Corps · 16/24 · 400
Pour tourner à gauche, je dois céder le passage aux véhicules qui arrivent en sens inverse.
Petit · 14/20 · 400
Fiche · 8 sections · 6 min · 33 panneaux
Surtitre · 12 · 600 · capitales
Schéma interactif
Arabe · Noto Sans Arabic
علامات الخطر والأسبقية
Lien
Boutons
Un seul bouton primaire par zone. Le secondaire (contour bleu) accompagne, le tertiaire sert aux actions de moindre importance.
Étiquettes et puces
Badge
Compteur
Puce (filtre)
Formulaires
Cartes
Carte produit (catalogue), ligne de liste dans un panneau, carte d'action et tuile de chiffre.
Bandeaux
Bandeau principal
Fond sombre, une action inversée.
Bandeau clair
Pour la reprise d'une activité.
Bandeau dégradé (bleu → vert) pour mettre en avant un programme
Bandeau chiffre clé
Une seule donnée forte.
Retours et états
Information
Message neutre pour guider.Bonne réponse
Feedback positif.Attention
Point de vigilance.Réponse incorrecte
Feedback d'erreur.État vide
Explique pourquoi il n'y a rien et propose une action.
Quiz
Option de réponse : sélection, bonne réponse, erreur et réponse manquée.