|

Hood Manifesto

2026

Web Design · Frontend Development · E-Commerce

Next.js · TypeScript · Tailwind CSS

View Website
Hood Manifesto — mobile cover

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

Typography

Five type steps — each carrying a specific weight of meaning. From 96px display headlines down to 11px product labels.

Hood Manifesto

Display

96px / Black

New Season

H1

48px / Black

Collection Name

H2

32px / Bold

Garments designed for those who already know.

Body

15px / Regular

PRODUCT REFERENCE · SPRING 2026

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.

44px
88px
1616px
2424px
3232px
4848px
6464px
100100px

Campaign & Product

Product photography and campaign imagery — portraits shot with the same restraint the garments are designed with.

Product image 1
Product image 2

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.

Desktop screenshot 1
Desktop screenshot 2

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

Header dark state — mobile

State 02 — Scrolled · Light

Header light state — mobile

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 page sidebar showing garment details

Product detail sidebar492 × 896px

Inline size guide with EU / UK / US / CM conversions

Inline size guide846 × 616px

Next project

Florym Pastry Studio