A design system where every decision is documented—from foundations to components.
Monogem is a documentation-first system: its foundations, tokens, and components each ship with the rationale behind them, then get built to match, across four selectable brand themes. This page is the system composing itself.
Proof, not pitch
The system, shown working
Four properties the rest of this page depends on — each one demonstrated with the real components and the real tokens.
See it run
Live component showcase
The real components from the documentation, composed here as a test surface. Switch tabs to load one at a time.
How it is built
Documentation first, every time
One repeatable loop turns a decision into a reusable component. Nothing ships without its written contract.
- 01DecisionA choice is made and its rationale is recorded — the why sits next to the what.
- 02DocumentationIt is written to a fixed page template before any visual or coded proof exists.
- 03TokensValues land in primitives, then semantic intent tokens — the single source.
- 04ComponentThe React component is built to match that contract, with a live example.
Everything in the box
The component directory
Every component has a documented contract and a live example. Jump straight to one, or open the full index.
Read the contract, then use the components.
Start with the design approach the whole system answers to, or go straight to a component and its live example.