Khaled Hanafy · Design directions

Six directions. 2 of them built.

Every card below is a complete, working home page using the same copy, the same real brand colours, the same logo treatment and the same client photography. Nothing about the content changes between them — only the look. Hover a card to scroll the whole page; click to open it full size. Pick the direction that feels most like the business, and that one is already real HTML.

2 of 6 are built and measured against their comp band for band. The rest are listed so the set stays complete, and each names the comp it is waiting on — they are in Design-Sprint/.

Not built yet comp: 01-editorial-luxe.html
01

Editorial Luxe

Magazine-grade restraint. Playfair Display on a warm paper ground, a strict baseline grid, hairline rules, small-caps eyebrows and figure captions. The hero is a contained framed plate, not a full-bleed band. For a reader who wants the work to look considered rather than sold.

Not built yet
Not built yet comp: 02-warm-human.html
02

Warm Human

Earthy and hospitable. Fraunces and Nunito Sans, rounded panels, soft layered shadows, cream and sand with coral used warmly. Dark text on coral instead of white, because white fails contrast here. Reads like a well-made workshop.

Not built yet
Not built yet comp: 03-modern-minimal.html
03

Modern Minimal

Swiss and gallery-like. Inter throughout, a tight grid, a strict spacing scale, and the accent used exactly twice on the whole page. The hero image sits on a plinth as an artefact. Nothing decorative that is not doing work.

Not built yet
04

Dark Premium

Cinematic. Near-black ground, glass panels lifted with light instead of borders, and the lime used as a controlled glow. The hero runs full-bleed under a scrim. For a reader who wants this to feel like a system at scale.

Open full page →
Not built yet comp: 05-bold.html
05

Bold

Structural and unapologetic. Anton set enormous and tight over a full-bleed screenshot, with the headline deliberately breaking the grid, hard 3px lattices, and lime used as a slab rather than a highlight. Builder's sign energy.

Not built yet
06

Soft Boutique

Calm and airy. Fraunces softened through its variable axes, pill buttons, generous radii, blue on cream with layered soft shadows. Lots of breathing room without becoming empty. The opposite of Dark and Bold.

Open full page →