annu-kute-ced/doc2sveltekit-transition/charte-oki-design-system.md

# CHARTE OKI — DESIGN SYSTEM & HARMONISATION MULTI-PROJETS
### ORGANISATION KA INTERNATIONALE · appliquer la recette SvelteKit avec la marque OKI

> **Nature de ce document :** référence de marque opérationnelle, destinée aux humains et aux agents de code. Il consolide le `BRAND.md` existant (valeurs mesurées sur o-k-i.net, juillet 2026 — **source canonique** pour couleurs, typo, voix) et y ajoute les tokens prêts à l'emploi, les règles de motion, l'iconographie SVG, et la matrice d'application projet par projet. **En cas de conflit : ce document prime sur la recette générique pour tout ce qui touche à la marque ; la recette prime pour tout ce qui touche à la méthode technique.**

---

## 1. IDENTITÉ EN UNE PHRASE

Un studio web militant caribéen dont la marque est un **drapeau panafricain — noir, or, vert, rouge — posé sur un fond presque noir, en capitales Archivo**. La marque est afrofuturiste caribéenne : un drapeau, pas une charte corporate.

Trois conséquences non négociables :
1. **Le thème sombre est l'identité par défaut** ; le clair est une variante opt-in (`html.light-theme`) qui assombrit les accents pour rester WCAG AA.
2. **L'or porte toute l'interaction** — c'est la seule couleur d'action.
3. **Angles nets partout** — aucune forme organique, aucune bulle très arrondie.

---

## 2. TOKENS — PRÊTS À L'EMPLOI

### 2.1 Couleurs (mesurées sur le site réel)

```css
:root {
  /* ── Noyau (thème sombre = défaut) ── */
  --noir-oki:        #0D0D0D;  /* background */
  --noir-profond:    #1A0F1A;  /* surface */
  --blanc-creme:     #FFF8E7;  /* foreground */
  --line:            rgba(255, 255, 255, 0.10); /* filets — jamais de gris plein */
  --or-oki:          #FDB813;  /* accent : SEULE couleur d'action */
  --rouge-oki:       #FF1654;  /* signal, ponctuation — jamais un lien/bouton */
  /* ── Étendue (parcimonie : décorations et sémantique) ── */
  --vert-oki:        #00D66C;  /* succès, validation, dons mensuels */
  --turquoise-caraibes: #00CED1;
  --jaune-soleil:    #FFD700;
  --orange-flamme:   #FF6B35;
  --violet-nuit:     #6B2D5C;
  --bleu-ocean:      #0077BE;
  --or-clair:        #FFE066;  /* survol des boutons */
  --gris-sombre:     #2D1B2E;
  /* ── Sémantique dérivée ── */
  --muted:           color-mix(in srgb, var(--blanc-creme) 70%, transparent);
  --card-bg:         rgba(255, 255, 255, 0.03);
}
```

Règles d'usage (mesurées, à faire respecter) :
- Texte secondaire = blanc crème à 70–85 % d'opacité, **pas** une couleur dédiée.
- Filets = blanc à 10 %, jamais de gris plein.
- Rouge = signaler · Vert = valider · Or = agir. Ne jamais permuter ces rôles.

### 2.2 Typographie

```css
:root {
  --font-display: 'Archivo', 'Arial Black', sans-serif;   /* 600–900, TITRES + BOUTONS */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* 400–800 */
}
```
- Titres h1–h4 : Archivo, **MAJUSCULES**, `letter-spacing: -0.01em`.
- Boutons : Archivo 700, uppercase, `letter-spacing: 0.03em`, bordure 2 px.
- Corps : Inter, `line-height: 1.5`. Graisses minimales : 400 body / 600 display (lisibilité écrans bas de gamme).
- **Self-hébergement obligatoire** : woff2 dans `fonts/` + `fonts/fonts.css`, `font-display: swap`. Aucun appel Google Fonts (contradiction avec la doctrine souveraineté — bug en cours de correction sur o-k-i.net).

### 2.3 Formes, espacements, layout

```css
:root {
  --radius-sm: 3px;   /* boutons, tags, badges */
  --radius-md: 6px;   /* cartes — jamais plus */
  --border-card: 1px solid var(--line);
  --border-btn:  2px solid var(--or-oki);
  --space-1: 0.75rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 4rem;
  --container: 1200px;
}
```
- Sections : `padding: var(--space-5) var(--space-4)` · Grille : `repeat(auto-fit, minmax(300px, 1fr))`.
- **Carte OKI canonique** : fond blanc 3 %, liseré gauche 4 px d'accent (vert ou or), survol `translateY(-2px à -4px)` + bordure d'accent.
- **Tag OKI canonique** : fond or 8 % + bordure or 1 px, rayon 3 px.

### 2.4 La flag-bar — signature n°1

Bandeau **6 px, 4 segments francs** : noir 0–25 % · or 25–50 % · vert 50–75 % · rouge 75–100 %. Arrêts nets, **jamais de dégradé**.

