Design System

This is the Carpet Care Club design system: the single source of truth for the interface. Every screen on the public site is assembled from the components documented here, so designers and engineers work from one shared language and one set of names.

It is organised by atomic design. Foundations are the indivisible tokens — brand, colour, typography, spacing and shape. Atoms are the smallest components (icons, buttons, badges); icons in particular are an atom reused inside almost everything else. Atoms combine into molecules, molecules into organisms, and organisms into templates — the full pages, which this system showcases inside Content with their key states rather than linking away to the live site.

Names follow the conventions set by established libraries such as Material Design and PrimeReact, so they are recognisable across tools. The distinctions those libraries draw are kept deliberately: Forms is a family, not one component — it holds inputs (text field, textarea, select, stepper), selection controls (radio card), pickers (date picker), lists and validation. Feedback (toast, banner) is a separate family from forms.

The navigation is multi-level: drill from a family into a sub-group and then into a single component. Each component page lays its variants down the rows and its states across the columns; interaction states that cannot exist in static HTML are simulated so every state is visible at once.