Brand KitBrand guidelines
Everything you need to apply the Kareem Elkashoury identity consistently: the logo, the color palette in both HEX and OKLCH, the typography, and contrast ratios that exceed WCAG AA/AAA.
Logo
Correct use of the logo across different backgrounds
- • Use the full logo without changing its proportions
- • Respect the clear space around it (equal to the letter height)
- • Use the black version on light backgrounds and vice versa
- • Don't apply extra gradients or shadows to the logo
- • Don't rotate or distort the logo
- • Don't place it on a busy background that reduces legibility
Color palette
A dual color system — light and dark — built on OKLCH for high perceptual accuracy
Light mode — Paper & Ink
Primary site background in light mode
Primary text color and key elements
Secondary surfaces, elevated cards
Secondary text, captions, labels
Card borders and dividers
Dark mode — Obsidian & Silver
Primary site background in dark mode
Primary text color on the dark background
Secondary surfaces in dark mode
Elevated cards and components
Secondary text in dark mode
Typography
One typeface for both Arabic and English to guarantee full visual consistency
Cairo
Google Fonts — supports Arabic and Latin efficiently
UI components
A ready-made UI library built on the same tokens — it adapts automatically to light and dark mode
Buttons
Buttons in multiple sizes and variants — all aligned with the color system
Inputs
Input fields with full Arabic and RTL support
Badges
Badges for statuses, categories and tags
Cards
Cards for grouping content — a flexible structure supporting Header/Content/Footer
Color contrast — WCAG
Every text/background combination has been checked for clarity and readability
- • AA — 4.5:1 for normal text, 3:1 for large text
- • AAA — 7:1 for normal text, 4.5:1 for large text
- • Large text = 18pt+ regular or 14pt+ bold