---
version: alpha
name: Olaf Hussein
description: Editorial menswear minimalism — a stark black-on-white monochrome canvas where full-bleed product photography carries the brand and typography stays quiet. Tight uppercase sans-serif labels, hairline rules, near-square radii, and gallery-grade whitespace.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f5f3"
  ink: "#111111"
  ink-pure: "#000000"

  # Secondary / muted text
  ink-secondary: "#555555"
  ink-muted: "#8a8a8a"

  # Lines + borders
  border: "#e4e4e2"
  border-strong: "#111111"

  # Interactive
  primary: "#111111"
  on-primary: "#ffffff"
  on-ink: "#ffffff"
  link: "#111111"
  link-hover: "#555555"

  # Status / utility
  sale-red: "#9a1f1f"
  surface-hover: "#ededeb"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.12px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.64px
  product-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 1.2px
  nav-label:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.8px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  price:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 1.0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.4px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  micro: 1px
  xs: 2px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink-pure}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.ink-pure}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"
  product-card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.product-title}"
    rounded: "{rounded.none}"
    padding: 0px
  product-image:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.none}"
  badge:
    backgroundColor: "{colors.ink-pure}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-sale:
    backgroundColor: "{colors.sale-red}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.ink-pure}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 20px 32px
    borderColor: "{colors.border}"
  divider:
    backgroundColor: "{colors.border}"
    height: 1px
  size-chip:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 14px
    borderColor: "{colors.border}"
---

# Olaf Hussein Design System

## Overview

Olaf Hussein's storefront is editorial menswear minimalism in its purest form — a black-on-white gallery where the clothing photography is the design and the interface gets out of the way. The canvas is pure white (`{colors.background}`), the ink is a near-black `{colors.ink}`, and there is almost no third color. What looks like restraint is actually discipline: a luxury fashion label treats its site like a lookbook, letting full-bleed garment imagery and generous whitespace do the talking while the chrome stays whisper-quiet.

Typography is deliberately understated. A clean grotesque sans-serif (mapped here to Inter as the closest web-available match) runs the whole system at low contrast — modest weights, no decorative faces, no flourish. The brand's signature move is the small uppercase label: navigation, buttons, and eyebrows sit at 11–13px with positive letter-spacing (`{typography.nav-label}`, `{typography.eyebrow}`), giving the interface a quiet, fashion-catalog cadence. Headlines stay tight and confident with mild negative tracking, but they never shout — the photography carries the volume.

Geometry is hard-edged. Olaf Hussein avoids rounded corners almost entirely: buttons, cards, inputs, and image frames are square (`{rounded.none}`), reinforcing the editorial, architectural feel. Borders are hairline rules (`{colors.border}`) or full-strength black underlines (`{colors.border-strong}`) — there are no soft shadows, no elevation tricks, no gradients. Depth comes from the imagery and the air around it, not from the UI.

**Key Characteristics:**
- Monochrome black-on-white palette — `{colors.ink}` on `{colors.background}`, almost no accent color
- Photography-first: full-bleed product imagery is the primary visual element
- Small uppercase labels with positive letter-spacing for nav, buttons, eyebrows
- Square geometry throughout (`{rounded.none}`) — almost no rounded corners
- Hairline rules and black underlines instead of shadows or fills
- Gallery-grade whitespace; sections breathe with large vertical rhythm
- Clean grotesque sans-serif at restrained weights (400/500), never bold-heavy
- Solid black buttons reserved for primary commerce actions (Add to cart)

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, product titles. Near-black for a softer read than pure black.
- **True Black** (`{colors.ink-pure}`): Button fills, badges, the strongest UI moments.
- **White** (`{colors.background}`): Page background, card surfaces, button text on dark.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, hover state for links, muted captions.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata, placeholder text.

### Lines & Borders
- **Border** (`{colors.border}`): Hairline dividers, subtle card separation, nav underline.
- **Border Strong** (`{colors.border-strong}`): Black underline inputs, outlined secondary buttons.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Image placeholder tint, subtle section panel.
- **Surface Hover** (`{colors.surface-hover}`): Light hover wash on neutral interactive surfaces.

