# 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 `` dans un sprite `icons.svg` + usage `` (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.