```css
.flag-bar {
  height: 6px;
  background: linear-gradient(to right,
    var(--noir-oki) 0 25%, var(--or-oki) 25% 50%,
    var(--vert-oki) 50% 75%, var(--rouge-oki) 75% 100%);
}
```
Placement : bord inférieur de la navigation fixe ; peut ponctuer un héros ou un pied de page. **Une occurrence visible par écran maximum.** C'est l'élément le plus reconnaissable de la marque — le diluer, c'est le tuer.

### 2.5 Logotype

Monogramme « OKI » : arche or, point vert, accent rouge sur noir. Fichier canonique `logos/favicon-1.png` (512×512, transparent — aussi og:image et apple-touch-icon) ; déclinaisons `logos/favicon-0.ico`, `assets/maskable_oki.png`. Les `logos/header-img-*` sont des marques de **partenaires** (Joukawouvè, Aktivist Vybz, cyber-mawonaj, KA UBUNTU) : provenance conservée, **ne jamais les utiliser comme logo OKI**.

---

## 3. MOTION OKI — LES CADENCES GWOKA

La marque ne bouge pas comme une startup : elle pulse comme un ka. Tokens obligatoires dans tout projet OKI animé :

```css
:root {
  --ease-ka:      cubic-bezier(0.22, 1, 0.36, 1);  /* temps fort : attaque franche, longue tenue */
  --ease-syncope: cubic-bezier(0.65, 0, 0.35, 1);  /* contretemps : symétrique, urgent */
  --dur-tanbou:   120ms;   /* double-croche — micro-interactions, hovers */
  --dur-mesure:   480ms;   /* une mesure — entrées de section */
  --dur-phrase:   960ms;   /* deux mesures — transitions de page */
}
```

