CASE FILE // CODE-CANVAS

Code & Canvas

01 / CONTEXT & AUDIT

Launching a creative agency that bridges IT and design with no brand of its own. Before Code & Canvas could sell identity systems to clients, it needed to live inside one — a mark that communicates both disciplines without splitting them.

DISCIPLINE
Design Infrastructure — Studio Identity
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 bothTHE SQUIRCLE </>
V1.0Guidelines at launchGOVERNED FROM DAY ONE

02 / RESEARCH & LOGIC

Agency identities in the MENA market split predictably: tech agencies look like SaaS dashboards (dark, data-heavy, no warmth); creative agencies look like art portfolios (expressive, inconsistent, no rigour). Code & Canvas needed to occupy the unclaimed center — a system that reads as both engineering precision and creative energy from the first glance.

SQUIRCLEGRADIENT-SYSTEMPURPLE+TEALDUAL-DISCIPLINEBOLD-TYPE
DISTINCT →← SYSTEMTech-only agency ATech-only agency BCreative-only CCreative-only DGeneric digital ECode & Canvas
Competitor landscape: distinctiveness vs system maturity.

03 / EXECUTION & GOVERNANCE

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

STRUCTURAL TOKENS

primary-bg#00001EDark blue canvas
accent-teal#48CCC8Secondary / highlights
outline#C7C7E5Borders / rules
headingSignate Grotesk BlackDisplay
subtitlesRalewaySubheadings
bodyPoppinsArticles / UI copy

COMPONENT STATES

RESPONSIVE LAYOUT

ICON Squircle mark onlyLOCKUP Icon + wordmark horizontalSTACKED Icon + wordmark vertical
v2.0
+45%
CTA
⇔
BEFORE // AUDITAFTER // SYSTEM

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 foundingIDENTITY = INFRASTRUCTURE
3Type familiesGOVERNED HIERARCHY
8+Gradient variantsEXPRESSION WITHIN SYSTEM

RETRO LEDGER

[KEEP]The squircle with </> inside — it says 'code' and 'craft' in a single geometric form that scales from favicon to billboard.
[KEEP]Purple-to-teal gradient as the expressive layer: constrained by the token system, so it never becomes decoration.
[KEEP]Identity shipped as a live product — codeandcanvas.net built end to end: bilingual EN/AR, productized services, the system applied in code, not just guidelines.
[CHANGE]Three typefaces (Signate Grotesk / Raleway / Poppins) is one too many for long-term consistency — consolidate at V2.