Shipping log

Everything that merged, shipped or opened — newest first. Every row links to the project page with its options and decision.

Colour

Two layers: primitives named by what they are, semantic tokens named by role. Components consume only semantic tokens; the brand mode swaps what they resolve to. Brand values are the Colour Alignment set (post-KM review, Aug 26).

Brand-resolved roles live — switch brand in the sidebar

Semantic — text mode-invariant unless marked

Body text floor is Grey 5. Grey 4 and below never carry body text — they fail AA contrast.

Semantic — surface

Semantic — border & icon

Neutrals shared by every fascia

Status never colour alone — always paired with icon or text

Primitives — Debenhams Aqua family locked · names preserved from the DS file

Primitives — boohoo Pink family 12 slots · same structure every fascia

boohooMAN, PLT and Karen Millen carry their colour-alignment CTA set (rendered above when switched); their remaining primitive slots land as each fascia is audited. Removed from the primitive layer: KM mode overrides (re-mapped fresh via semantic layer) and Rewards colours (project dead).

Typography

One role set, every fascia. Sizes are identical across brands — only font family and weight change with the mode. Fixed per-breakpoint sizes (no fluid clamp for v1), line-height mirrors Figma AUTO, letter-spacing defaults to 0.

Roles mobile / desktop px · same for every fascia

Size primitives

10 · 12 · 14 · 16 · 20 · 24 · 28 · 32 · 36 · 40 · 48

Per-fascia resolution colour alignment, Aug 26

Every brand font is a Google Font with the full weight range available. Fonts for the other 11 fascias are captured as each is audited. If a fascia's font ever demands a size shift, it becomes a brand-mode override at the role layer — the default is consistency.

Spacing

We measure spacing in gaps. 1 gap = 4px, so gap N = N × 4px. It is the same unit as Tailwind's spacing scale (1 = 0.25rem = 4px at a 16px root), so gap N is Tailwind N: gap 4 = 16px = p-4 / gap-4 / m-4. Every spacing value is quoted in both: gap 4 (16px).

The scale gap · px · Tailwind · token

In Tailwind assets/ds/tailwind.preset.js

Add the preset to the front end's config — presets:[require('./assets/ds/tailwind.preset.js')] — and load tokens.css. It maps every DS step to its --gap-* token, so p-4 resolves to var(--gap-4) (16px). It extends Tailwind rather than replacing it, so existing classes keep compiling.

Off the DS scale in today's front-end build (from the dev Storybook's compiled CSS): 2.5 (10px) · 3.5 (14px) · 7 (28px) · 9 (36px) · 11 (44px) · 14 (56px). They still work; each should move to the nearest DS step when that component is next touched.

Writing it down: designs, specs, the catalogue and Storybook quote spacing as gap N (Npx). Sizes (a 50px field, a 24px icon) and type (12/15) stay in px — they aren't spacing.

Icon sizes

All icons draw at a 1pt stroke. Buttons use 16 / 20 / 24; 32 and 48 are for hero and decorative use.

Z-index layer scale

Breakpoints deferred — deliberate

The live estate applies breakpoints inconsistently per component; the new system exists partly to fix that. Designers work at 390 and 1440. Components are specced fluid-first; the named breakpoint set gets locked once the component audit reveals real reflow needs.

Radius

4pt corners by default. Square is a brand-mode option, not a fork — PLT and The Brand Room opt in today; any fascia can, by swapping one token mapping.

Semantic mapping

current brand resolves radius/default →

Borders

Everything draws at 1pt — borders, dividers, line icons. 2pt is reserved for focus rings and selected states. No shadow scale: the system is flat, hierarchy comes from borders and surface tones.

Colour conventions

Borders aren't subject to text contrast rules, so every grey is available — the Grey 5 floor applies to text only.

Motion

Conservative by default. Three durations, two curves, and a global collapse to instant under prefers-reduced-motion — built into the token layer, no per-component work.

No shadows

Deliberately flat. If a future component genuinely needs elevation (a floating popover, say), an elevation token gets proposed then — not pre-emptively.

Accessibility

Every component targets WCAG 2.1 AA. Non-negotiable: anything that doesn't meet the bar doesn't ship, and a component spec without an Accessibility section isn't finished.

Exemptions

The Grey 5 floor applies to text only. Borders, dividers, icons and decorative elements may use any grey — Grey 2 is the typical divider, Grey 4 the standard secondary icon.

Using the system

Brand sites install two packages: the tokens and the components. Set one attribute on the root element and every semantic token resolves to that fascia.

