One standard
for every
product
Core is a product design system: tokens, 39 React components and a full icon set, kept in step with the Figma library. Everything on these pages is live code.
Black and white carry the interface. Colour is kept for meaning: status, roles and data. Every control is a pill, every surface is flat, and every state is an overlay, never a new colour.
Components
Foundations
Questions
Can a client put their own brand on Core?
Yes. Components read only semantic tokens, so a client changes the brand layer (accent, neutrals, type, radii) and every component follows. Nothing is forked.
How does Core stay in step with Figma?
Every component names its Figma source. An audit renders each one with every property value and compares it with the file; what code cannot fix is listed in the System map for review.
What does a developer install?
One dist folder: core.js on window.Core, core.css, tokens.css, the icons and api.json with every prop and default. React 18 is the only dependency.
Which icons can we use?
Core draws its own glyphs, and the full Remix Icon set works through the same Icon component. Remix icons stay inside products: never resold as a pack, brand marks only for their own brand.
All components
Atoms17
Molecules16
About Core
Core is the design system behind Catalog and Platform: a neutral, black-and-white interface where colour is reserved for meaning — status, roles and data. Core owns every atom, molecule and organism; products assemble screens from instances and never fork primitives. The System map page tracks which families are already in code; the Sandbox page is Core Docs — every component with its live playground, code, variants and guidelines in one place, in both themes (full screen: Core Docs).
Get the kit
Components, tokens, icons and api.json in one dist folder. The API page shows how to load it.