Good systems start
with good roots.
The Greenhouse is where I'm teaching myself the architecture and development behind design systems. Every component here is a plant I tend to, learn from, and help grow.
Foundations
What every component is rooted in: color, type, spacing, and icons.
Color
A three-layer token system built on neutral foundations with chlorophyll greens for action.
Typography
A calm, legible type scale aligned to a 4px baseline.
Spacing
A 4px grid-based spacing scale that keeps layouts consistent across all components.
Icons
64 Phosphor icons across 9 categories. They inherit color from their surroundings.
Components
17 production-ready components, each documented with usage guidance, variants, and examples.
Greenhouse is always growing. New components and foundations get added as I learn. Built with Next.js, React, TypeScript, CSS Modules, and a whole lot of help from Claude and Cursor.