Overview
Clean Cosmetics Component Registry
This is a working design system reverse-engineered from the live storefront of Clean Cosmetics, not a mockup of one. Every color, font, radius and shadow here was read directly from the site's computed styles, then rebuilt as a documented set of reusable UI primitives and composed patterns.
The point isn't to clone the site pixel-for-pixel. It's to test how much of a real brand's visual language can be captured as tokens and rebuilt as a working, documented component kit: the same shape a production design system would take, with a live configurator, a usage snippet, a props table, and do's/don'ts on every primitive.
What's a design system, and why bother?
A design system is the shared source of truth between design and engineering: a documented set of tokens, primitives and patterns that both sides point to instead of re-deriving the same button or the same shade of black on every new screen. Without one, small inconsistencies compound: three slightly different radii, two near-identical grays, a button that behaves differently on every page. Every new feature re-litigates decisions that should already be settled.
With one, a designer and an engineer can both reach for "Button, outline, medium" and get the same result, and changing a token in one place (say, the brand accent color) ripples out everywhere it's used instead of requiring a find-and-replace across the codebase. This registry is that idea applied to a real brand's existing site: extract the tokens that are actually in use, then rebuild the UI as named, documented, reusable pieces instead of one-off markup.
It also gives product and engineering a safe place to try work before it ships. Instead of standing up A/B tests on the live storefront, teams can scaffold a prototype here, using the same tokens and components the site already uses, and play through each variant in isolation. Copy, layout, and component combinations can be compared side by side, checked against real scenarios, and thrown away if they don't hold up, without ever touching production.
System structure
Foundations
The raw tokens (color, typography, radii, shadows, spacing, iconography) read from live computed styles on the Clean Cosmetics storefront rather than guessed from screenshots.
Components
Small, single-purpose primitives (Button, Badge, Input, Card, Rating, Circular Badge) built only from those tokens. Each has a live configurator, a usage snippet, a props table, and do's/don'ts.
Blocks
Composed patterns like Top Nav, Product Card, Quick View, Cart Drawer, and more, assembled from the primitives above and matched to real sections of the site.
Pages
Full page recreations that compose blocks together, proving the tokens and primitives hold up at real scale, not just in isolation.
Using the configurator
Every documented piece in this registry ships with a live configurator: a control panel that sits beside a real, running instance of the component, not a screenshot of one. Change a control and the preview updates instantly, in the same code that would render in a real app.
What's controllable depends on what the piece actually is. For a primitive like Card, that means the content itself: swap the title and description and watch the card reflow. For a block like Product Card, it means swapping between different products so you can see how the layout holds up with a longer title or a different price. For something stateful like Cart Drawer, it'll mean swapping which items are in the cart or which products show up in the upsell row, so you can check the layout against more than one scenario instead of a single hardcoded example.
Directly below every configurator is a usage code block that stays in sync with whatever you've set in the controls, so once a combination looks right, the exact snippet to reproduce it is one click away, ready to paste into your own editor.
On sourcing
Colors, type and layout values are sampled directly from the live site. Product photography is used for local dev reference only and isn't licensed for production. Model photography and third-party social content were deliberately not scraped. Those sections use icon and tile placeholders instead.