The System
Design System
& Branding
Every pixel, glyph and curve in this portfolio comes from the same small kit of tokens. Editorial type, ink-on-paper neutrals, one electric accent — and a few hand-drawn shapes that refuse to sit still.
Identity
Wordmark
Ibrahim.
Raimi
Raimi
Tagline
Design. Backend. Frontend. Fullstack.
Voice
- — Direct, never decorative.
- — Lowercase calm, uppercase impact.
- — Show the seams, not the spin.
Colour
Bone
#f4efe6
Ink
#0c0c0c
Ember
#e8521f
Sand
#e6dccb
Pewter
#2a2a2a
Typography
Display — Bebas Neue
Aa Bb Cc 1234
Body — Mono
The mono face carries every label, caption and breadcrumb. It keeps the composition feeling like a working document — never a brochure.
H1 / Display
The quick brown fox.
H2 / Section
The quick brown fox.
H3 / Subhead
The quick brown fox.
Body
The quick brown fox.
Caption
The quick brown fox.
Marks & Shapes
A recurring cast of hand-drawn marks. They appear as decoration, transition confetti, and — on the showcase page — as draggable physics toys.
Motion
01
Expo, always
Transitions ease with `expo.out`. Snap in, settle never.
02
Mass & gravity
Hero objects obey physics. Drag them; they fall back.
03
Stagger by 80ms
Lines, icons and meta lock into rhythm, never march.