Charte Graphique & Composants Standards

Documentation complète de la charte graphique et des composants UI standardisés utilisés sur le site de l'École de Musique des Portes d'Ariège.

Palette de Couleurs

Velours de rideau

#2a0003

Fond des headers uniquement

Laiton des instruments

#af8946

Couleur des titres H1, H2, H3...

Ligne des partitions

#1e1e1e

Corps de texte principal

Papier

#ffffff

Fond blanc dominant

Argent des instruments

#fafafa

Fond gris très très clair

Typographie

Titre H1 - Montserrat Bold

Titre H2 - Montserrat Bold

Titre H3 - Montserrat Bold

Titre H4 - Montserrat Bold

Titre H5 - Montserrat Bold
Titre H6 - Montserrat Bold

Corps de texte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texte secondaire plus petit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Liens dans le texte

Exemple : cours à Saverdun ou à Mazères — voir les Infos pratiques.

Composant Button

Variantes

Tailles

États

Lien

Composant Card

Card Default

Carte avec style par défaut et padding moyen.

Card Outlined

Carte avec bordure pour plus de définition.

Card Large

Carte avec padding large pour plus d'espace.

Card Double Ligne

Carte avec contour en double ligne, même épaisseur et espacement que la charte graphique.

Composant Section

Variantes de fond

Section par défaut (fond blanc)

Section avec fond beige

Section avec fond gris clair

Section avec fond header (rouge foncé)

Composant Separator

Séparateurs horizontaux

Séparateur noir (par défaut)

Motifs Musicaux

Points des Notes (MusicalDots)

Fond avec points serrés

Lignes des Partitions (MusicalLines)

Fond avec lignes fines

Lignes à 45° (sens normal)

Lignes à 45° (sens inverse)

Formes Trapèze

Trapèze normal

Trapèze inversé

Retour au site

Cette page est destinée aux développeurs et designers pour maintenir la cohérence du site.