Hood Manifesto


Overview
Hood Manifesto is an independent fashion brand from Tehran — a project built around the idea that clothing can document a place and a time. Rooted in identity, discipline, and street culture, the brand creates considered garments that exist beyond trends. Our role was to build the digital home for this vision: an e-commerce platform that matches the brand's editorial voice without compromising on performance. Built with Next.js, TypeScript, and Tailwind CSS, the site features a fully custom storefront — product pages, collections, and a checkout flow designed to feel as deliberate as the garments themselves. The result is a fast, refined online presence that carries the weight of the brand's culture while giving customers a seamless path from discovery to purchase.
Color System
A monochromatic foundation — seven steps from absolute black to white — anchored by three accent colors used only with full intent.
Absolute Black
#0A0A0A
Coal
#1A1A1A
Iron
#3A3A3A
Concrete
#777777
Fog
#D8D8D8
Paper
#F5F5F2
White
#FFFFFF
Accent — Use with intent
Signal Red
#A12424
Military Olive
#5D6651
Archive Blue
#53606D
Typography
Five type steps — each carrying a specific weight of meaning. From 96px display headlines down to 11px product labels.
Display
96px / Black
H1
48px / Black
H2
32px / Bold
Body
15px / Regular
Label
11px / Medium
Brand Voice
Six words that form the editorial backbone of every piece of writing. The brand speaks in short, certain sentences. No warmth for warmth's sake.
- Deliberate
- Restrained
- Precise
- Confident
- Honest
- Understated
Spacing System
A fixed rhythm of eight values. Every element sits at a deliberate distance — nothing arbitrary, nothing accidental.
Campaign & Product
Product photography and campaign imagery — portraits shot with the same restraint the garments are designed with.


Website
A storefront designed to carry the brand's editorial voice through every page. Product listings, collection pages, and a checkout flow built to feel considered.


UI Detail — Sticky Header
The header adapts to context. At the top it reads against dark — white type, black field. As the user scrolls into content, it transitions to a light surface. One element, two states, zero friction.
State 01 — At top · Dark

State 02 — Scrolled · Light

Collections
Campaign films
Two campaign films shot for Hood Manifesto — each collection documented with a distinct visual tone that carries the brand's restraint from garment to screen.
Collection — 1968
Collection — Al-Waght
Feature — Product Detail System
Two tools that answer the buyer's questions
Every product page carries a persistent sidebar that surfaces the essential details — fabric, fit notes, and care instructions — without the buyer needing to scroll or leave the page. Alongside this, an inline size guide expands in place with EU, UK, US, and centimetre conversions and a how-to-measure diagram. Both are designed to remove friction at the exact moment of decision: present when needed, out of the way when not.

Product detail sidebar — 492 × 896px

Inline size guide — 846 × 616px
Next project