Foundations
Introduction
Monarch is an open-source design system for startups, enterprise teams, independent designers and developers: anyone who wants their product to feel calm, clear and finished. It gives you design tokens, accessible React components and a conformance CLI that keeps every screen consistent as you grow, with no live service to depend on. It is free under the MIT License.
Packages
| Package | What it is | Needs |
|---|---|---|
@rookcom/monarch-tokens | CSS variables, light, dark and high-contrast themes, per-product accents with checked contrast, a Tailwind 3 preset and tokens.json. | Nothing |
@rookcom/monarch-react | Accessible, typed React components and patterns (React 18 and 19, server-rendering safe) and styles.css. | Tokens, React |
@rookcom/monarch-conformance | The monarch CLI: design-conformance checks, SARIF output and registry verification. | Node only |
npm i @rookcom/monarch-tokens @rookcom/monarch-reactIn this release
- Components
- 102
- Patterns
- 19
- Live examples
- 295
- Themes
- 4
Counted from the docs files of @rookcom/monarch-react 0.5.1 and the tokens package.
How it fits together
- Tokens define every colour, size and motion value as a CSS variable, for each theme and product accent.
- Components use only those variables, so a theme or accent change reaches every control without new code.
- Conformance scans a product's code for raw colours, off-grid spacing and local copies of Monarch components, and reports counts.
Next: Colours, Theming or the component overview.