Button

Triggers an action or navigates; comes in primary and secondary variants with matching disabled and link forms.

Primary
Secondary
Primary disabled
Secondary disabled
As link Go somewhere
--color-container-inverse --color-text-inverse --color-text-default --color-border-inverse --layout-spacing-xs --layout-radius-sm --font-size-sm

Icon Button

Square icon-only button that matches the Button interaction model; requires an accessible aria-label.

Primary
Secondary
Primary disabled
Secondary disabled
--color-container-inverse --color-graphic-inverse --color-graphic-default --color-border-inverse --layout-radius-sm --layout-spacing-2xs

Link Item

Typographic link in four hierarchy variants: primary, secondary, tertiary, and inline.

Primary View project
Primary + icon View project
Secondary Secondary link
Tertiary Tertiary link
Inline

Some copy with an inline link inside it.

Disabled Disabled link
--color-text-default --font-size-sm

Checkbox

Binary selection control with a custom box and checkmark, supporting checked, unchecked, and disabled states.

Unchecked
Checked
Disabled unchecked
Disabled checked
--color-container-inverse --color-container-default --color-border-mid-2 --color-border-inverse --color-text-inverse --layout-spacing-xs --layout-radius-2xs

Radio

Single-selection control with a circle indicator; mirrors Checkbox states.

Unchecked
Checked
Disabled unchecked
Disabled checked
--color-container-inverse --color-container-default --color-border-mid-2 --color-border-inverse --layout-spacing-xs

Text Field

Labeled text input with six visual states driven by interaction or the forceState prop.

Inactive
Label
Placeholder text
Hover
Label
Placeholder text
Focused
Label
Placeholder text
Activated
Label
Filled in value
Error
Label
Wrong value

This field is required

Disabled
Label
Placeholder text

Padding normalised to sit alongside Merch Tools.

--color-container-default --color-text-default --color-text-error --color-border-inverse --color-border-error --layout-radius-2xs

Chip

Filter chip with pill geometry. Selected state shows inverse fill; hover shows stroke ring; dismiss icon shown by default.

Rest
Selected
Interactive
Disabled
No dismiss
With expand
Both icons
--color-container-inverse --color-container-inverse-a30 --color-border-inverse --color-text-default --color-text-inverse --type-role-button-1 --layout-radius-sm --layout-spacing-md --layout-spacing-xs --layout-size-md

Filter Item

Filter dropdown trigger + expandable options panel.

material (open)
Material
Item 00
Item 00
Item 00
Item 00
Item 00
Item 00
size (open)
Size
XXS
XS
S
M
L
XL
XXL
colour (open)
Colour
Item 00
Item 00
Item 00
Item 00
Item 00
Item 00
closed (md)
Material
xs breakpoint (accordion, expanded)
Material
Item 00
Item 00
Item 00
Item 00
Item 00
Item 00
Size
XXS
XS
S
M
L
XL
XXL
Colour
Item 00
Item 00
Item 00
Item 00
Item 00
Item 00
--color-text-default --color-container-default --color-border-mid-2 --color-container-inverse-a10 --color-graphic-default --color-graphic-inverse --layout-spacing-sm --layout-spacing-xs --type-role-button-1

Sort Item

Sort dropdown trigger + radio options panel.

md open
Sort by
Item
Item
Item
Item
Item
Item
md closed
Sort by
xs breakpoint (accordion, expanded)
Sort By
Item
Item
Item
Item
Item
Item
--color-text-default --color-container-default --color-border-mid-2 --color-container-inverse-a10 --layout-spacing-sm --layout-spacing-xs --type-role-button-1

Filter Applied

Strip of applied filter chips; 4 breakpoints.

lg (row)
sm (row, with side padding)
xs (stacked column, 376px)
--color-container-inverse-a10 --layout-spacing-xs --layout-spacing-sm --color-container-inverse --color-text-inverse --layout-size-md --layout-radius-sm --layout-spacing-md

