Top Chrono — Design System

La passion du courrier express

v1.0.0 · publiée le 15 juin 2026

Couleurs — Marque

primary
#DC143C
primary-hover
#C71236
primary-active
#B0102E
primary-subtle
#FCE8EC

Neutres

white
#FFFFFF
gray-100
#F8F9FA
gray-200
#E9ECEF
gray-300
#DEE2E6
gray-400
#CED4DA
gray-500
#ADB5BD
gray-600
#6C757D
gray-700
#495057
gray-800
#343A40
gray-900
#212529

Sémantique

success
#28A745
warning
#F39C12
danger
#DC3545
info
#0D6EFD

Typographie — Inter

4xl · 36pxTop Chrono
3xl · 30pxTop Chrono
2xl · 24pxTop Chrono
xl · 20pxTop Chrono
lg · 18pxTop Chrono
base · 16pxLivraison de courrier express à Cotonou.
sm · 14pxLivraison de courrier express à Cotonou.
xs · 12pxLivraison de courrier express à Cotonou.
Regular 400 Medium 500 Semibold 600 Bold 700

Espacement — rythme 4 / 8

space-1 · 4px
space-2 · 8px
space-3 · 12px
space-4 · 16px
space-5 · 20px
space-6 · 24px
space-8 · 32px
space-10 · 40px
space-12 · 48px
space-16 · 64px

Rayons

radius-sm · 4px
radius-md · 6px
radius-lg · 8px
radius-xl · 12px
radius-pill
radius-circle

Ombres

shadow-sm
shadow-md
shadow-lg

Composants — Boutons

Primaire plein (crimson) · secondaire en contour neutre · destructif en contour + icône — jamais deux rouges pleins côte à côte.

Composants — Badges & Alertes

Express Livré En attente Échec Information
Le colis a bien été livré.
La livraison est en attente de prise en charge.
Échec de la livraison — adresse introuvable.
Un nouveau coursier a été assigné à cette tournée.

Composants — Formulaire & Carte

Tournée du jour
12 colis · zone Cotonou-Est
ColisDestinataireStatut
#TC-1042K. AdjoviLivré
#TC-1043S. HounkpeEn attente
#TC-1044M. DossouÉchec

Composants — Navigation (coque)

Colis SF
‹ 1 2 3 ›

Sidebar foncée, navbar neutre, pagination — le crimson ne marque que l'élément actif (item « Colis », page « 2 »). Trois niveaux de boutons : primaire · secondaire neutre · tonal.

Composants — Champs de formulaire (états)

Repos — état par défaut.

Focus — anneau crimson.

Adresse email invalide.

Désactivé.

Composants — Tableau

Colis Destinataire Statut Actions
#TC-1042K. Adjovi Livré
#TC-1043S. Hounkpe En attente
#TC-1044M. Dossou Échec

Ligne sélectionnée (crimson subtle), en-tête trié (icône crimson), survol, badges de statut, boutons d'action — tout dérive des tokens.

Composants — Carte

Fiche client
Mme Ahyité — compte commercial actif depuis 2023. Zone : Cotonou-Est.

Trois zones : en-tête (titre + action), corps, pied (actions). Bordure et rayon issus des tokens.

Composants — Dropdown (menu d'action)

Actions
Voir la fiche
Modifier
Dupliquer
Supprimer

Menu d'action (à ne pas confondre avec un select). Item courant en crimson subtle, item destructif en danger. Affiché ouvert pour la démo.

Composants — Modale (confirmation destructive)

Supprimer ce client ?
Cette action est irréversible. Toutes les données associées seront perdues.

Rayon xl, ombre lg. Au moment de confirmer, le rouge plein danger est légitime (aucun primaire ne lui fait concurrence) — et il porte son icône.