2024 · Storefront · web
Harbor
Apparel commerce on a Tailwind v4 design system.
- Year
- 2024
- Role
- Engineer
- Surface
- Storefront
v4
Tokens in CSS
1
Catalog, not a theme
Stripe
Same-system checkout
The brief
What was actually broken
The brand wanted a theme rewrite. The catalog was the actual problem — tokens, variants, and merchandising wearing a CSS costume.
How it shipped
The work, in order
- 01
Tokens in CSS first
Tailwind v4, CSS variables, one accent. The theme is a file, not a Figma argument.
- 02
Catalog, then chrome
Variants, sizes, and drops live in the model. The storefront reads; it does not invent.
- 03
Checkout on the same tokens
The bag, the pay step, and the receipt share the system. No third-party theme at the last mile.
A theme rewrite is usually a catalog problem wearing CSS.
What changed
After it left the repo
- — A storefront that can change season without a theme transplant.
- — Merchandisers edit the catalog, not a layout.
- — The design system is the CSS, not a slide.
Stills
Same product, other angles
