Claude Design System — Modern Next.js E-commerce
The complete design system behind the 1dot1 storefront, as a single HTML page you open in a browser. Twenty-four sections cover the tokens, the type scale and every shipped component, and each value was read out of the running Next.js build rather than drawn from memory. It is aimed at designers and developers who would rather start from a system that already survived contact with production than from an empty Figma file.
What you get
- 1 design system page (HTML) — 24 sections: Logo, Color, Typography, Spacing, Radius & elevation, Layout, Header, Quick add, Star rating, Catalog toolbar, Currency select, Footer, Feedback widget, Toast, Empty state, Promo bar, Long-form text, Motion, Buttons, Badge pills, Product card, Inputs, Cart line item
- 13 colour tokens and a 7-step type scale, every one resolved to a real value
- README.txt with the full consolidated prompt that generated the system, written so it can be pointed at another codebase
- React 18.3.1 bundled locally, so the page renders with no internet connection
- LICENSE.txt
Works with
- Any modern browser — no build step, no server, no dependencies to install
- Written against Next.js 16 and Tailwind CSS 4, though the values are framework-agnostic
- Claude Design, for anyone who wants to run the included prompt on their own project
One licence, personal and client work, forever. No resale.
Most design systems are written before the product exists, which is why they drift. This one went the other way round: the storefront shipped first, and the system was then corrected against it, section by section, with the code open alongside. That pass changed real things. Three colour hexes were wrong. The documented type scale had a 28px step the build never used and put micro caps at 11px when the shipped value is 10px. Buttons and inputs were drawn at 44px and ship at 48px. A NEW badge was documented that does not exist, and the product card had its badge on the wrong side and its artwork full-bleed when the build insets it.
Why it is one HTML page
A system nobody opens is not a system. This one is a single page with no install step, so the answer to a question about the spacing scale takes about four seconds to find. Every number in it is real, and where a rule has an exception the exception is written down rather than left for someone to discover.
What is in the prompt
The README carries the consolidated prompt behind the file, assembled from the session that produced it and trimmed to the design system alone. It is in three parts: state the aesthetic and the component list, place the brand mark, then correct the result against the shipped values. The third part is the one that matters, and it is the part usually skipped.
Does it include Figma?
No. This is the documented system and the prompt, not a Figma library or a component repository.
Does it need an internet connection?
No. React is bundled inside the zip, so the page renders offline. Only the webfont is fetched, and the page falls back cleanly without it.
Reviews
Nothing here yet.
Questions & answers
No questions yet. If something about this product isn't clear, ask — we answer publicly so the next person finds it too.