Kit de marque
L’ADN 212AY.
Tout ce qu’il faut pour construire quelque chose qui nous ressemble - logos, couleurs, typographie, règles, et un prompt à coller dans n’importe quel outil d’IA. Fait pour notre équipe, nos designers, nos stagiaires et nos partenaires. Servez-vous.
L’ADN
Trois idées. Tout le reste en découle.
Construit, pas décoré
Du monospace partout, des bordures fines, du noir généreux. Le produit doit avoir l’air fait par des ingénieurs qui savaient ce qu’ils faisaient - pas d’un template avec notre logo posé dessus.
Un seul signal à la fois
Le #8FFE09 crie, c’est voulu. Il marque la seule action qui compte sur un écran. Si tout est Signal, plus rien ne l’est - et l’œil cesse de faire confiance à la couleur.
Les mots d’abord
Aucune animation ne décide si un texte existe. Si le script ne tourne pas, la phrase est quand même là. On l’a appris à nos dépens : un titre animé nous a coûté l’indexation de la page d’accueil.
Couleurs
Six valeurs. Cliquez sur une puce pour la copier. Les contrastes sont mesurés, pas supposés - Ash sur Bone donne 2,1:1, d’où son interdiction sur fond clair.
Ink
La base. Presque noir, très légèrement vert — jamais du #000 pur.
Bone
Le papier. Blanc cassé chaud — jamais du #fff pur.
Signal
L’accent. Une action par écran — si tout est Signal, plus rien ne l’est.
Signal Dark
Le Signal pour fond clair. #8FFE09 sur Bone échoue au contraste — utilisez celui-ci.
Ash
Texte secondaire sur fond sombre uniquement. Sur fond clair il tombe à 2,1:1 — illisible.
Slate
Surfaces surélevées par rapport à Ink : cartes, champs, blocs de code.
Logos
WebP pour le web, PNG dans le zip pour l’impression et les slides. Ne jamais recolorer, pivoter, étirer ni ajouter d’effet. Garder une zone de respiration d’au moins la hauteur du « 2 » sur chaque côté.
Zone de respiration & mauvais usages
La marque est figée. Chaque vignette après la première est une chose à ne pas faire - montrée, pas seulement décrite, car une règle qu’on voit est une règle qu’on retient.
Typographie
Trois polices, un rôle chacune. Les trois sont open-source - aucune licence à acheter, aucun fallback à inventer.
Stop using AI wrappers.
Titres uniquement. Une serif qui a un avis — c’est la voix, pas le corps de texte.
The applied AI school for builders.
Corps de texte, libellés, interface. Du monospace partout — c’est ce qui donne au site un air construit, pas décoré.
مدرسة الذكاء الاصطناعي التطبيقي
Arabe, toutes tailles. Les polices latines n’ont pas de glyphes arabes — ne jamais bricoler avec un fallback.
Bonnes pratiques
La version courte. Si vous ne lisez qu’une section, lisez celle-ci.
✓ À faire
- Utiliser #3f7e00 pour l’accent sur fond clair - le #8FFE09 y échoue au contraste.
- Tenir le contraste AA (4,5:1) sur tout texte. Le mesurer, pas l’estimer à l’œil.
- Traiter l’arabe en première classe : dir="rtl", vraie police arabe, chevrons miroir.
- Respecter prefers-reduced-motion sur chaque animation.
- Dire ce qui rate en vrai. Le lecteur est plus malin que la plaquette.
✕ Jamais
- Du #000 ou du #fff purs. Jamais. Notre noir est #0a0d08, notre blanc #f5f3ee.
- Ash (#a8a8a8) sur fond clair - 2,1:1, illisible.
- Du texte caché derrière un opacity:0 qui attend le JavaScript.
- Des dégradés sur le texte, des ombres portées sur les cartes, des emoji en guise d’icônes.
- Les mots « révolutionnaire », « de pointe », « libérez votre potentiel ».
En situation
Le système appliqué. Chaque vignette est rendue en direct depuis les mêmes tokens - aucune image de maquette, juste la marque qui fait son travail.
Arrêtez les wrappers IA.
Le prompt de marque
Collez-le dans Claude, ChatGPT, v0, Cursor - n’importe lequel. Il porte tout le système en un bloc : ce qui en sort nous ressemble au lieu de ressembler à un template.
# 212AY — Brand system
You are designing an interface for 212AY, an applied-AI school based in Morocco,
teaching in English, French and Arabic. Follow this system exactly.
## Voice
Direct, technical, never corporate. We say "you build" rather than "you will be
empowered to build". No exclamation marks. No "revolutionary", no "cutting-edge",
no "unlock your potential". If a sentence could appear in any competitor's
brochure, delete it. Take positions: say what fails in practice, say what people
skip. Respect the reader's intelligence and their time.
## Colours
--black #0a0d08 Ink base — almost black, faintly green. NEVER pure #000.
--white #f5f3ee Bone paper — warm off-white. NEVER pure #fff.
--accent #8FFE09 Signal accent — ONE action per screen.
#3f7e00 Signal Dark — the accent on light backgrounds (#8FFE09 fails contrast there).
--gray #a8a8a8 Ash secondary text, DARK BACKGROUNDS ONLY (2.1:1 on Bone — unreadable).
--dark-gray #1e1e1e Slate raised surfaces: cards, inputs, code.
Both themes must work. Dark is the default; light is Bone with Ink text.
## Type
Fraunces (600/700/900) — headlines only. A serif with an opinion.
DM Mono (300/400/500) — body, labels, UI. Monospace everywhere: it makes the
product look built rather than decorated.
IBM Plex Sans Arabic (400/600/700) — Arabic at every size. Never fall back to a
Latin font for Arabic.
Headlines: line-height 0.85-0.9, tight tracking, huge. Body: line-height 1.6.
## Layout
Generous black space. Thin borders (rgba(143,254,9,0.14)), 12-14px radii.
Content sits on Ink; cards lift to Slate. Underline nothing that is not a link.
## Non-negotiable
- Text is never hidden by an animation. No opacity:0 waiting on JS — if the
script never runs, the words must still be there. This is a hard rule: it cost
us our homepage indexing once.
- Contrast is AA (4.5:1) or it does not ship. Ash on Bone is 2.1:1 — banned.
- Arabic is RTL, first-class, never an afterthought. dir="rtl", mirrored icons.
- One accent action per screen. If everything is Signal, nothing is.
- prefers-reduced-motion is honoured everywhere.
## Never
Gradients on text. Drop shadows on cards. Emoji as icons. Stock photos of people
pointing at whiteboards. Pure #000 or #fff anywhere.
XAI & partenaires
212AY est construit par XAI Agency, avec Moroccan Data Scientists et SMIA. Leurs marques leur appartiennent : ne les utilisez que pour énoncer une relation réelle, jamais pour suggérer une caution qui n’existe pas. Mêmes règles - pas de recoloration, pas d’effets.