Filter Sort Overlay

Full-screen xs mobile overlay triggered by the xs "Filters" / "Sort By" buttons in Filters. Types: 'filters' or 'sort'.

type="filters"
Colour
Item 00
Item 00
Item 00
Item 00
Item 00
Item 00
Size
XXS
XS
S
M
L
XL
XXL
Material
Item 00
Item 00
Item 00
Item 00
Item 00
Item 00
type="sort"
Sort By
Item
Item
Item
Item
Item
Item
--color-container-default --color-container-inverse-a10 --color-container-inverse --color-border-inverse --color-text-default --color-text-inverse --layout-spacing-sm --type-role-button-1

Filters

Top-level filter/sort bar.

lg – with applied filters
Material
Size
Colour
Sort by
sm – with applied filters
Material
Size
Colour
Sort by
md – no applied filters
Material
Size
Colour
Sort by
xs (376px) – two buttons + applied filters
--color-border-mid-2 --color-border-inverse --color-text-default --layout-spacing-sm --layout-spacing-md --type-role-button-1

Colour Icon

Circular colour swatch button with selection indicator ring.

States – dark contrast
link
active
disabled
States – light contrast
link
active
disabled
--color-border-inverse --color-text-inverse --color-text-default

Size Item

Size selector in American or UK/IT sizing conventions. States compared side by side below; the interactive grid follows.

Inactive
Selected
Unavailable
XL

Source: mox-components-front-end.json → size-item. All variants specify radius/radius-none (0px). Built component uses --layout-radius-xs (8px) – divergence, noted in AUDIT.md.

American grid (M selected, L out of stock)
UK/IT grid (42 selected)
--color-container-inverse --color-text-default --color-text-inverse --color-border-mid-2 --color-border-inverse --layout-spacing-2xs --layout-radius-xs

Colour Item

Row combining colour-icon, label, and optional stock count. States: default, hover, disabled, link.

States
Cherry Red 3
Ocean Blue 7
Yellow Gold 1
Stone Grey 0
--color-text-default --layout-spacing-2xs

Colour Range

Vertical list of colour-item rows. Extracted variant: type=placeholder.

Cherry Red 3
Ocean Blue 7
Yellow Gold 1
Stone Grey 0

Size Range

Wrapping grid of size-item cells.

American (L selected)
UK/IT
--layout-spacing-2xs --color-container-inverse

Badge

Extracted from. Seven label variants; visual properties are identical across all – only text content differs.

Pre-order Pre-order
Out Of Stock Out Of Stock
New Arrival New Arrival
On Sale On Sale
Exclusive Exclusive
Limited Edition Limited Edition
Best Seller Best Seller
--color-container-inverse-a10 --color-text-default --type-role-overline --layout-spacing-xs --layout-spacing-2xs

Loader

Extracted from. Linear progress indicator for loading states.

25%
50%
75%
100%
--color-container-default --color-graphic-default --layout-size-2xs --layout-radius-2xs

Loader Circular

Extracted from.

25%
50%
75%
100%
--color-container-inverse-a10 --color-graphic-default

Progress Bar Player

Extracted from.

0% playback, 50% buffered
50% playback, 100% buffered
100% playback
--color-container-inverse-a10 --color-container-inverse-a30 --color-graphic-default --layout-size-2xs --layout-radius-2xs

Indicator Slider

Extracted from.

index 0 of 4
index 1 of 4
index 2 of 4
index 3 of 4
--color-container-inverse-a10 --color-graphic-default --layout-size-2xs --layout-radius-2xs

Indicator Oval

Extracted from.

invert (dark bg) – 2 dots, pos 0
invert – 4 dots, pos 2
default (light bg) – 2 dots, pos 1
--color-container-inverse-a30 --color-container-default-a30 --color-graphic-inverse --color-graphic-default --layout-spacing-xs --layout-spacing-2xs

