Brand kit
The 212AY DNA.
Everything you need to build something that looks like us - logos, colours, type, rules, and a prompt you can paste into any AI tool. Made for our team, our designers, our interns and our partners. Take it and go.
The DNA
Three ideas. Everything else follows from them.
Built, not decorated
Monospace everywhere, thin borders, generous black. The product should look like something engineers made on purpose - not like a landing page template with our logo dropped on it.
One signal at a time
#8FFE09 is loud by design. It marks the single action that matters on a screen. If everything is Signal, nothing is - and the eye stops trusting the colour.
The words come first
No animation may decide whether text exists. If the script never runs, the sentence is still there. We learned this the hard way: an animated headline once cost us our homepage indexing.
Colours
Six values. Click any chip to copy it. Contrast ratios are measured, not assumed - Ash on Bone is 2.1:1, which is why it is banned on light backgrounds.
Ink
The base. Almost black, faintly green — never pure #000.
Bone
The paper. Warm off-white — never pure #fff.
Signal
The accent. One action per screen — if everything is Signal, nothing is.
Signal Dark
Signal for light backgrounds. #8FFE09 on Bone fails contrast — use this.
Ash
Secondary text on dark only. On light backgrounds it drops to 2.1:1 — unreadable.
Slate
Surfaces raised off Ink: cards, inputs, code blocks.
Logos
WebP for the web, PNG in the zip for print and slides. Never recolour, rotate, stretch or add effects. Keep clear space of at least the height of the "2" on every side.
Clear space & misuse
The mark is fixed. Every tile below the first is something not to do - shown, not just described, because a rule you can see is a rule you remember.
Typography
Three faces, one job each. All three are open-source - no licence to buy, no fallback to invent.
Stop using AI wrappers.
Headlines only. A serif with an opinion — it is the voice, not the body text.
The applied AI school for builders.
Body, labels, UI. Monospace everywhere — it is what makes the site look built, not decorated.
مدرسة الذكاء الاصطناعي التطبيقي
Arabic, all sizes. Latin fonts do not have Arabic glyphs — never fake it with a fallback.
Best practices
The short version. If you only read one section, read this one.
✓ Do
- Use #3f7e00 for the accent on light backgrounds - #8FFE09 fails contrast there.
- Keep AA contrast (4.5:1) on every text. Measure it, do not eyeball it.
- Treat Arabic as first-class: dir="rtl", real Arabic type, mirrored chevrons.
- Honour prefers-reduced-motion on every animation.
- Say what fails in practice. The reader is smarter than the brochure.
✕ Never
- Pure #000 or #fff. Ever. Our black is #0a0d08 and our white is #f5f3ee.
- Ash (#a8a8a8) on a light background - 2.1:1, unreadable.
- Text hidden behind opacity:0 waiting on JavaScript.
- Gradients on text, drop shadows on cards, emoji standing in for icons.
- Words like "revolutionary", "cutting-edge", "unlock your potential".
In the wild
The system applied. Every tile is rendered live from the same tokens - no mockup image, just the brand doing its job.
Stop building AI wrappers.
The brand prompt
Paste this into Claude, ChatGPT, v0, Cursor - anything. It carries the whole system in one block, so what comes out looks like us instead of looking like a 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 & partners
212AY is built by XAI Agency, with Moroccan Data Scientists and SMIA. Their marks are theirs: use them only to state a real relationship, never to imply an endorsement that does not exist. Same rules - no recolouring, no effects.