Règles de motion :
1. **Le stagger de marque OKI est syncopé (3+3+2)**, pas linéaire : délais `[0, 120, 300, 360, 600, 660, 900, 960]` ms pour 8 éléments. C'est subtil — c'est le but : le rythme est une identité, pas un effet.
2. Uniquement `transform` + `opacity` (recette P3/budgets).
3. `prefers-reduced-motion` : gate unique au provider, contenu statique complet (le site actuel n'a **aucune** garde — à corriger partout).
4. Durées toujours lues depuis les tokens, jamais hardcodées.

---

## 4. ICONOGRAPHIE — LA RÈGLE « ZÉRO EMOJI EN PRODUCTION »

Le site actuel utilise des emojis (✊🏿🔓🤝🏿🛡️) : rendu dépendant de l'OS, incohérent avec la précision du drapeau. **Tout projet harmonisé remplace les emojis par le set SVG OKI.**

Spécifications du set :
- ViewBox 24×24, **stroke 2 px**, angles nets (pas de courbes organiques), une seule couleur : `currentColor` (or par défaut sur noir).
- Remplissage réservé aux pictogrammes ≤ 16 px.
- Grille de nommage en KA : les fichiers portent des noms kréyòl.

Set initial à produire (correspondances avec l'existant) :

| Fichier | Sujet | Remplace / usage |
|---|---|---|
| `ka.svg` | tambour ka | icône maîtresse, 404, loader |
| `lambi.svg` | conque lambi | communication, annonces, « bòkaz » |
| `zetwal.svg` | étoile 4 branches | navigation, favoris, instances fédivers |
| `mawon.svg` | silhouette/brisure de chaîne stylisée | souveraineté, valeurs |
| `lakanmou.svg` | flamme | engagement, dons ponctuels |
| `jaden.svg` | pousse/jardin | solidarité, lakou, projets |
| `kannen.svg` | canne à sucre stylisée | patrimoine, histoire |
| `lanme.svg` | vague | océan, liens internationaux, Réunion↔Gwada |
| `glo.svg` | poing levé géométrique | ✊🏿 — luttes, tarifs solidaires |
| `kle.svg` | clé/cadenas ouvert | 🔓 — liberté, open-source |
| `pawol.svg` | bulle de parole angulaire | langues, traduction, PAWÒL-NU |
| `mizik-note.svg` | note de musique | MIZIK, DJANGOKAM |

Chaque picto livré en `<symbol>` dans un sprite `icons.svg` + usage `<svg><use href="icons.svg#ka"/></svg>` (une seule requête, stylable en CSS).

---

## 5. VOIX & TON (canonique, reprise du BRAND.md)

Vouvoiement direct et empathique, phrases courtes. On parle d'abord de la cause du visiteur — « Vous luttez, vous organisez, vous mobilisez » — puis de l'outil. La technique sert la lutte, jamais l'inverse.

- **À dire :** sur mesure · tarifs adaptés à vos moyens · organisations engagées · transition numérique · écosystème numérique libre · à la hauteur.
- **À éviter :** « template générique », jargon corporate/marketing, « clé en main », startup-speak.
- Piliers : ORGANISATION KA · INTERNATIONALE · Des solutions pour chaque besoin · Le budget ne doit jamais être un frein.
- **Langues :** FR par défaut ; le KA (kréyòl) en signature, titres de sections symboliques et microcopy (404, loader, remerciements) ; EN en version dédiée. Attribut `lang` correct à chaque bascule.

## 6. IMAGERIE (canonique)

Illustration numérique afrofuturiste caribéenne : scènes au coucher de soleil, personnages caribéens, pochettes musicales typographiées. Couleurs chaudes saturées sur fonds sombres. **Jamais** de photo de banque d'images corporate, jamais d'illustration générique de startup, jamais d'icône ou de logo en guise d'image. Formats : AVIF/WebP, self-hébergés, `loading="lazy"` hors LCP.

---

## 7. MATRICE D'APPLICATION PAR PROJET

Harmoniser ≠ tout refaire : chaque plateforme a un canal de personnalisation officiel. N'UTILISER QUE ces canaux (jamais de fork pour du style).

| Projet | Logiciel | Canal de theming | Application OKI |
|---|---|---|---|
| **o-k-i.net** | SvelteKit (migration en cours) | Natif | Référence absolue : tokens §2, flag-bar, village SVG, KineticText gwoka |
| **BOKANTE** | Mastodon | CSS personnalisé admin + `custom.css` | Variables Mastodon remappées sur tokens OKI : fond `--noir-oki`, accent `--or-oki`, boutons Archivo uppercase ; logo colonne = monogramme OKI ; flag-bar en haut de la colonne de composition |
| **GADE** | PeerTube | Thème CSS admin (champ « CSS personnalisé ») | Mêmes remappages ; player : contrôles or sur noir ; page À-propos = texte marque (« vidéos sans algorithme, dédiées aux cultures afro-diasporiques ») |
| **NIYAJ** | Nextcloud | App **Theming** officielle | Couleur primaire `#FDB813`, fond sombre, logo + slogan « Votre cloud, vos données » ; favicon OKI |
| **MIZIK** | Funkwhale | `custom.css` admin | Fond `--noir-oki`, accents or, player accentué or ; typographie : Inter si surchargeable, sinon système |
| **KUTE** | App PHP maison | Natif | Appliquer les tokens §2 en entier — c'est un projet first-party, aucune excuse de ne pas être au niveau d'o-k-i.net |
| **LABOLA** | Forgejo/Gitea | `custom/templates` + `custom/public/css` | Thème sombre OKI, accent or ; logo forge = monogramme ; **ne pas toucher aux templates Go au-delà du header/footer** (fragile aux upgrades) |
| **PAWÒL-NU / djangokam.pawol.nu / nyyoka.pawol.nu** | Selon stack | Natif | Charte complète + liberté artistique accrue (pochettes, kinetic type poussé) : c'est la vitrine culturelle, le motion peut y être plus riche qu'ailleurs |
| **fediverse.o-k-i.net** | Statique | Natif | **Constellation zétwal** : chaque instance = étoile SVG reliée, hover/focus = éclat or + label ; DOM/SVG léger uniquement |

### Le footer fédéré commun (tous les sous-domaines)

```
[monogramme OKI] Un service libre opéré par ORGANISATION KA INTERNATIONALE · o-k-i.net
```
+ flag-bar 6 px au-dessus du footer. Une seule ligne, `--muted`, lien or. C'est le fil rouge qui fait l'écosystème.

### Règles cross-projets

1. **Un domaine, une famille** : `*.o-k-i.net` = écosystème fédivers et outils ; `pawol.nu` = projets culturels/musicaux. Ne pas mélanger.
2. Chaque service porte un **nom KA + le nom du logiciel en sous-titre** (pattern existant : « BOKANTE — Mastodon », « NIYAJ — Nextcloud »). Ne jamais masquer le logiciel sous-jacent : la transparence est un pilier.
3. Favicon = monogramme OKI partout (déclinaisons ico/png/maskable).
4. og:image par service : monogramme sur `--noir-oki` + nom du service en Archivo or.
5. Toute nouvelle page statique du réseau démarre du template o-k-i.net (tokens inclus), jamais de zéro.

---

## 8. CHECKLIST D'HARMONISATION D'UN PROJET (DoD marque)

- [ ] Thème sombre par défaut, clair opt-in contrasté AA.
- [ ] Tokens §2 importés (pas de valeur recopiée à la main — un fichier `oki-tokens.css` partagé).
- [ ] Or = seule couleur d'action ; rouge/vert dans leurs rôles sémantiques.
- [ ] Archivo/Inter self-hébergées, zéro fonte externe.
- [ ] Flag-bar présente, segments francs, ≤ 1 par écran.
- [ ] Zéro emoji en interface (set SVG §4).
- [ ] Tokens motion §3 + gate `prefers-reduced-motion`.
- [ ] Footer fédéré + monogramme + favicon OKI.
- [ ] Voix conforme §5 (test : aucune occurrence de « clé en main », « solution innovante », « disruptive »).
- [ ] Zéro requête tierce au chargement (fonts, CDN, analytics) — vérifié onglet réseau.
- [ ] Nom KA + logiciel en sous-titre visible en page d'accueil du service.