Wire in the tokens

Set the brand mode

Use a component

The rules that keep it working

Escape hatch

Components are intentionally constrained. If one genuinely doesn't fit, the source is visible on its page — copy and modify, or raise a request to extend the official component.

Components

The library index. Brand chips show themed coverage; status is live in production or in build.

Product card

The hero asset — built exactly from the Figma component, used across every PLP and carousel. Every optional element is a variable layer: turn it on per fascia, never fork the card.

canvas — product card · all layers on / minimalDebenhams

Plus

AI Generated

Add

Selling Fast!79 Sold

Sponsored

Brand Name

Product name product name product name

£0.00£2.99-30%

+5

(9)

Brand Name

Product name product name

£45.00£60.00

Formats: standard, and .pc--compact — the shorter PLT / Brand Room format (caps brand 11px, 12px name, tighter gaps) that the alignment rolls out to every fascia. Wishlist variants: heart-in-circle (Debenhams, boohoo, Warehouse today) · bookmark-in-square (boohooMAN, KM, Brand Room) · plain heart (PLT). Image corners are square — matching live and Figma.

Variable layers booleans on one component — the Figma model, kept verbatim

Anatomy values

Image 2:3 on surface/media · card gap 12 · info gap 8 · title gap 4 · text 14px — brand w-strong, name w-regular 2-line clamp, was-price w-mid strikethrough · sale price + percent in status red · actions 32px circles, top 8 right 8, gap 8.

Source

assets/ds/components.css → .pc · Figma: DS file → Product Card · 5992-10841 · variable layers on · 12999-146812

Sort & filter

The combined pattern from the A/B/C tests: desktop gets a dropdown row with sort on the right; mobile gets Next Day Delivery + a single Sort & Filter entry opening a full sheet with drill-in panels and a pinned CTA.

canvas — desktop row / mobile barDebenhams

Next Day Delivery Size Colour Brands Style Relevance

Next Day Delivery Sort & Filter

Women's: 12, 14, XS, M, L ×Men's: XS, M, L ×

Filters Relevance

Next Day Delivery Sort & Filter Category Style

Desktop is a strip under the category links: optional NDD toggle, dropdown boxes, "Show more filters", sort right. Mobile (live platform) is the split Filters | Relevance bar; mobile (new format) is the floating pill row — white radius-42 chips with soft shadow, NDD toggle inline, chips open the combined sheet (Brand Room Figma 739-92223).

canvas — mobile filter modal (slide up)Debenhams

Filters

Sort Size Colour Brands Style Price

View products

Source

assets/ds/components.css → .sf · Figma: Sort & Filter combined · 1783-11572 — A/B/C variants live in the same file for the test readout.

Badges

Image-overlay tags (Plus, Petite, Sale, Sponsored) and the AI-generated banner. Badges stack bottom-left, newest on top; the AI banner is a full-width strip pinned to the image foot and is mandatory whenever the imagery is AI-generated.

Rules

Source

assets/ds/components.css → .badge · Figma: AI watermark + stacking · 25-11775 · live demo: ai-generated-badge

Icons

The canonical icon set, pulled from the DS Figma Iconography page. Rules: 1pt stroke everywhere regardless of scale, aspect ratio always locked (render in a fixed square box, object-fit contain — never stretch), default colour icon/primary. PLT runs its own lighter 16px set for header and card chrome.

Core set 136 icons

360

apple

authenticity

duplicate

geolocate

ar

arrow-increase

boohooman-premier

bookmark

plane

48hr-refund

account

account-balance

account-overview

acorn

add

add-photo

addresses

ai

alert

app

assembly

bag

birthday

calendar

camera

card

cash-back

celebrate

checkout

clear

close

collapse

compensation

completion-time

contact-prefs

copy

country-settings

cover

cross-circle

cruelty-free

delete

delivery

delivery-fast

delivery-insurance

down

down-arrow

dress

edit

email

expand

expand-filled

filter

flame

foundation-finder

gift

gift-card

grid

hairadvisor

hamburger-menu

hanger

hide

image

info

leaf

left

light-bulb

link

linked-account

location

lock

lock-fill

makeup-advisor

measure

android-menu

minus

mirror

more

notification

offers

order

paraben

pause

placeholder

play-control

play-thumb

plt-royalty

price-promise

promo-code

question

quick-add

replay

resale

return

return-to-payment

right

right-arrow

room

save

search

settings

share

share-android

show

sign-out

size

skinadvisor

spinner

staff-area

star-fill

star-half

star-outline

subscribe-and-save

suggested-search