Indicator Flat

Extracted from.

invert, 2 bars, pos 0
invert, 4 bars, pos 2
default, 2 bars, pos 1
--color-graphic-inverse --color-graphic-default --layout-spacing-xs --layout-size-2xs

Primary Text Item

Extracted from.

Left – label + heading + sub + 2 links

New collection

Autumn Winter 24

Refined essentials for the season ahead. Crafted in natural fibres.

Shop womenShop men
Centre – heading + sub, no label, 1 link

Our story

Built on craft, worn with intention.

Learn more
Heading only – no sub, no links

Sustainability

Made to last

--type-role-display-1 --type-role-overline --type-role-body-1 --type-role-button-1 --color-text-default --color-border-default --layout-spacing-xs --layout-spacing-sm --layout-spacing-md

Secondary Text Item

Extracted from.

Left – collapsed (View more)

About us

Why we make things

We started with a single question: what does it mean to make something well? Over a decade and several hundred conversations with makers, buyers, and wearers, the answer has continued to evolve. But the core has stayed the same: honest materials, considered process, long life.

Left – expanded (View less)

About us

Why we make things

We started with a single question: what does it mean to make something well? Over a decade and several hundred conversations with makers, buyers, and wearers, the answer has continued to evolve. But the core has stayed the same: honest materials, considered process, long life.

Centre – no label

Our approach

The work is in the making. Every garment passes through many hands before it reaches you – and every one of those hands matters.

--type-role-display-1 --type-role-overline --type-role-body-1 --color-text-default --layout-spacing-xs --layout-spacing-sm --layout-spacing-md

Collection Card Item

Extracted from. Near-identical structure to ProductCardItem but serves a collection.

Full – badge + indicators + text + CTA
New Arrival

Summer Essentials

12 pieces, 6 colours

View collection
Default – name + description + CTA

Autumn Knitwear

8 pieces

View collection
Minimal – image + CTA only
View collection
--type-role-headline-3 --type-role-body-1 --type-role-overline --type-role-button-1 --color-text-default --color-container-inverse-a10 --color-container-inverse-a30 --color-border-default --layout-spacing-sm --layout-spacing-xs --layout-spacing-2xs

Editorial Card Item

Extracted from.

Full – text + CTA + image + indicators

The Art of Slow Fashion

A conversation about craft

Read more
Default – text + CTA + image

Autumn Colours

8 looks, 3 palettes

Read more
Image only – no text
--type-role-headline-3 --type-role-body-1 --type-role-button-1 --color-text-default --color-container-inverse-a30 --color-border-default --layout-spacing-sm

Primary Text

Full-width section wrapper for PrimaryTextItem.

Our story

Made to last

Every piece is designed with a single rule: it should look better in ten years than it does today.

About usView collection
--layout-spacing-md --layout-spacing-sm

Secondary Text

Full-width section wrapper for SecondaryTextItem.

Materials

What we use

We source from a small number of mills we've worked with for over a decade. Each one is chosen for the consistency of their yarn, the durability of their finish, and their willingness to say no to shortcuts. We visit twice a year, not to inspect, but to understand what's possible with the season's raw materials before we design anything.

--layout-spacing-md --layout-spacing-sm

Accordion Item

Extracted from nodes 51:619 / 51:640 / 51:661.

Primary (button-2, 23px Bold)

Section A
Section B
Section C
Unavailable

Secondary (button-1, 13px Bold)

Sub-section A
Sub-section B
Unavailable

Tertiary (body-1, 16px Regular – leftIcon default true)

Nav item
Nav item
Nav item
Unavailable
--type-role-button-2 --type-role-button-1 --type-role-body-1 --color-text-default --color-container-inverse-a10 --color-border-inverse --layout-spacing-xs --layout-spacing-sm

Header

Standalone header bar – nav links + logo + icons.

