1# ka-ui — design system commun Groupe KA23Identité « éditorial sharp » partagée par les 12 plateformes de l'écosystème4(groupe-ka, trouve-ka, lou-ka, immo-ka, vrai-prix, auto-ka, fabri-ka, food-ka,5resto-ka, sorti-ka, crea-ka, api-ka). Repo canonique : `spbgit` →6`https://git.spboucher.ai/ka-ui` (bare : `M3U96a:~/srv/git/ka-ui.git`).78## Contenu910| Fichier | Rôle |11|---|---|12| `tokens.css` | Tokens + socle de composants communs (typo, grille, boutons, cartes, chips, champs, badge Groupe KA, footer, tableaux responsive). Seules les variables `--accent*` changent d'un site à l'autre. |13| `accents.css` | Palette de référence : le bloc `:root` de chaque marque. |14| `ecosystem.json` | **Infos centralisées** : raison sociale, courriels de contact + rôles, avertissement d'agrégateur, pages légales du hub, liste des 12 sites (domaine, wordmark, accent, tagline), liens additionnels du footer. |15| `react/KaFooter.tsx` | Footer commun (fond encre) consommant `ecosystem.json`. |16| `react/GroupeKaBadge.tsx` | Badge « Un service Groupe KA » cliquable → hub (header). |17| `sync.sh` | Redistribue les fichiers vendorés dans les 12 apps SUR LES NŒUDS. |1819## Principes2021- **Design system identique partout** : papier `#f5f3ee`, encre `#141814`,22 Space Grotesk (titres) / Inter (texte) / JetBrains Mono (étiquettes),23 bordures encre + ombres décalées, rayons 10/6 px, grain de film.24- **Un seul degré de liberté par site : l'accent** (`--accent`, `--accent-soft`,25 `--accent-deep`, `--on-accent`). Alias rétro-compat : `--lime → var(--accent)`.26- **Breakpoints communs** : 360 / 768 / 1024 / 1440 px, mobile-first, zones27 tactiles ≥ 44 px, safe-areas iOS, `overflow-x: clip` sur body.28- **Logo Groupe KA** : wordmark typographique « Groupe KA » (KA sur puce encre,29 teinté accent) — déclinaison claire (`.gk-badge`) et sombre (`.gk-badge--dark`,30 footer encre). Toujours cliquable vers https://www.groupe-ka.com. Zone de31 protection : ≥ 8 px autour du badge, jamais moins haut que 30 px.32- **Titres SEO** : « {Marque} — Un service Groupe KA ».33- **KA ID** : la connexion de chaque site passe par `/api/auth/ka/login`34 (redirection vers `groupe-ka.com/sso/authorize`) ; la **création de compte se35 fait sur le hub** (`groupe-ka.com/connexion`). Registre des clients autorisés :36 `groupe-ka/src/lib/sso.ts` (+ secrets `KA_SSO_SECRET_<CLIENT>` dans le .env du hub).3738## Modifier les infos de contact (courriels, mentions, sites)39401. Éditer `ecosystem.json` **dans ce repo** (une seule source de vérité).412. Committer/pousser, puis exécuter `./sync.sh` depuis le laptop : il rsync42 `tokens.css` + `ecosystem.json` (+ composants) dans le dossier vendoré de43 chaque app sur son nœud (`frontend/src/ka/` pour les apps Vite,44 `src/ka/` pour les apps Next).453. Rebuilder chaque app touchée (`npm run build` du frontend) et46 `pm2 restart <app>` — voir `~/Desktop/cluster-skill/KA-REMOTE-DEV.md`.4748## Ajouter un futur site à l'écosystème49501. Ajouter son entrée dans `ecosystem.json` → `sites[]` (id, wordmark, domaine,51 accent choisi dans une teinte libre de la roue, tagline) et son bloc dans52 `accents.css`.532. Dans la nouvelle app : importer `tokens.css`, coller son bloc `:root`54 d'accent, monter `KaFooter` + `GroupeKaBadge`, titre « {Marque} — Un service55 Groupe KA ».563. KA ID : ajouter le client dans `groupe-ka/src/lib/sso.ts` + secret57 `KA_SSO_SECRET_<CLIENT>` dans le .env du hub ET de l'app ; implémenter58 `/api/auth/ka/login|callback` (modèle : `creaka/auth.py` pour FastAPI,59 `vrai-prix/src/lib/ka-auth.ts` pour Next).604. `./sync.sh` ajoutera le site aux footers des autres apps au prochain rebuild61 (la liste vient d'`ecosystem.json`).62