support

tick

tick-circle-fill

tick-circle-outline

tile

time

trophy

university

unlimited

unlimited-infinity

unlimited-plus

up

upload

vegan

visually-similar

wishlist

xmas

xmas-tree

palette

quantity

shop

zoom

Social

facebook

instagram

pintrest

tik-tok

x

you-tube

Payment badges

Figma aIHmkCaTy9c5EWOxAGw0So · node 669-2707 (Payment Icons). Raster exports at 3x in assets/ds/icons/pay/, shown at 30px tall in the footer band (C-08) in live order. iDEAL-Wero and Tink exist in Figma but aren't used on boohooMAN.

visa

mastercard

amex

maestro

visa-electron

apple-pay

payplus

paypal

klarna

clearpay

google-pay

Country flags 202 · 24 × 17

Figma aIHmkCaTy9c5EWOxAGw0So · node 5353-2781 (Country Flags, component set Flags). Flat SVGs in assets/ds/icons/flags/, one per country, named by slug (united-kingdom.svg). Globe and EU first, then A–Z. Square, country-selector and PLT header variants in the same frame are built from these.

Globe

European Union

Afghanistan

Albania

Algeria

Andorra

Angola

Antigua and Barbuda

Argentina

Armenia

Aruba

Australia

Austria

Azerbaijan

Bahamas

Bahrain

Bangladesh

Barbados

Belarus

Belgium

Belize

Benin

Bhutan

Bolivia

Bosnia and Herzegovina

Botswana

Bouvet Island

Brazil

Brunei

Bulgaria

Burkina Faso

Burundi

Cambodia

Cameroon

Canada

Cape Verde

Central African Republic

Chad

Chile

China

Colombia

Comoros

Congo

Costa Rica

Croatia

Cuba

Curacao

Cyprus

Czechia

DR Congo

Denmark

Djibouti

Dominica

Dominican Republic

Ecuador

Egypt

El Salvador

Equatorial Guinea

Eritrea

Estonia

Eswatini

Ethiopia

Fiji

Finland

France

Gabon

Gambia

Georgia

Germany

Ghana

Greece

Grenada

Guatemala

Guinea

Guinea-Bissau

Guyana

Haiti

Holy See

Honduras

Hong Kong

Hungary

Iceland

India

Indonesia

Iran

Iraq

Ireland

Israel

Italy

Ivory Coast

Jamaica

Japan

Jordan

Kazakhstan

Kenya

Kiribati

Kuwait

Kyrgyzstan

Laos

Latvia

Lebanon

Lesotho

Liberia

Libya

Liechtenstein

Lithuania

Luxembourg

Madagascar

Malawi

Malaysia

Maldives

Mali

Malta

Marshall Islands

Mauritania

Mauritius

Mexico

Micronesia

Moldova

Monaco

Mongolia

Montenegro

Morocco

Mozambique

Myanmar

Namibia

Nauru

Nepal

Netherlands

New Zealand

Nicaragua

Niger

Nigeria

North Korea

North Macedonia

Norway

Oman

Pakistan

Palau

Palestine

Panama

Papua New Guinea

Paraguay

Peru

Philippines

Poland

Portugal

Qatar

Romania

Russia

Rwanda

Saint Lucia

Saint Vincent and the Grenadines

Samoa

San Marino

Sao Tome and Principe

Saudi Arabia

Senegal

Serbia

Seychelles

Sierra Leone

Singapore

Sint Maarten

Slovakia

Slovenia

Solomon Islands

Somalia

South Africa

South Korea

South Sudan

Spain

Sri Lanka

Sudan

Suriname

Sweden

Switzerland

Syria

Tajikistan

Tanzania

Thailand

Timor-Leste

Togo

Tonga

Trinidad and Tobago

Tunisia

Turkey

Turkmenistan

Tuvalu

Uganda

Ukraine

United Arab Emirates

United Kingdom

United States

Uruguay

Uzbekistan

Vanuatu

Venezuela

Vietnam

Virgin Islands

Yemen

Zambia

Zimbabwe

Usage

Source

assets/ds/icons/lib/ · Figma: Iconography · 470-887

Extended library

Every component harvested from the estate on 08 Sep 2026 — ten repos read end to end (.context/18-component-inventory.md). Colour truth is the colour-alignment set; slot architecture follows Group-Design-System. Switch fascia with the brand button to see each skin. Nothing below carries a hardcoded brand colour.

C-09 · Button system .bd

