H&M DESIGN.md

Design System Inspiration of H&M

Overview

Visual Theme & Atmosphere

H&M began as a single womenswear store. In 1947 Swedish entrepreneur Erling Persson opened it in Västerås after a trip to New York, and called it Hennes, Swedish for "Hers"; he designed the logotype himself. The first Stockholm store followed in 1952. In 1968 the company became Hennes & Mauritz and added menswear and childrenswear. Today H&M Group is a family of brands with over 4,000 stores in more than 80 markets and online sales in over 60, and H&M is its flagship.

The German storefront measured here is dark: a black ground, near-white #f2f2f2 type, and the red logo #eb0010 as the only colour on the chrome. Controls are square, text-only and set in HM Slussen, the group's own sans, at a light weight. Colour comes from the photography.

What makes it worth reading:

• A locale-aware type system in CSS. 11,217 of the 11,430 --fds-* properties are typography. Each style — display, heading, body, label, price, nav — is repeated per locale, and the font family changes where the script needs it (Hebrew, Traditional Chinese).
• Campaign palettes as tokens. Black Friday, Cyber Monday, sale, deals and gift-giving each get the same seven slots — background, icon, text, border, title text, primary, primary hover and pressed.
• Square and quiet. Buttons and inputs have no radius and no fill; hover dims the label.

Primary tasks

• Browse women, men, kids and home; search; open a product.
• Sign in; manage favourites and the basket.

Brand Narrative

From a Västerås store named Hennes to a group of brands in more than 80 markets, H&M has kept its promise of accessible fashion. The storefront keeps the interface out of the way — black, white, a red logo — so the photography sells. Underneath sits the Fabric Design System, which H&M Group serves under its own domain. Its tokens carry typography for every locale the shop speaks, and a palette for each sales moment.

Principles

• Photography first. The chrome recedes.
• One red. The logo is the colour.
• Every locale typeset. Type tokens change family by script.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on www2.hm.com/de_de: 14,556 root custom properties — --fds-* 11,430, --interactive-* 1,070, --heading-* 495, --editorial-* 444, --price-* 341, and smaller --body-*, --display-*, --label-* groups. No framework namespace. Values below are the theme that rendered.

Ground and ink

• Background (#000000) — --fds-color-background-default; the body.
• Foreground (#f2f2f2) — --fds-color-text-default; text, borders and icons.
• Text subtle (#a0a0a0) — --fds-color-text-subtle; the hover state of calls to action.
• Sunken (#333333) — --fds-color-background-sunken.
• Border subtle (#5a5a5a) — --fds-color-border-subtle.
• White (#ffffff) — --fds-color-fill-selected.

Brand

• Logo (#eb0010) — --fds-color-fill-logo; also --fds-color-text-discount.
• Favourite (#e50010) — --fds-color-fill-favourite.

Fills

--fds-color-fill-primary #f2f2f2 → hover #e6e6e6 → pressed #cccccc. --fds-color-fill-secondary #000000 → hover #4d4d4d → pressed #737373.

Status and focus

Attention #ed4d58 (text) · Success #00713d (fill) · Warning #995e00 (fill) · Info #66bdff (text) · Focused border #99d3ff (--fds-color-border-focused).

A base palette of 16 --fds-global-color-swatch-* values uses plain colour names (red #ff0000, blue #00a1ff, beige #eccc9b …) for product colour swatches, not brand.

Typography

Font family

HM Slussen — the first family on body, headings and buttons, loaded as a web font (document.fonts). H&M Group's corporate site, hmgroup.com, sets its header in the same face ('HMSlussen'). The fallback stack continues through Japanese system fonts. A serif, "HM Sergel", is named for parent navigation labels (--interactive-navigation-parent-font-family); it was not loaded on the page measured. AdobeClean also loaded, from an embedded widget, and is not part of the brand.

Scale

--fds-text-<role>-<size>-[locale-<xx-xx>-][breakpoint-<name>-]<property> — roles include display, heading (s–xxl), body (s, m), label, link, action, nav and price. Every sampled heading and body step sets font-weight: 100; the controls measured are 14px at 100.

Layout

• Photography carries the page; chrome is black and text-only.
• Spacing: --fds-spacing-* 0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 96, 128, 160px, each in px and rem.

Responsive Behavior

Not measured. Desktop only. The type tokens carry breakpoint variants.

Elevation & Depth

Almost none. --fds-color-utility-shadow is #0000001a; one rendered shadow, rgba(34,34,34,0.05) 0 0 32px 0, belongs to an overlay.

Motion & Easing

Controls declare transition: all without a duration in the computed shorthand. Not measured further.

---

Tier 1 sources: https://www2.hm.com/de_de/index.html (live homepage — 14,556 root custom properties read via getComputedStyle, HM Slussen loaded, four components measured at rest, hover and focus after declining non-essential cookies, captured 2026-09-26 through Aside); http://cinfprxnprci.hm.com/ ("Fabric Design System - H&M Group" — title read; nonsense path returns 404, read 2026-09-26); https://hmgroup.com/about-us/ (About H&M Group — over 4,000 stores in more than 80 markets, "From a single store in 1947"; header set in HMSlussen, read 2026-09-26); https://hmgroup.com/about-us/history/ (Our history — Erling Persson, Västerås 1947, Hennes, Stockholm 1952, Hennes & Mauritz 1968, read 2026-09-26)

Components

Measured on the home page after declining non-essential cookies, focus read under a real Tab key, and a hover counted only when :hover matched.

• Call to action — Jetzt shoppen: text only, #f2f2f2, no fill, no radius, 48px, 14px/100. Hover fades the label to #a0a0a0. Focus draws the browser's auto ring.
• Search and login — Suchen and Einloggen in the header: the same, with the same fade.
• Navigation link — Damen: #f2f2f2, 14px/100. Hover changes nothing; focus draws no indicator.

Radius

Square. --interactive-border-radius is 0, and the only rounded value rendered was a 34px element.

States

Hover: calls to action, search and login dim to #a0a0a0; navigation links do not change. Focus: the browser's ring on the first three, nothing on navigation. Press was not measured.

Do's and Don'ts

Do

• Keep the chrome black and white and let photography carry colour; red #eb0010 is the logo.
• Set type in HM Slussen at a light weight.
• Keep controls square and text-only; dim to #a0a0a0 on hover.

Don't

• Don't read the swatch palette (#ff0000, #00a1ff …) as brand colours.
• Don't round buttons or add shadows.
• Don't treat a campaign palette as the default theme.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#000000 ground · #f2f2f2 text · #a0a0a0 subtle / hover · #eb0010 logo · #e6e6e6 / #cccccc primary fill hover and press · #4d4d4d secondary hover · #99d3ff focused border

Example Component Prompts

• "A square, text-only 48px call to action on black: #f2f2f2 14px HM Slussen at weight 100; hover dims it to #a0a0a0."
• "A black header with a red #eb0010 logo and white text-only Search and Login controls."