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)

: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

: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

: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é.

.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é :

: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.