WomenMenSaleCollectionsAboutStores
--color-container-default --color-border-mid-2 --color-text-default --layout-spacing-sm --type-role-button-1

Md Navigation Item

One column of the desktop mega-menu panel.

With promo
Women
Links only
Men
Longer list
Sale
--color-text-default --type-role-button-1 --type-role-body-1 --layout-spacing-sm --layout-spacing-xxs

Xs Navigation Item

Mobile navigation accordion panel with three level variants.

Level 1 (button-2, 23px Bold uppercase)
  • Women
  • Men
  • Sale
  • Collections
  • About
  • Stores
Level 2 (button-1, 13px Bold uppercase)
  • Dresses
  • Tops
  • Knitwear
  • Trousers
  • Coats
  • Accessories
Level 3 (body-1, 16px Regular, no icon) + promo
  • Midi dresses
  • Maxi dresses
  • Mini dresses
  • Wrap dresses
--color-border-mid-2 --color-text-default --layout-size-md --layout-spacing-xs --layout-spacing-sm --layout-spacing-md --type-role-button-2 --type-role-button-1 --type-role-body-1

Pagination

Sequential page navigation with previous/next arrows and numbered page buttons; fully interactive.

Interactive (page 2 of 5)
--color-container-inverse --color-container-mid-2 --color-text-default --color-text-inverse --layout-spacing-2xs --layout-radius-xs --font-size-xs

Breadcrumbs

Extracted from MOX nodes 141:32364 + 141:32770.

--color-border-mid-2 --color-text-default --type-role-body-1 --layout-spacing-xs

Navigation Options

Extracted from MOX. Mobile variant exists in Figma but is not wired here – handled by Navigation.svelte.

Women
Men
Sale
Collections
About
Stores
--color-container-default --layout-spacing-md --layout-spacing-sm

Navigation

Extracted from MOX. Full site navigation: header bar + optional NavigationOptions panel.

--color-container-default --color-border-mid-2 --color-text-default --layout-spacing-sm --type-role-button-1

Footer Item

One column of the site footer.

10 links (max)
Women
5 links
Men
3 links
About
--color-text-default --type-role-button-1 --type-role-body-1 --layout-spacing-sm --layout-spacing-xxs

Bar

Carousel / slider navigation control: prev button + optional indicator + next button.

none – prev disabled, next link
none – both link
slider
oval
flat
--layout-spacing-sm --layout-spacing-md --color-container-inverse-a30 --color-border-inverse --layout-spacing-2xs

Toolbar

Product-list page toolbar – shows result count, optional "show all" link, and a view-mode toggle.

All options visible, activeView=one
12 / 140 Show all
View:
One Two
activeView=two, no showAll
140 / 140
View:
One Two
No view toggle
6 / 6 Show all
--color-border-mid-2 --layout-spacing-sm --layout-spacing-xs --type-role-body-1 --type-role-button-1 --color-text-default

Player

Video control panel: fullscreen button + ProgressBarPlayer + controls row.

stopped, 0%
00:00
playing, 40% buffered, 30% progress
00:12
--layout-spacing-md --color-container-inverse --layout-spacing-2xs --layout-spacing-xs --type-role-button-1 --color-text-default

Video

Extracted from MOX.

centre text + controls

Title

Play
00:00
controls only, no text
00:00
--type-role-display-1 --color-text-default --color-border-inverse --layout-spacing-md --layout-spacing-sm

Product Card Item

Extracted from. Size chips are inline.

Full – badge + indicators + sale
New Arrival

Merino Crew Neck

Classic fit, 100% merino

£120 £160 -25%
View product
Default – name + price + size + CTA

Linen Trousers

Relaxed fit

£95
View product
Minimal – name + CTA, no size/swatches

Silk Scarf

£65
View product
--type-role-headline-3 --type-role-body-1 --type-role-overline --type-role-caption-1 --type-role-button-1 --color-text-default --color-container-inverse-a10 --color-container-inverse-a30 --color-border-default --layout-spacing-2xs --layout-spacing-sm --color-container-primary --color-text-primary

