forked from ORGANISATION-KA-INTERNATIONALE/FEDIVERSE-OKI
214 lines
13 KiB
Markdown
214 lines
13 KiB
Markdown
|
# 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.
|