Alright — let's dig in. We’ve got H&M’s design system data straight from their live site. Some things are surprisingly minimal, some are incomplete (colors missing entirely), and that in itself tells you a lot about their approach.

1. Brand Overview

H&M’s website is a global storefront that serves millions daily. The company itself is famously mass-market: fast fashion, trend-responsive, and price-conscious. Their design system reflects that — stripped-back, functional, and intentionally devoid of heavy ornamentation. It’s built to let product photography do the emotional heavy lifting, not flashy UI.

If you look at their homepage, the content is king. Big images, model shots, editorial campaigns. Typography and layout are just scaffolding. They’re mostly invisible until you start picking apart the styles. And when we do? We find very few custom tokens. A couple of font declarations, a tight spacing rhythm, almost no color data exposed in the CSS variables (likely embedded in images or inline styles for campaign flexibility).

That’s indicative of a design philosophy: UI is just a frame. For a brand like H&M, seasonal campaigns, holiday offers, and collection drops need maximum flexibility. A rigid palette could conflict with any of those. The core structural system — spacing, typography, layout — is stable. Everything else is ephemeral.

They also lean into web-native defaults. Times is their heading font (yes, Times). That’s rare for a global retail giant. It adds a subtle editorial, high-fashion newspaper vibe without buying into high-license typography. Body text at 16px, consistent 8px multiples for spacing, no visible shadow system, no borders defined in the central style layer. It’s minimal in code but still reads polished because the photography and marketing are so strong.

In short: this is a utilitarian, low-friction design system. It’s mostly about predictable grids and typography that can disappear when product needs to shine. If you’re expecting a heavily abstracted token library with dozens of brand colors, forget it. This is lean, almost skeletal — and that works for them.

2. Color System

Here’s the shocker: no explicit color palette extracted. The JSON shows:

"colors": {
  "semantic": {},
  "palette": [],
  "cssVariables": {}
}

So either they’re embedding colors directly in assets (JPG/PNG/WEBP), or styling elements inline per campaign. Without extracted hex codes, we can still talk about implications:

2.1 Primary Colors

The fact there’s no global primary color token suggests H&M avoids locking CTAs or key elements to a single hue. This is rare — most ecom sites have a ‘buy’ button color. H&M likely uses shades of black, white, or context-specific colors lifted from campaign art direction. For example: if a spring campaign is predominantly pastel pinks, buttons and accents might match, without code-side overrides from a brand hex.

Competitor comparison: Zara’s palette is stark black/white all the time (brand-driven minimalism). ASOS has a consistent primary for CTAs. H&M’s flexible approach means less predictability, but total campaign coherence.

2.2 Complete Palette

Table? We have none. So the table is empty — that’s telling.

2.3 Color Relationships

Because colors aren’t tokenized here, accessibility control via contrast ratio must be handled manually per campaign. This can be risky — teams must check WCAG compliance every time they set text over backgrounds. Without a global ‘dark text/light background’ guarantee, accessibility is dependent on good editorial oversight.

2.4 Usage Guide

Stuff we can say:

