FairGarden Design
A field guide printed on warm recycled paper: React components built on Base UI, styled with CSS Modules, colored by Radix scales through role variables.
The system is calm and a little playful. It uses warm paper grounds, one deep natural ink and a bold serif voice, and everything is drawn in ink on flat color, so every screen prints in black on white without losing meaning.
Start here
- Installation: the global stylesheet, the fonts,
ClientProviderand light and dark mode - Color contract: the
primaryandsecondaryprops, role variables, the hover model and the 16 ground presets (8 page grounds, thenightband and 7 fields) - Tokens: Open Props plus the
--ds-extensions, and the units policy - Typography: four families, one job each, and the type roles
- Components: every component, grouped from foundations through actions and navigation, forms, status and overlays, the page frame and content modules to data, with live demos and API tables
Install
pnpm add @fairgarden-private/design @base-ui/react
# only for Map:
pnpm add maplibre-gl pmtiles @protomaps/basemaps
The stack
| Layer | Its job |
|---|---|
| Base UI | Behavior, keyboard, focus, ARIA and state data attributes; never styles |
| CSS Modules | Every style, one module per component, in cascade layers |
| CVA | Composes module classes from typed props |
Open Props and --ds- | Every non-color value: spacing, type, strokes, radii, sizes, motion |
| Radix Colors | Every color, reached through --primaryN, --secondaryN and --role-*; light and dark swap the values by data-theme on html or the OS preference |
| Material Symbols | Icons: Rounded, FILL 0, compiled to inline SVG paths |
| Recharts | Charts: SVG, role colors, opaque fills and pattern defs |
| MapLibre GL, Protomaps and OpenStreetMap | Maps: optional peer dependencies, loaded only by Map |
The full specification is DESIGN-SYSTEM.md, with the condensed companion DESIGN-SYSTEM-GUIDE.md. Section numbers on these pages (§) point into it.