Le verre, les rayons, les ombres et le mouvement appartiennent à Relaytour et ne changent pas. Chaque organisation fournit sa palette, ses polices et son fond. Les couleurs de cette page viennent directement des jetons du code.
La référence écrite est dans docs/design-system.md.
Le premier arc prend la primaire, le second l'accent. Chaque extrémité passe au-dessus de l'autre arc. Le nom s'écrit en Baloo 2 SemiBold, « Relay » en encre et « tour » en accent de texte.
Le trait mesure 8 sur une grille de 64 jusqu'à 64 pixels. Les grandes icônes portent un trait de 9.
La version monochrome sert les pieds de page et la mention « Propulsé par Relaytour ». Le nom y garde une seule couleur.
Sur l'encre, le premier arc et « Relay » passent en blanc. Le second arc et « tour » passent en accent éclairci.
Dates, heures, identifiants et comptes. Jamais un titre. Baloo 2 SemiBold ne sert que le logotype. Les trois familles sont embarquées, sous licence OFL. Aucune police n'est servie par un tiers.
Le tableau est calculé depuis les jetons à chaque génération du site. Chaque couleur de texte atteint au moins 4,5:1 sur le blanc et sur la bande dense du sol.
| Rôle | Valeur | Sur blanc | Sur le sol | Niveau |
|---|---|---|---|---|
| Encre | #1B2730 | 15,2:1 | 13,0:1 | AAA |
| Primaire | #1E5A63 | 7,8:1 | 6,7:1 | AA |
| Accent | #AD412B | 5,9:1 | 5,0:1 | AA |
| Accent de texte | #7E3A24 | 8,3:1 | 7,1:1 | AAA |
| Succès | #3A7042 | 5,9:1 | 5,0:1 | AA |
| Alerte | #8A5A0E | 5,9:1 | 5,1:1 | AA |
| Erreur | #B0283F | 6,5:1 | 5,6:1 | AA |
| Rôle | Valeur | Sur blanc | Sur le sol | Niveau |
|---|---|---|---|---|
| Encre | #1B2730 | 15,2:1 | 13,0:1 | AAA |
| Primaire | #1B2730 | 15,2:1 | 13,0:1 | AAA |
| Accent | #136D6C | 6,1:1 | 5,2:1 | AA |
| Accent de texte | #165658 | 8,4:1 | 7,2:1 | AAA |
| Succès | #3A7042 | 5,9:1 | 5,0:1 | AA |
| Alerte | #8A5A0E | 5,9:1 | 5,1:1 | AA |
| Erreur | #B0283F | 6,5:1 | 5,6:1 | AA |
Le texte d'une carte, le texte secondaire, le texte muet et les filets sont des transparences de l'encre, jamais des gris nouveaux.
La couleur d'un périmètre vient du contenu de l'organisation. Le texte reprend cette couleur, assombrie vers l'encre jusqu'à 4,5:1.
Panneaux, cartes de fiche, formulaires. Blanc de 80 à 44 %, flou de 22 px, liseré blanc et ombre d'encre.
--rt-verreCartes de tâche et lignes du rétroplanning. Blanc de 92 à 76 %, pour que le sol ne gêne pas la lecture.
--rt-verre-carteUn seul élément mis en avant par écran. Un voile blanc posé sur la primaire à 16 %.
--rt-verre-teinteUn fond blanc disparaît sur le verre. La surface prend un voile d'encre à 3,5 %, un filet à 10 % et une ombre douce.
Les ombres prennent la teinte de l'encre. Le mouvement suit une courbe fluide, sans rebond, de 140 à 400 ms.
Ces composants servent les écrans des membres et ceux de l'administration. Ils habillent les composants d'Ant Design sans les réécrire.
La primaire crée et valide. L'accent est réservé à l'engagement d'une personne. Il colore des surfaces et des traits, jamais un texte : un texte qui le reprend s'écrit en accent de texte.
Un groupe exclusif se lit en encre pleine. Une bascule active se lit en primaire clair.
Un point et un libellé sur un fond clair de la même teinte. Le retard reste une brique sourde.
La barre empile les tâches faites et en cours. Sa légende compte chaque statut.
Les quantités dépendent des inscriptions closes le 10 février.
Deux navettes entre la gare et le site, de 7 h à 10 h.
Le rail porte la couleur du périmètre. Une tâche à prendre reçoit le verre teinté et l'action d'engagement.
| Jeton | Valeur |
|---|---|
| colorPrimary | primaire du thème |
| colorText | encre |
| colorTextSecondary / Tertiary | encre à 78 % / 64 % |
| colorBgContainer | blanc à 62 %, verre panneau |
| borderRadius / LG | 10 / 20 |
| Button.borderRadius | pilule, ombre colorée à 28 % sur la primaire |
| Menu.itemSelectedBg | encre, texte blanc |
| Card | verre panneau, sans bordure |
Une organisation déclare son thème dans son fichier organisation.yaml. Elle choisit ses couleurs, ses polices parmi les familles embarquées, la typographie de ses titres et son fond. La validation refuse une couleur de texte sous 4,5:1 et un halo trop intense.