01 / Overview
The Brand at a Glance
نظرة عامة على الهوية
IZO Media is a creative agency based in Kuwait specializing in photography,
videography, and post-production. The visual identity is editorial-minimal:
sharp, confident, monochrome with a single decisive red accent.
Design References
Off-White · A24 · Apple Pro Display · Editorial print design.
The language is restrained and typographic — whitespace and confident
type do the heavy lifting, with red used sparingly as punctuation.
Core Principles
Editorial
Type-led layouts. Generous margins. Print-inspired structure.
Monochrome + 1
Black, white, and a single red. Nothing else competes.
Confident
Bold weights, tight tracking, decisive statements.
Founder
Dhari Alhesinan — Founder, IZO Media.
02 / Logo & Wordmark
The Mark
العلامة
The primary mark is a typographic wordmark: IZO. — set in
Archivo Black with a red period after the "O". The dot is non-negotiable;
it is the brand's signature.
Primary — ink on white · dot in deep red #991B1B
Reversed — white on ink · dot in vivid red #EF4444
IZO.
شركة ايزو ميديا للدعاية والاعلان (ذ.م.م)
Lock-up with Arabic legal name (documents)
Construction (CSS)
font-family: 'Archivo', sans-serif;
font-weight: 900;
letter-spacing: -0.05em;
line-height: 0.85;
color: #1a1a1a;
.dot { color: #991b1b; }
03 / Color Palette
Monochrome + Red
لوحة الألوان
The palette is strictly monochrome plus red. Red is an accent, never a fill —
use it for ≤10% of any composition. No gradients, no other hues.
Highlight / Dot / Hover
Vivid Red
#EF4444
--red-bright
Usage Rules
Black-on-white and white-on-black are both core. Red works on both.
Default to deep red #991B1B for formal contexts (documents, labels);
vivid red #EF4444 for web hover states, the wordmark dot, and highlights.
04 / Typography
Three Typefaces
الخطوط
Each typeface has a clear job. All three are free via Google Fonts.
01 — Display & English Body
Archivo Black
The quick brown fox jumps over the lazy dog — 0123456789
400 Regular
600 SemiBold
700 Bold
800 ExtraBold
900 Black
Headlines · titles · large statements · body copy (EN)
02 — Arabic
آي بي إم بلكس
قصص تستحق أن تُروى — الخط العربي الرسمي للعلامة
300 Light
400 Regular
500 Medium
600 SemiBold
700 Bold
IBM Plex Sans Arabic · all Arabic text · dir="rtl" always
03 — Labels & Code
JetBrains Mono
// SECTION · 01 / CATEGORY · EST-260504-01
400 Regular
500 Medium
700 Bold
Kickers · labels · captions · metadata · document numbers · ALWAYS UPPERCASE
05 / Typographic Scale
Sizes & Weights
السلم الطباعي
A consistent scale keeps every layout on-brand. Use these as defaults.
| Use Case | Family | Weight | Size | Tracking |
|---|
| Display / Hero | Archivo | 900 | 64px+ | -0.04em |
| H1 / Page title | Archivo | 800 | 32px | -0.03em |
| H2 / Section title | Archivo | 800 | 24px | -0.02em |
| H3 / Card title | Archivo | 700 | 18px | -0.01em |
| Body | Archivo | 400 | 14px | 0 |
| Small / caption | Archivo | 400 | 12px | 0 |
| Mono label / kicker | JetBrains Mono | 700 | 10–11px | 0.2–0.25em |
| Mono caption | JetBrains Mono | 400 | 9px | 0.25em |
| Arabic body | IBM Plex Arabic | 500 | 14px | 0 |
| Arabic title | IBM Plex Arabic | 700 | 20–24px | 0 |
Voice & Tone
Bilingual: English primary, Arabic in Kuwaiti dialect (formal for clients).
Editorial & minimal: let whitespace and typography speak.
Labels read like code: // CONTACT · 01 / WORK — monospace, uppercase.
06 / Layout & Components
Building Blocks
المكونات
Buttons
Primary Action
Secondary
Text Link →
Primary: ink bg, hover → red. Secondary: 1px border, hover → fills ink. Text: hover → red.
Section Header Band
// 02 / Documents
Doc Builder
نظام الفواتير
Cards
Card Title
White background, 1px hairline border, 28px padding. Hover: border turns ink, lifts 2px. No rounded corners, no shadows.
Another Card
Sharp edges are the brand. Editorial restraint over decoration.
Iconography
Minimal / none. Use typographic glyphs instead of an icon library. Prefer the zero-icon editorial aesthetic.
Motion
All animations ≤200ms, ease. Allowed: card hover lift (150ms), button hover (150ms),
modal fade+slide (200ms), toast slide-in. Never: spin, bounce, elastic, decorative motion.
Editorial brands move quietly.