Five types from the golden matrix (Buy It Now is off on every fascia for now): primary, secondary (white + brand outline), tertiary (Neutral fill, 40px), tertiary XS, text only. States: pressed, disabled (grey on every brand for tertiary), spinner — per Figma 12533:14818 the label gives way to a 24px arc and the fill drops to Neutral. Sizes .sm 6/12 · .md 8/16. Icon slot 20px (.ic24 / .ic16). .pay is the fixed-navy checkout Pay CTA, 8px radius.

canvas — types · statesDebenhams

Add to bagContinue shopping TertiaryTertiary XSText only DisabledDisabled AddedPay £47.99Add photo

C-10 · Payment buttons .pay

Scheme colours are fixed and never brand tokens (DS 9144-1931): PayPal #FFC439 (KM runs PayPal on #EEEEEE via --paypal), Apple Pay black, Google Pay white with #3C4043 border, Klarna #0B051D, Clearpay #B2FCE4. .pay--mini 114px, .pay--glass 25px radius + blur for floating chrome. Artwork is the frame's own exports in assets/ds/icons/payments/.

canvas — wallets · payment-option chipsDebenhams

or

C-11 · Form controls

Floating-label field (default / focus / filled / error — label shrinks 14→12 and the input grows in), select driven by a real native <select>, 24px checkbox filled with --icon-action, 26px radio, toggle, 28px quantity stepper (minus becomes remove at 1), promo field + 95px Apply, and the PSP static field set — fixed navy / #EFEFF1 / 8px radius on every fascia, because the payment provider renders it.

C-12 · Messaging

