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.