veille-ia-gen/doc2sveltekit-transition/BRAND.md

# ORGANISATION KA INTERNATIONALE — Guide de marque

Source mesurée : https://o-k-i.net/ (CSS et HTML réels, juillet 2026).
OKI développe des applications web sur mesure pour les associations, collectifs
et organisations militantes, avec des tarifs adaptés à leurs moyens. L'identité
est **afrofuturiste caribéenne** : un drapeau, pas une charte corporate.

## Identité en une phrase

Un studio web militant caribéen dont la marque est un drapeau pan-africain —
noir, or, vert, rouge — posé sur un fond presque noir, en capitales Archivo.

## Couleurs

Le **thème sombre est l'identité par défaut**. Le thème clair existe mais comme
variante opt-in (`html.light-theme`) qui inverse les rôles et assombrit les
accents pour WCAG AA.

| Rôle | Couleur | Hex | Variable d'origine |
| --- | --- | --- | --- |
| background | Noir OKI | `#0D0D0D` | `--noir-oki` |
| surface | Noir profond | `#1A0F1A` | `--noir-profond` |
| foreground | Blanc crème | `#FFF8E7` | `--blanc-creme` |
| muted | Crème atténué | `#B6B1A6` | dérivé : blanc crème à 70 % (le site utilise `opacity: 0.7–0.85`) |
| border | Ligne | `#262626` | dérivé : `rgba(255,255,255,0.1)` (`--line`) |
| accent | Or OKI | `#FDB813` | `--or-oki` |
| accent-secondary | Rouge OKI | `#FF1654` | `--rouge-oki` |

Palette étendue mesurée (à utiliser avec parcimonie, décorations et sémantique) :
vert OKI `#00D66C` (succès, dons mensuels), turquoise caraïbes `#00CED1`,
jaune soleil `#FFD700`, orange flamme `#FF6B35`, violet nuit `#6B2D5C`,
bleu océan `#0077BE`, or clair `#FFE066` (survol des boutons), gris sombre `#2D1B2E`.

Règles d'usage :

- L'**or `#FDB813` porte toute l'interaction** : liens, boutons, tags, survols,
  focus. C'est la seule couleur d'action.
- Le rouge `#FF1654` signale et ponctue ; le vert `#00D66C` valide. Ne jamais
  les substituer à l'or pour un lien ou un bouton principal.
- Texte secondaire : blanc crème à 70–85 % d'opacité, pas une couleur dédiée.
- Filets : blanc à 10 % d'opacité (`rgba(255,255,255,0.1)`), jamais de gris plein.

### Le « flag-bar » — signature graphique

Bandeau de 6 px à 4 segments **francs** : noir 0–25 %, or 25–50 %, vert 50–75 %,
rouge 75–100 %. Arrêts nets, **jamais de dégradé**. Il se place en bas de la
navigation et peut ponctuer un héros ou un pied de page. C'est l'élément de
marque le plus reconnaissable : l'utiliser une fois par écran, pas plus.

## Typographie

- **Display : Archivo** (600–900), MAJUSCULES, `letter-spacing: -0.01em`,
  repli `'Arial Black', sans-serif`. Tous les titres (h1–h4) et les boutons.
- **Body : Inter** (400–800), repli `-apple-system, BlinkMacSystemFont, sans-serif`.
  Texte courant, tags, formulaires. `line-height: 1.5`.
- Les deux familles sont auto-hébergées dans `fonts/` (woff2) et déclarées dans
  `fonts/fonts.css` ; Google Fonts :
  `https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap`.
- Boutons : Archivo 700, uppercase, `letter-spacing: 0.03em`, bordure 2 px.

## Voix et ton

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. (Inféré du positionnement du site : OKI se
  définit explicitement contre le template et les géants du web.)
- Piliers : ORGANISATION KA · INTERNATIONALE · Des solutions pour chaque besoin ·
  Le budget ne doit jamais être un frein.

## Imagerie

Illustration numérique afrofuturiste caribéenne : scènes au coucher de soleil,
personnages caribéens, pochettes musicales typographiées (DJANGOKAM, l'artiste
IA caribéen du collectif). Couleurs chaudes saturées sur fonds sombres.

- Échantillons réels dans `imagery/` (voir `brand.json → imagery.samples`).
- **Jamais** de photo de banque d'images corporate ni d'illustration générique
  de start-up. Jamais d'icône ou de logo en guise d'image.

## Layout et posture

- **Angles nets** : rayons 3 px (boutons, tags, badges) à 6 px (cartes). Aucune
  forme organique, aucune bulle très arrondie.
- Bordures 1 px `rgba(255,255,255,0.1)` ; boutons bordure 2 px.
- Cartes : fond blanc à 3 %, liseré gauche 4 px d'accent (vert ou or), survol
  `translateY(-2px à -4px)` + bordure d'accent.
- Tags : fond or à 8 % + bordure or 1 px, rayon 3 px.
- Espacement : échelle rem 0.75 / 1 / 1.5 / 2 / 4 ; sections `4rem 2rem` ;
  conteneur max 1200 px ; grille `repeat(auto-fit, minmax(300px, 1fr))`.
- Navigation fixe, fond noir OKI, flag-bar en bord inférieur.

## 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` et
`assets/maskable_oki.png`. Les `logos/header-img-*` sont des marques de
**partenaires** (Joukawouvè, Aktivist Vybz, cyber-mawonaj, KA UBUNTU) :
provenance conservée, ne pas les utiliser comme logo OKI.

## Limites connues

- `muted` et `border` sont des valeurs **dérivées** (le site travaille en
  opacités, pas en couleurs pleines) ; tout le reste est mesuré.
- L'inventaire d'images larges du site se limite à 5 visuels non-logo
  (1 portrait + 3 pochettes + 1 affiche partenaire) ; les autres images du site
  sont des logos de partenaires, exclus des échantillons.