01 / Formulas
Rooted in something real
Plant-led formulas with a purposeful place in your daily ritual.
Edition 02 / the working component system
Every detail, in one language.
Use the classes in this reference and the exact values in theme.json. These components inherit this identity's fonts, colors, proportions, and controls.
Typography
Display / manrope
A little closer to nature.
Reading text is 16px with a 1.7 line height and a maximum line length of 65 characters. A useful hierarchy is a first-class part of the system.
Botanical modernismColor & surfaces
Forest#153E35
New leaf#D5E8A0
Oat#F3F0DF
Sage#A7B8A0
Ink on paper and ink on accent are approved normal-text pairings. Support color is a decorative surface until a specific text pairing is checked.
Controls
Buttons are at least 48px tall. Focus is visible. Keep existing handlers, links, and form behavior when applying the theme.
Cards & information
02 / Philosophy
Less, thoughtfully
A smaller collection. A clearer intention. Every ingredient belongs.
03 / Field notes
A softer daily ritual
Good care is a practice, not a promise of perfection.
Forms
Notices
This is an informational component. Use the ink / accent pairing for clear, readable supporting information. Connect status text to your real application state.
Tables
| Element | Value | Purpose |
|---|---|---|
| Spacing unit | 4px | A consistent compositional rhythm |
| Body text | 16px / 1.7 | Comfortable, readable content |
| Controls | 48px minimum | Useful touch and keyboard targets |
Accordions
How do I install this exact theme?
Download the complete kit. Read INSTALL.md, run install-theme.mjs against your project, and attach the exact data-openform attribute to your root or intended subtree.
Can I use it with my existing application?
Yes. Use theme.css and map your components to the provided of-* classes. Preserve your routes, application data, interactions, and actual business content.
The complete identity
