⚙️ Tweaks
Vitesse animations
Variante hero
Design
System
KCS
v1.1.0 · Avril 2026

La source de vérité design de Karma Com Solidarité. Une marque. Un système. Zéro dérive.

Scroll

Le problème

Sans DS, la marque dérive.

Chaque bénévole réinvente. Couleurs approximatives, polices mélangées, logos déformés.

Couleurs incohérentes

4 "roses" différents sur 4 visuels.

Typographies mélangées
Titre en Georgia
Corps en Arial
IMPACT POUR UN CTA
Logo déformé
KCS

Étiré, recoloré, encadré. Reconnaissance nulle.

"Sans DS, chaque bénévole réinvente. Résultat : marque diluée."

La solution

1 source de vérité.
4 scripts. 1 CI. 0 dérive.

0
Source de vérité
0
Scripts CI
0
Score DS /100
∞
Dérives en prod

Palette canonique

6 couleurs. Pas une de plus.

Chaque couleur a un rôle, un usage et des règles de contraste WCAG AA vérifiées automatiquement.

Rose primaire
#CC336F
CTA, liens actifs, accents forts.
Texte : blanc #FFF
Ratio 4.92:1 ✅
Bleu nuit
#073A4C
Titres, navigation, fonds sombres.
Texte : blanc #FFF
Ratio ~12:1 ✅
Jaune accent
#FFC300
Badges, highlights.
JAMAIS texte blanc dessus
Texte : #222 obligatoire ✅
Lavande
#E8D5F2
Fond de page clair, brand kit.
Texte : #222
Noir de marque
#222222
Texte, bordures, ombres hard.
JAMAIS #000000 pur
Crème
#FFF2E2
Fond principal, cartes sur sombre.
Texte : #222

Typographie

Deux polices. Un système.

Work Sans Bold
Display 72px / 900
H1 36px / 900
Body 16px / 500 — corps principal
Label 12px / 800 UPPERCASE
Lexend Deca — alternative accessible A11Y

Composants

Tous les blocs. Prêts à l'emploi.

Clique — tout est interactif. Ce sont les vraies classes CSS du DS.

Boutons — 6 variantes
Badges — états système
Succès Alerte Erreur Info
Input
Card
Titre de la carte
Contenu avec ombre hard, border 2px, radius 16px.
Tabs
Contenu de l'onglet actif.
Stepper
✓
2
3
InfosRevueMerge
Empty state
📭
Rien ici
Crée le premier élément pour commencer.
Skeleton / loading

Règles sacrées

4 règles. Pas de dérogation.

🎨
Blanc sur jaune
❌ Texte blanc
✅ Texte #222
⬛
Noir pur interdit
❌ #000000
✅ #222222 — noir de marque
💡
Ombre hard uniquement
❌
blur > 0
✅
blur = 0
🎯
Focus ring 3px
❌ Pas de focus visible
✅ outline: 3px solid #222;
outline-offset: 3px;
box-shadow: none;

Gouvernance

Qui valide quoi.

Chaque changement passe par CI + CODEOWNERS avant de merger.

👤
Bénévole
→
📝
Ouvre une PR
→
🤖
CI (5 scripts)
→
🔐
CODEOWNERS
→
✅
Adel valide
→
🚀
Merge main

Outillage

Le CI protège tout.

5 scripts. 0 faux positif. Toute dérive bloque automatiquement la PR.

$ npm run validate

Contribuer

3 étapes. Pas une de plus.

01

Lis le skill injectable

Toutes les règles sont dans skill/claude-design-injectable-prompt.md

5 min de lecture
02

Ouvre une PR

CSS + registre dans le même commit. Le CI bloque si l'un des deux manque.

github.com/Karma-Com-Solidarite/kcs-design-system
03

Attends la review Adel

CODEOWNERS auto-assigne. Review sous 72h max.

Délai garanti

Ressources

Tout est là.

⚙️
Repo GitHub
kcs-design-system — tokens, CSS, scripts CI, CHANGELOG
🧠
Skill injectable
Prompt complet pour Claude Design — 14 sections, registre composants
📋
Gouvernance
Rôles, violations bloquantes, convention adoption apps
📅
CHANGELOG
v1.1.0 — score 93/100, historique complet des corrections
🌐
Site KCS
assokcs.org — le DS en action
✨
Claude Design
Hub CLD — génération visuels guidée par le DS KCS

Merci de protéger la marque KCS.

Karma Com Solidarité · Association loi 1901

Design System v1.1.0 · 93/100