CASE FILE // CODE-CANVAS

Code & Canvas

01 / CONTEXT & AUDIT

THE PROBLEM & STAKES

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
DISTINCT →← SYSTEMTech-only agency ATech-only agency BCreative-only CCreative-only DGeneric digital ECode & Canvas
Illustrative positioning map; not a published market study.
ILLUSTRATIVE

03 / EXECUTION & GOVERNANCE

The system, governed: tokens, states, and the grid they live on.

STRUCTURAL TOKENS

Approved vs Rejected
primary-bg
#0B0F1ALOCKED
Dark blue canvas
accent-teal
#48CCCCLOCKED
Secondary / highlights
stroke-purple
#7850C8LOCKED
Borders / rules
Signate Grotesk
BlackLOCKED
Display
Raleway
MediumLOCKED
Subheadings
Poppins
RegularLOCKED
Articles / UI copy

COMPONENT STATES

RESPONSIVE LAYOUT

MOBILE 4-colTABLET 8-colDESKTOP 12-col
Illustrative Governed Identity System
LOCKED TOKENS
Governance standardLOCKEDGovernance principle
Bilingual lockup · Pantone palette · Harmonized typeILLUSTRATIVE
⇔
AUDIT // PRE-SYSTEMGOVERNED // ILLUSTRATIVE

DRAG THE LINE — AUDIT STATE ⇄ GOVERNED SYSTEM

GALLERY / THE SYSTEM, RENDERED

BRAND MARK · THE SQUIRCLE </>
BRAND MARK · THE SQUIRCLE </>
BRAND GUIDELINES COVER · V1.0
BRAND GUIDELINES COVER · V1.0
BRAND MANIFESTO
BRAND MANIFESTO
ICON CONSTRUCTION · SQUIRCLE GRID
ICON CONSTRUCTION · SQUIRCLE GRID
WORDMARK · CODE & CANVAS
WORDMARK · CODE & CANVAS
LOGO VARIANTS · DARK / LIGHT / GRADIENT
LOGO VARIANTS · DARK / LIGHT / GRADIENT
PRINT APPLICATION · POSTER MOCKUP
PRINT APPLICATION · POSTER MOCKUP
COLOR SYSTEM · DARK CANVAS
COLOR SYSTEM · DARK CANVAS
GRADIENT LIBRARY · 8 VARIANTS
GRADIENT LIBRARY · 8 VARIANTS
TYPOGRAPHY · SIGNATE GROTESK + RALEWAY + POPPINS
TYPOGRAPHY · SIGNATE GROTESK + RALEWAY + POPPINS
DESIGN SAMPLES · SOCIAL + WEB
DESIGN SAMPLES · SOCIAL + WEB
WHERE CREATIVITY MEETS TECHNOLOGY
WHERE CREATIVITY MEETS TECHNOLOGY

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.