Prototype

SizeMatters — prototype

Design reference for the new sizematters.com: every screen and every state, at 1920 / 1440 / 768 / 375. A screen with a page links to it; state chips open that state directly; Figma links go to the frame of each width. The badge says how far the screen has gone.

25 screens15 states 4 pages4 widths

approved: signed off by Max
ready: spec, page and screenshots ready — waiting for Max
built: page exists, not yet handed off
planned: no prototype page yet

Phase 0 — Foundation & global elements

Prototype hub

docs/screens/hub.md

built

Pageindex.html

States
—

Figma
—
Tokens sheet

docs/design-system.md

planned

Pagepages/tokens.html

States
—

Figma
—
Global elements

docs/screens/global.md

Header (search, account, cart — no wishlist; burger in the compact header), mobile menu, search overlay, cart, toasts, cookie banner.

planned

Pagepages/global.html

States
—

Figma
—

Phase 1 — Home

Home

Brief 1 · docs/screens/home.md

Main version approved 28.10.2026.

approved

Pagepages/home.html

States
scrolled spec-02 spec-03 spec-04 field-02 field-03

Figma
1920 1440 768 375 spec-02 spec-03 spec-04 field-02 field-03

Phase 2 — Catalog

Catalog · all products

Brief 2 · docs/screens/catalog.md

Figma: Default at 4 widths, every state at 1920 and 375. Prototype: real filters, sort and load more over products.json; the category bar sticks under the header.

built

Pagepages/catalog.html

States
scrolled sort filters filtered no-results loaded

Figma
1920 1440 768 375 scrolled 1920 scrolled 375 sort 1920 sort 375 filters 1920 filters 375 filtered 1920 filtered 375 no-results 1920 no-results 375 loaded 1920 loaded 375
Category (template)

Brief 2.1–2.4 · docs/screens/catalog.md

The catalog template with one category: pages/catalog.html?category=storage|gloves|accessories|apparel. Caps: one model, 18 prints — lookbook grid later.

built

Pagepages/catalog.html

States
category

Figma
—
Search results

docs/screens/catalog.md

Not in the brief: the search icon in the header needs a results page.

planned

Pagepages/search.html

States
—

Figma
—

Phase 3 — Product

Product (template)

Brief 3 · docs/screens/product.md

Designed in Figma: gloves (hand + size S–XXL) at 4 widths; cap with 18 prints and the size guide at 1920 and 375. Prototype page next.

planned

Pagepages/product.html

States
size-guidecap

Figma
1920 1440 768 375 size-guide 1920 size-guide 375 cap 1920 cap 375

Phase 4 — Cart & checkout

Cart

Brief 4 · docs/screens/cart.md

planned

Pagepages/cart.html

States
—

Figma
—
Checkout · delivery

Brief 5.1 · docs/screens/checkout.md

planned

Pagepages/checkout-delivery.html

States
—

Figma
—
Checkout · payment

Brief 5.2 · docs/screens/checkout.md

planned

Pagepages/checkout-payment.html

States
—

Figma
—
Order placed

Brief 5.3 · docs/screens/checkout.md

planned

Pagepages/checkout-success.html

States
—

Figma
—

Phase 5 — Account

Sign in

Brief 6.1 · docs/screens/account.md

planned

Pagepages/account-login.html

States
—

Figma
—
Create account

Brief 6.1 · docs/screens/account.md

planned

Pagepages/account-register.html

States
—

Figma
—
Account · orders

Brief 6.2 · docs/screens/account.md

planned

Pagepages/account-orders.html

States
—

Figma
—
Account · profile

Brief 6.3 · docs/screens/account.md

planned

Pagepages/account-profile.html

States
—

Figma
—
Account · returns

Brief 6.4 · docs/screens/account.md

planned

Pagepages/account-returns.html

States
—

Figma
—

Phase 6 — Brand

About

Brief 7.1 · docs/screens/brand.md

planned

Pagepages/about.html

States
—

Figma
—
Become a dealer

Brief 7.2 · docs/screens/brand.md

planned

Pagepages/dealers.html

States
—

Figma
—
Contact

Brief 7.3 · docs/screens/brand.md

planned

Pagepages/contact.html

States
—

Figma
—

Phase 7 — Service & system pages

Delivery & payment

Brief 8.1 · docs/screens/service-pages.md

planned

Pagepages/delivery.html

States
—

Figma
—
Returns

Brief 8.2 · docs/screens/service-pages.md

planned

Pagepages/returns.html

States
—

Figma
—
Terms of sale

Brief 8.3 · docs/screens/service-pages.md

planned

Pagepages/terms.html

States
—

Figma
—
Privacy & cookies

docs/screens/service-pages.md

Not in the brief: needed for an EU shop (GDPR, cookie consent).

planned

Pagepages/privacy.html

States
—

Figma
—
404

docs/screens/service-pages.md

Not in the brief: system page.

planned

Pagepages/404.html

States
—

Figma
—

Run locally: cd prototype && npm run dev. Registry: prototype/src/data/screens.json. Updated 2026-10-28.