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

DISTINCT →← SYSTEMTech-only agency ATech-only agency BCreative-only CCreative-only DGeneric digital ECode & Canvas

COMPETITOR LANDSCAPE

03 / EXECUTION & GOVERNANCE

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

DEFAULTHOVERFOCUSDISABLED

RESPONSIVE LAYOUT

MOBILE 4-colTABLET 8-colDESKTOP 12-col

BEFORE // AUDITAFTER // SYSTEM

v2.0

+45%

CTA

logo_final_v7??#3A86FF or #2D7DF6?spacing: 13px · 22px · 37pxbtn-styles (×9)

DRAG THE LINE — AUDIT STATE ⇄ GOVERNED SYSTEM

GALLERY / THE SYSTEM, RENDERED

BRAND MARK · THE SQUIRCLE </>

BRAND GUIDELINES COVER · V1.0

BRAND MANIFESTO

ICON CONSTRUCTION · SQUIRCLE GRID

WORDMARK · CODE & CANVAS

LOGO VARIANTS · DARK / LIGHT / GRADIENT

PRINT APPLICATION · POSTER MOCKUP

COLOR SYSTEM · DARK CANVAS

GRADIENT LIBRARY · 8 VARIANTS

TYPOGRAPHY · SIGNATE GROTESK + RALEWAY + POPPINS

DESIGN SAMPLES · SOCIAL + WEB

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.