A near-monochrome system built on one premise: the work supplies the colour, and the interface supplies nothing but order.
A design storefront whose own interface is mediocre cannot sell design. The system had to be evidence of the claim, not merely a container for it — while staying so restrained that it never competes with the work on display.
Start from the constraint rather than the palette: if the product is a gallery wall, the chrome has to disappear. One accent, a neutral ramp, three elevation levels, and a strong typographic hierarchy doing the work that colour usually does.
Reference landscape
- Radix Colors — Right about scales, more colour than a gallery needs
- Dribbble — Right about grid rhythm, chrome fights the work
- UI8 — Right about product-page anatomy, no point of view in the shell
“If the interface has an opinion about colour, the work loses.”
Every marketplace that skins its own chrome loudly makes its products look worse — the eye reads the accent as part of the artefact. Removing colour from the shell entirely, and spending the whole budget on type and spacing, makes uploaded work look better than it does anywhere else. That is a commercial argument, not an aesthetic one.
Stage by stage
01
Map landscape
Nine reference products assessed for what to take and what to refuse — grid rhythm from one, product-page anatomy from another, licence architecture from a third.
02
Gap analysis
None of the references separate the shell from the work. All of them lose contrast in dark mode at exactly the point the imagery matters most.
03
Design system
Tokens authored as CSS custom properties first, Tailwind theme second, so the system is portable to a codebase that doesn't use Tailwind at all.
04
Build-ready front end
Shipped as the running front end of the storefront, with the token file readable in the delivered source rather than described in a PDF.
What was difficult
Dark mode inverted the neutral ramp and destroyed the sense of depth borders were carrying.
Borders were re-derived per theme rather than flipped, and elevation was capped at three levels so the system never leans on shadow to say something a border should say.
A monochrome shell risks reading as unfinished rather than restrained.
The typographic scale carries the personality — a high-contrast display face against a neutral UI sans — so the restraint reads as a decision rather than an absence.
Exactly what you get
- Figma library
- 41 components
- Token set (CSS + Tailwind)
- Light + dark
- React + Next.js
- Written guidelines
- Version
- 1.0.0
- Formats
- Figma, React, Next.js, Tailwind
- Screens
- 18
- Components
- 41
- Dark mode
- Yes
- Prototype
- Yes
- Accessibility
- AA
- Figma
- 2026.2
Dependencies
- Inter — SIL Open Font Licence — included
- Tailwind CSS — MIT
Commercial fonts are never redistributed — they are named and linked, with a free equivalent substituted in the delivered files.
The system runs the storefront it was designed for, which is the only test that matters.