Banner: 4px status bar + 20px icon + text, optional inline action and dismiss; success / neutral (never dismissible — it's a readout) / error. Toast: bottom black snackbar (1.8s) or top light actionable (6s, "View"). Stock alert and empty state round it out.

canvas — banners · alertsDebenhams

Promo code SUMMER applied — £6.00 off

Gift card balance: £25.00Apply

We couldn't find that gift card. Check the number and PIN.

Only 2 left — order soon

Your bag is empty

Continue shopping

C-13 · PDP kit

Price block (now / was / save badge — PLT's is transparent with #C90000 / promo line / OOS label), size selector 60×50 with three OOS treatments (greyed, strike, notify bell), 60×89 colour image swatches with the black-plus-white-keyline selection, accordion, section header + rail, USP box (DS 3619-10541), BNPL (DS 2969-10048), free-delivery threshold (BBz64OeCbe5TBmYKbCxvCp), Deliver+ banner and bag module skinned per fascia (SEEL 2026), at-a-glance list.

canvas — price · sizes · swatches · accordionDebenhams

£70.00£139.00Save 50%

£63.00 with code FASHION

Size: MSize guide

XSSMLXLOne size

Description

Long sleeve lace and pleated midi shirt dress in pink. Regular fit, concealed zip.

Delivery & returns

Free returns within 28 days.

Next day delivery

Order by midnight

Free returns

28 days, in store or by post

Spend £12.01 more for free delivery

Congratulations, you're eligible for free delivery

Pay in 3 interest-free payments of £23.33

18+, T&C apply. Credit subject to status. See more

Elevate your experience

• +14-day return extension
• £5/day late delivery compensation
• Full order coverage with instant payout

Learn more

• ✓Regular fit
• ✓Machine washable
• ✓Recycled polyester

C-14 · Overlays & bag

One sheet shell: scrim 40%, white panel with 4px top radius to 100% − 56px on mobile, a centred 480px card from 768px; .sheet--auto hugs content (Added to bag), .sheet--dark is the VTO gradient variant with a 12px radius and safe-area padding. .modal is the centred card that scales in from 0.96. Bag line item is the 99×148 grid; order summary sits on Grey 05.

canvas — bag line · summary (sheet shown inline)Debenhams

Added to bag ×

Coast

Long Sleeve Lace and Pleated Midi Shirt Dress

Size 12 · Pink

£70.00£139.00

Continue shoppingView bag

Subtotal£70.00

DeliveryFREE

Discounts −£6.00

Order total£64.00

C-15 · Chips & pills

canvasDebenhams

All itemsNew inSale Next Day Delivery Size ▾ Active3Save 5% Virtual try on2

C-16 · Account

Balance card fills per fascia (--card-bg: Debenhams aqua gradient, boohoo/MAN black, PLT garnet, KM orange), 62.5px numeral with tight tracking, loyalty label in caps (Royalty / Unlimited / Premier). Rows are white panels on --page-bg with a 24px icon, status text and an 8px status dot.

canvasDebenhams

£12.00

Unlimited balance

View balance

My orders1 on its way UnlimitedActive

C-17 · AI Generated strip — the rules

From the AI-generated-badge proposal (EU AI Act Article 50(4), live 02.08.26; ASA covers the UK). The strip is live text, never a rasterised layer (screen readers, the 10px legal floor, localisation, badge shifting); it owns the bottom edge of the image at every size; every other badge shifts up by exactly --ai-h; wishlist and quick add stay top-right; Sponsored stays below the image except in PLP grid view where it becomes a badge and no other badge shows. Placement is driven by an image-level AI flag everywhere before add-to-bag; hidden in bag / mini bag / checkout — legal sign-off required. Alt text appends "AI generated image". See C-07 for the strip itself.

C-18 · Square tile rail .tile-rail

canvas — Brand Room brand / category railDebenhams

TopsJeansJackets

Source

assets/ds/components.css → EXTENDED LIBRARY · assets/ds/tokens.css → EXTENDED COMPONENT TOKENS · Inventory: .context/18-component-inventory.md (+ four full repo reads in .context/inventory/) · Backlog not yet ported: PDP gallery, Shop The Look + bundle family, notify-me form, VTO flow, Brand Room nav/drawer/hero family, checkout saved-card rows, glass nav chrome (app), request-form kit.

Component library

Every component in the system, live, in the brand you have selected. Open one for what it is, when to use it and how it is built. The same catalogue generates our Storybook for the dev team.

Dev alignment

The front-end team's Storybook has 79 components across 178 stories, themed for 21 fascias. This is how it overlays with ours — component by component, token by token — and what the shared build should become.

How the devs build React · Tailwind · per-fascia CSS variables

Components are React with Tailwind utility classes. A variant prop selects a class string (Button has 19). Theming is a flat list of ~25–67 CSS variables per fascia — RGB triplets like --color-primary: 123 231 216 — read by utilities such as bg-primary, font-cta and rounded (which resolves --default-rounding: 0 on PLT and Brand Room — exactly our square modes). Greys are fixed utilities on the same Grey 1–6 ramp we use. Fonts per fascia match ours except Karen Millen (dev runs Work Sans for CTA and headings) and Warehouse (Roboto). A fascia toolbar global switches the theme; our Storybook exposes the same global mapped onto data-brand.

The plan: our catalogue is the visual target. Where a dev component matches, the dev build adopts our tokens and states; where it is partial, the Docs note says what to add on which side; where we have no counterpart it is a new component for us to spec; where they have no counterpart it is a new component for them to build from our story.

Component overlay dev → ours

Token map dev theme variables → our semantic tokens

Source

.context/inventory/05-dev-storybook.md — the full ingest: every component with its props, per-fascia theme variables, 1440 + 390 renders of all 178 stories. DG Group Design System Storybook ↗ — generated from the same catalogue (storybook/).

Changelog

What was added, changed and fixed in the design system in each iteration, newest first, and which project drove it. Projects build only from these components: a wrong one is fixed here and pushed back, a missing one is added here first.

Foundations

The general rules every component is built from — colour, typography, spacing, radius, borders, motion, accessibility, and how to use the system. One page; jump with the chips.

Projects

Every project in the estate, one click away. Prototypes open in a new tab; the repo link is the record (brief, options, decisions).

The record briefs · options · chosen routes

Every brief as a record: what was explored, what won, and where it lives now. Delivered work merges to the master prototype.

PLP Redesign

Open prototype ↗

Align boohoo, boohooMAN, PLT, Warehouse and The Brand Room onto one core PLP template. Differences become configuration, not forks. PLT is the reference implementation.

Options

Requirements from the brief

CTA Colour Alignment

Open prototype ↗

Final styling per fascia across five core screens, plus the golden-truth button state matrix. The Colour page renders this project's output.

Routes explored

New Checkout

Open prototype ↗

One smart field between donation and payment that accepts a promo code or a gift card number and works out which it's been given. Single self-contained prototype.

All brands

Every fascia in the group. Pick one for its own page: logo downloads in black or white as SVG or PNG, brand guidelines, colour and type. Opening a brand also previews it across the system.

Debenhams Group Debenhams boohoo boohooMAN PrettyLittleThing Karen Millen Warehouse The Brand Room Debenhams Outlet Wallis Burton Principles Coast Oasis Dorothy Perkins Misspap DSGN Studio Training Dept

Modes data-brand — the only theming mechanism

One attribute on the root element themes everything: colours, font, weights, radius, case. No per-brand CSS files, no component forks. All 17 fascias are modes today.