Product Detail Image

Full-width image viewer with three overlay elements: Badge top-left, IndicatorOval bottom-centre, expand button bottom-right.

all overlays visible
New Arrival
badge only (no expand, no indicators)
New Arrival
no overlays
--color-container-inverse --color-container-inverse-a10 --color-container-inverse-a30 --layout-spacing-2xs --layout-size-md --layout-radius-sm

Product Detail Sidebar

Extracted from MOX. Product info panel: intro, options, payment, description, details.

Product name

Subtitle

New Arrival
£375 £750 - 50%
Size Guide

All sizes are Italian. Convert your size here.

Buy now, pay in 3 instalments with

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum, ante a elementum egestas, est lectus aliquam orci, et blandit ex diam sit amet dui. Vestibulum lacinia mi consequat purus porta aliquam. Nulla facilisi.
View more
Composition & Care
Delivery & Returns
Sustainability
discount visible, no description/details

Merino Wool Coat

Long cut, relaxed fit

New Arrival
£475 £950 - 50%
Size Guide

All sizes are Italian. Convert your size here.

Buy now, pay in 3 instalments with

--type-role-headline-2 --type-role-body-1 --type-role-button-1 --color-text-default --color-text-inverse --color-container-inverse --color-border-mid-2 --layout-spacing-sm --layout-spacing-xs --layout-size-md --layout-radius-sm

Reasons To Buy Item

Atomic item: calendar icon + link label + description.

md – no divider
Free UK Delivery On all orders over £150
md – three items side by side
Free UK Delivery On all orders over £150
Hassle-free Returns 30 days, no questions asked
Sustainably Made Certified B Corp since 2019
xs – divider mode (stacked list)
Free UK Delivery On all orders over £150
Hassle-free Returns 30 days, no questions asked
Sustainably Made Certified B Corp since 2019
--color-text-default --layout-spacing-xs --type-role-button-1 --type-role-body-1 --color-border-mid-2 --layout-spacing-md

Reasons To Buy

Composition: 4× ReasonsToBuyItem in a centered horizontal row.

default – 4 items, comfortable/desktop
Link Description
Link Description
Link Description
Link Description
custom items
Free UK Delivery On all orders over £150
Hassle-free Returns 30 days, no questions asked
Sustainably Made Certified B Corp since 2019
Secure Checkout SSL encrypted payments
--color-border-mid-2 --layout-spacing-md --layout-spacing-sm

Product Detail

Page composition: image gallery + ProductDetailSidebar.

default – comfortable/desktop

Product name

Subtitle

New Arrival
£375 £750 - 50%
Size Guide

All sizes are Italian. Convert your size here.

Buy now, pay in 3 instalments with

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum, ante a elementum egestas, est lectus aliquam orci, et blandit ex diam sit amet dui. Vestibulum lacinia mi consequat purus porta aliquam. Nulla facilisi.
View more
Composition & Care
Delivery & Returns
Sustainability
no description, no details

Silk Crepe Blouse

Ivory

£495
Size Guide

All sizes are Italian. Convert your size here.

Buy now, pay in 3 instalments with

--layout-spacing-md --layout-spacing-sm

Single Feature

Full-bleed hero: image fills width, text overlays or stacks below.

Overlaid / left / placeholder image

New collection

The Edit

Considered pieces for the considered wardrobe.

Shop nowLearn more
Stacked / below image

Materials

What we use

Each cloth chosen for what it does over ten years, not what it looks like in week one.

Read more
--layout-spacing-sm --layout-spacing-md --layout-spacing-lg --color-text-default

Double Feature

Extracted from.

Summer Essentials

12 pieces, 6 colours

View collection

Autumn Knitwear

8 pieces, 4 colours

View collection
--color-border-mid-2 --layout-spacing-lg --layout-spacing-sm