Beckerich Design System

Prévisualisation interactive des composants et tokens

Palettes de couleurs

Primary (Bleu institutionnel)

50
100
200
300
400
500
600 ⭐
700
800
900
950

⭐ Couleur principale (#005592)

Secondary (Jaune/Or accent)

50
100
200
300
400
500
600 ⭐
700
800
900
950

⭐ Couleur accent (#E6C00F)

Accent (Bleu ciel/Liens)

50
100
200
300
400
500 ⭐
600
700
800
900
950

⭐ Couleur liens (#53A2DC)

Success

100
300
500 ⭐
700
900

Warning

100
300
500 ⭐
700
900

Error

100
300
500 ⭐
700
900

Neutral (Grayscale)

100
300
600
800 ⭐
900

Typographie

Proxima Nova (Police principale et secondaire)

Beckerich utilise Proxima Nova pour tous les textes (titres et corps)

Proxima Nova Light 300 - Titres légers

Proxima Nova Regular 400 - Titres standards et corps de texte

Proxima Nova Medium 500 - Titres moyens

Proxima Nova Semibold 600 - Titres H2-H4

Proxima Nova Bold 700 - Titres H1

Proxima Nova Extrabold 800 - Emphase forte

Échelle typographique (Responsive)

Les tailles s'adaptent automatiquement : Mobile (<768px) / Tablet (768-1023px) / Desktop (≥1024px)

H1 - Mobile: 35px / Tablet: 40px / Desktop: 45px - Bold / Proxima Nova

Titre de niveau 1

H2 - Mobile: 30px / Tablet: 30px / Desktop: 35px - Semibold / Proxima Nova

Titre de niveau 2

H3 - 25px / 32px - Semibold - Tous breakpoints / Proxima Nova

Titre de niveau 3

H4 - 20px / 29px - Semibold - Tous breakpoints / Proxima Nova

Titre de niveau 4

Body Big - Mobile: 20px / Tablet+: 22px / Regular / Proxima Nova

Paragraphe grande taille pour introductions et emphases importantes.

Body - 18px toutes tailles / 28px line-height / Regular / Proxima Nova

Paragraphe standard pour le corps de texte principal des pages.

Body Small - 16px toutes tailles / 24px line-height / Regular / Proxima Nova

Paragraphe petit pour notes de bas de page et métadonnées.

Category - 14px toutes tailles / 23px line-height / Semibold / Proxima Nova

CATÉGORIE / TAG

Boutons

Les boutons utilisent un système de hover contextuel basé sur la couleur de fond du conteneur.

Variante: Fond blanc (défaut)

Hover: couleurs plus claires

Primary Button (Jaune/Or)

Secondary Button (Bleu ciel)

Third Button (Bleu foncé/Primary)

Outline Button

Text Button (Link)

Tailles variées

Variante: Fond bleu

Hover: blanc pour contraste maximal

Primary Button (Jaune/Or) - Hover blanc

Secondary Button (Bleu ciel) - Hover blanc

Third Button (Bleu foncé) - Hover blanc

Note: Sur fond bleu 600, le bouton utilise primary-800 pour contraste

Formulaires

Cartes

Philosophie Beckerich : Privilégier bordure + pas d'ombre pour style institutionnel épuré.

Variantes recommandées

Carte standard (recommandé)

Sans ombre

Bordure uniquement. Style institutionnel épuré.

Carte interactive

Ombre au hover

Ombre apparaît seulement au survol. Survolez-moi !

Carte highlight

Bordure bleue

Mise en avant avec bordure de couleur primaire.

Cartes cliquables

Carte lien

Bordure change + ombre au hover. Feedback visuel clair.

Carte non-interactive

Aucun effet au survol. Simple conteneur d'information.

Badges & Tags

Catégorie Succès Alerte Erreur Neutre Accent

Alertes & Messages

Information

Ceci est un message informatif pour l'utilisateur.

Succès

Votre action a été effectuée avec succès.

Avertissement

Attention, cette action nécessite votre confirmation.

Erreur

Une erreur s'est produite, veuillez réessayer.

Ombres (Shadows)

Philosophie Beckerich : Utilisation très modérée des ombres. Privilégier les bordures.

Valeurs recommandées par composant

Recommandé: Cards: shadow-none + border
Recommandé: Buttons: shadow-none
Hover cards: shadow-sm ou shadow-md
Modals: shadow-lg
Dropdowns: shadow-md
Navigation: shadow-none

Échelle des ombres disponibles

shadow-none ⭐

Défaut Beckerich

shadow-sm

Très légère

shadow

Légère

shadow-md

Moyenne

shadow-lg

Grande

shadow-xl

Très grande

Border Radius (Coins arrondis)

Philosophie Beckerich : Privilégier les angles carrés avec quelques exceptions.

Valeurs recommandées par composant

Recommandé: Cards: rounded-card (0px)
Exception: Buttons: rounded-button (3px)
Exception: Inputs: rounded-input (3px)
Badges: rounded-sm (2px)
Modals: rounded-card (0px)
Images: rounded-card (0px)

Échelle des arrondis disponibles

rounded-card ⭐

0px (défaut)

Cards, sections

rounded-sm

2px

Badges

rounded-button

3px

Buttons, inputs

rounded-full

9999px

Cercles, avatars

rounded-none

0px

Explicite