### Utility
- **Sale Red** (`{colors.sale-red}`): The only chromatic accent — markdown/sale badges. Used sparingly.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif` (closest web-available match for the brand's grotesque sans-serif)
- The system is single-family: one clean grotesque carries display, body, and UI labels alike.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Campaign/hero headlines, tight negative tracking |
| `section-heading` | Collection and section titles |
| `product-title` | Product names in grids and detail |
| `eyebrow` | Uppercase eyebrow / category labels |
| `nav-label` | Navigation links, uppercase spaced |
| `body` | Standard reading copy |
| `body-small` | Secondary copy, form text |
| `price` | Product prices |
| `button-ui` | Buttons, uppercase spaced |
| `caption` | Badges, fine print, metadata |

### Principles
- **Quiet by default**: Type is restrained to weights 400 and 500 — no heavy bold. The clothing, not the text, provides contrast.
- **Uppercase labels are the signature**: Nav, buttons, and eyebrows use positive letter-spacing (0.8–1.2px) at small sizes for a fashion-catalog feel.
- **Headlines tighten, body relaxes**: Display sizes use mild negative tracking (`-1.12px`); body opens up to `1.6` line-height for editorial readability.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, scaling generously to `{spacing.4xl}` (120px) for full-section breathing room.

### Grid & Container
- Wide, near-full-bleed containers — imagery often runs edge to edge
- Product grids: 2-column on mobile, 3–4 column on desktop with tight gutters
- Hero: full-width campaign image with overlaid or adjacent minimal text
- Generous top/bottom padding between sections (`{spacing.3xl}`–`{spacing.4xl}`)

### Whitespace Philosophy
- **Gallery emptiness**: White space frames the photography like a museum wall.
- **Tight gutters, big margins**: Product grids sit close together, but sections are separated by large vertical air.
- **No background variation**: Separation comes from hairline rules and spacing, never from filled panels.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Everything — the default |
| Hairline (Level 1) | `1px solid {colors.border}` | Dividers, nav underline, subtle separation |
| Strong rule (Level 2) | `1px solid {colors.border-strong}` | Input underlines, outlined buttons |
| Focus (Accessibility) | `2px solid {colors.ink-pure}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: There is essentially no shadow system. Olaf Hussein builds an entirely flat interface — depth is implied by photography and whitespace, not by elevation. Lines do the structural work that shadows do elsewhere.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, image frames — the default |
| `micro` | 1px | Negligible softening, rarely used |
| `xs` | 2px | Small chips if any rounding is wanted |
| `sm` | 4px | Maximum rounding, used sparingly |
| `pill` | 9999px | Reserved for rare circular controls (e.g. carousel dots) |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.product-card}`).

### Buttons
- **`button-primary`** — Solid black, white uppercase label, square. The primary commerce action (Add to cart, Shop).
- **`button-secondary`** — White with a black outline, inverts to solid black on hover.

### Product Cards
- **`product-card`** — No border, no padding, no radius. Image on top, product title and price stacked beneath in quiet sans-serif.
- **`product-image`** — Square frame on a soft surface tint while loading.

### Badges
- **`badge`** — Small black square badge for "New" / labels.
- **`badge-sale`** — The rare red accent for markdowns.

### Inputs
- **`input`** — Underline-only field (black bottom rule), no box, no radius. Newsletter and search fields share this minimal treatment.

### Navigation
- **`nav-bar`** — White header, uppercase spaced links, hairline bottom border. Cart and account as minimal icons.

### Distinctive Components
- **Size chips** (`{components.size-chip}`): Square outlined size selectors on product pages.
- **Hairline divider** (`{components.divider}`): The primary structural separator across the site.

## Do's and Don'ts

### Do
- Let full-bleed photography be the hero — keep UI chrome quiet around it
- Use square geometry (`{rounded.none}`) on buttons, cards, and inputs
- Use small uppercase labels with positive letter-spacing for nav and buttons
- Keep the palette monochrome — `{colors.ink}` on `{colors.background}`
- Use hairline rules (`{colors.border}`) for structure instead of shadows
- Reserve solid black (`{colors.ink-pure}`) for primary commerce actions
- Keep type weights at 400–500; let imagery carry the contrast

### Don't
- Don't add rounded corners — the system is hard-edged
- Don't introduce decorative colors; sale red is the only accent and used sparingly
- Don't use drop shadows or elevation — the interface is flat
- Don't use heavy bold weights on body or product copy
- Don't fill sections with colored panels — separate with whitespace and rules
- Don't lowercase the nav/button labels — uppercase spacing is the signature

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | 2-column product grid, stacked hero, hamburger nav |
| Tablet | 600–1024px | 3-column grid, expanded margins |
| Desktop | 1024–1440px | 3–4 column grid, full nav |
| Large Desktop | >1440px | Wider full-bleed imagery, generous side margins |

### Touch Targets
- Buttons use comfortable padding (16px vertical)
- Nav labels at 13px with adequate spacing
- Size chips have 8px–14px padding for tap targets

### Collapsing Strategy
- Navigation: horizontal uppercase links → hamburger menu
- Product grid: 4-column → 3-column → 2-column
- Hero: side-by-side image+text → stacked
- Section spacing: 120px → 64px on mobile

### Image Behavior
- Product and campaign images maintain aspect ratio and run near-full-bleed
- Square image frames preserved across breakpoints
- Photography is responsive but never cropped to lose the garment

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: True Black `{colors.ink-pure}`
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Border: hairline `{colors.border}` or strong `{colors.border-strong}`
- Sale accent: `{colors.sale-red}` (rare)
- Focus ring: `{colors.ink-pure}`

### Example Component Prompts
- "Create a hero: full-bleed campaign photo, white margins. Headline at 56px Inter weight 500, line-height 1.05, letter-spacing -1.12px, `{colors.ink}`. Eyebrow above in 12px uppercase weight 500, letter-spacing 1.2px, `{colors.ink-secondary}`. Square black CTA (`{colors.ink-pure}`, white uppercase 12px label, 16px 32px padding, no radius)."
- "Design a product card: square image on `{colors.surface-soft}`, no border, no radius. Product title 16px Inter weight 400 `{colors.ink}` beneath; price 14px `{colors.ink}`. Quiet, gallery-like."
- "Build navigation: white header, uppercase links 13px weight 500 letter-spacing 0.8px `{colors.ink}`, hairline bottom border `{colors.border}`. Minimal cart/account icons right-aligned."
- "Create an underline input: no box, 1px solid `{colors.border-strong}` bottom rule only, 13px Inter body, square. Focus turns the rule pure black."

### Iteration Guide
1. Default to flat and square — no shadows, no rounded corners
2. Keep the palette monochrome; only sale red breaks it, and rarely
3. Uppercase + positive letter-spacing is the brand voice for labels
4. Let photography and whitespace create hierarchy, not UI weight
5. Solid black is precious — reserve it for primary commerce actions

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Olaf Hussein. Brand names and trademarks belong to their respective owners.