• Use campaign imagery/marketing palette for accents.
• Default UI text likely uses browser black (#000) and default white backgrounds (#fff).
• Be cautious with small body copy — it needs strong contrast on all hero photos.
• Test dark mode separately — no evidence of a native dark theme here. Everything is light-first.

3. Typography

This is where we have real data.

3.1 Font Families

The headings use:

• Times
• No fallback stack specified in data
• Weight varies: 700 (bold) and 400 (regular)
• No Google Fonts or Adobe Fonts — purely system serif.

Body styles not explicitly listed, but given default 16px regular weight in heading context, body is likely Times or sans-serif defaults outside extracted styles.

This choice is unconventional for ecommerce — Times conveys “editorial,” “classic.” Feels more Vogue than Amazon. It helps H&M brand fashion as cultural content rather than just product listings.

Sources:

• Google Fonts: none
• Adobe Fonts: false
• Variable Fonts: false

3.2 Type Scale

We’ve got two heading-1 contexts that are actually different sizes:

Odd: An “h1” style at 16px regular weight is tiny, so this might be a reused class for things like labels, not actual top-level headings. Could be a misnamed token.

3.3 Hierarchy

Two extremes for headings: one is large and bold (clear primary header), one is small and light (subtle labels). With no intermediate sizes exposed, everything else is probably handled inline or by campaign styles. This keeps the system light but forces designers to handle hierarchy case-by-case.

Readability: 32px bold is solid for hero titles. 16px thin serif is readable only with good contrast — so again, color choice per campaign matters.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid.

From data:

That’s lean. Most spacing tokens are exactly multiples of the base 8px (except 21.44px — that’s from calculated line heights or font scaling).

8px grid means every margin/padding is predictable, layouts align cleanly, and mobile/desktop scaling is easy.

4.2 Layout

We have no breakpoints extracted, so container widths are unknown. Probably responsive fluid grid. The lack of breakpoints in data means they might rely on framework defaults (CSS flex/grid) without explicit tokenization for breakpoints.

5. Visual Elements

Border radius values: None extracted.

Same for borders — “combinations”: none.

Shadows: none.

That’s a flat design: no rounded corners, no shadows for depth. All depth is expressed via imagery and layering, not UI chroma.

6. Components

From data:

• Buttons: [] — none extracted
• Inputs: no styles extracted
• Links: []

So, no central component styles. Likely inline or framework defaults.

Interpretation: They rely heavily on HTML default styles, lightly overridden by campaign CSS.

For designers: This means you must define component styles per project when working in their system. The brand doesn’t enforce color, radius, shadow — only typography and spacing feel “locked.”

7. Design Tokens

Here’s the literal CSS custom properties file with only real values we have:

/* Typography */
--font-heading-1-family: "Times";
--font-heading-1-bold-size: 32px;
--font-heading-1-bold-size-rem: 2.00rem;
--font-heading-1-bold-weight: 700;
--font-heading-1-regular-size: 16px;
--font-heading-1-regular-size-rem: 1.00rem;
--font-heading-1-regular-weight: 400;

/* Spacing */
--space-8px: 8px;
--space-8px-rem: 0.50rem;
--space-16px: 16px;
--space-16px-rem: 1.00rem;
--space-21_44px: 21.44px;
--space-21_44px-rem: 1.34rem;

No colors, border radius, shadows — because they don’t exist in extracted data.

8. AI Coding Assistant Prompt

# H&M Design System Specification

System Prompt:
You are a H&M design expert. Build UIs matching their visual language exactly.

## Brand Context
H&M’s web design is minimal and campaign-driven. The system uses a fixed typography and spacing grid, but colors, buttons, and embellishments shift per season. Content and imagery are the star; UI is a subtle frame.

## Color Palette
- No global brand colors tokenized in CSS — use campaign palette or default #000 for text, #fff for backgrounds.
- Ensure WCAG-compliant contrast for text over images.
- Avoid adding arbitrary colors outside campaign or neutral palette.

## Typography
- Headings: "Times"
    - Bold H1: 32px / 2.00rem, weight 700
    - Regular H1: 16px / 1.00rem, weight 400
- No Google/Adobe fonts — system serif.
- Large bold for hero titles, small regular for labels/subtitles.

| Level      | Size     | Weight | Line Height | Use For              |
|------------|----------|--------|-------------|----------------------|
| H1 Bold    | 32px     | 700    | —           | Page titles          |
| H1 Regular | 16px     | 400    | —           | Labels, meta info    |

## Spacing & Grid
Base: 8px grid.
Scale: 8px, 16px, 21.44px.
Map:
- 8px: small gaps, icon spacing
- 16px: card padding, button gaps
- 21.44px: computed from type scale line heights

## Border Radius
- None: flat edged components

## Shadows & Depth
Flat design — no shadows. Use space/images for depth.

## Component Specifications
### Primary Button
Use campaign-defined colors or neutral.
```css
.btn-primary {
  background: #000;
  color: #fff;
  padding: var(--space-8px) var(--space-16px);
  border-radius: 0;
  font-family: Times;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #333; }
.btn-primary:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Links
```css
.nav-link {
  color: #000;
  text-decoration: underline;
}
.nav-link:hover { text-decoration: none; }
```

### Input Fields
```css
.input {
  border: 1px solid #000;
  border-radius: 0;
  padding: var(--space-8px);
  font-family: Times;
  font-size: 16px;
}
.input:focus { border-color: #333; outline: none; }
```

### Card
```css
.card {
  background: #fff;
  border-radius: 0;
  padding: var(--space-16px);
}
```

## Layout & Responsive Rules
- No fixed breakpoints — use fluid responsive with CSS grid/flex
- Maintain 8px multiples for gaps/margins

## Interaction Rules
- Transition timing: 150ms ease for hover/focus state changes
- Always visible focus indicator on interactive elements

## DO List
- Use Times for headings
- Maintain 8px spacing grid
- Keep components flat — no shadows, no radii
- Use campaign palette for accents
- Check contrast manually

## DON'T List
- Invent new colors without approval
- Add rounded corners
- Add shadows for depth
- Change base typography
- Break spacing multiples

## Code Examples
### Primary Button
```css
.btn-primary { /* see above */ }
```

### Card
```css
.card { /* see above */ }
```

### Input
```css
.input { /* see above */ }
```

9. Summary

TL;DR — H&M’s design system is stripped down to typography and spacing. No enforced colors, no shadows, no radii. The brand relies on seasonal campaign art direction to do visual storytelling. The skeleton is minimal, allowing total flexibility.

Brand Keywords

• campaign-flexible
• editorial-minimal
• flat-structure
• image-driven

This article shows: sometimes a design system is not a rigid fortress of tokens. H&M’s is essentially a scaffold — typography and grid — that stays out of the way. Everything else gets rebuilt every season to match the clothes. That’s deliberate, and it works for fast fashion at global scale.