CASE FILE // CODE-CANVAS
Code & Canvas
01 / CONTEXT & AUDIT
A new digital studio — co-founded by Mustafa Aboalazm — that needed a brand identity before it could credibly sell brand identity. The challenge: design a system that proves the methodology without over-explaining it, in two languages, shipped before launch day.
- DISCIPLINE
- Identity Engineering
- TEAM SCALE
- Co-founders: Mustafa Aboalazm (Creative Lead) + partner
- TIMELINE
- February 2024 · V1.0 brand guidelines shipped at launch
- RECORD
- CODE-CANVAS
2Disciplines unifiedCODE + CREATIVE
1Mark that says bothSQUIRCLE GRID SYSTEM
V1.0Guidelines at launchGOVERNED FROM DAY ONE
02 / RESEARCH & LOGIC
Digital agencies split into two camps: pure-tech (all code, zero craft) or pure-creative (all art, no system). Neither owns both worlds. Code & Canvas needed a mark that literally fuses the two — a squircle that reads as icon at small scale, as geometric canvas at large.
PRECISIONCRAFTSYSTEMGRADIENTBILINGUAL
03 / EXECUTION & GOVERNANCE
The system, governed: tokens, states, and the grid they live on.
STRUCTURAL TOKENS
| primary-bg | #0B0F1A | Dark blue canvas |
| accent-teal | #48CCCC | Secondary / highlights |
| stroke-purple | #7850C8 | Borders / rules |
| Signate Grotesk | Black | Display |
| Raleway | Medium | Subheadings |
| Poppins | Regular | Articles / UI copy |
COMPONENT STATES
RESPONSIVE LAYOUT
MOBILE 4-colTABLET 8-colDESKTOP 12-col
v2.0
+45%
CTA
⇔
BEFORE // AUDITAFTER // SYSTEMDRAG THE LINE — AUDIT STATE ⇄ GOVERNED SYSTEM
GALLERY / THE SYSTEM, RENDERED
04 / PERFORMANCE & POST MORTEM
1System at foundingNOT RETROFITTED
3Type familiesGOVERNED HIERARCHY
8Gradient variantsEXPRESSION WITHIN SYSTEM
RETRO LEDGER
[KEEP]Purple-to-teal gradient as the expressive layer: constrained by the token system, so every use is on-brand automatically.
[KEEP]Identity shipped as a live product — codeandcanvas.net built end to end: bilingual EN/AR, design system in production.
[CHANGE]Three typefaces (Signate Grotesk / Raleway / Poppins) is one too many for long-term consistency.