Warm, rounded, and legible — built to feel approachable to a first-time consumer trial and sturdy enough for the team running their business through it every day.
Marigold carries the energy — used sparingly, only for the action you most want taken. Plum grounds the interface and does the heavy lifting in navigation and headers. Ink and Cloud are doing 90% of the actual work on any given screen.
Not a straight inversion. Marigold stays exactly the same hex in both themes — it's the one constant that says "this is Fernwell" regardless of mode. Everything else shifts: neutrals move from warm-cream to near-black (never pure black, which flattens elevation), and the tinted backgrounds behind status colors switch from solid pastel fills to low-opacity washes, since a light pastel chip on a dark page reads as a UI bug, not a status. Toggle the button above to see it live.
Plus Jakarta Sans for anything that should feel like a voice — headlines, empty states, onboarding. Inter for anything the user reads quickly and often — tables, forms, nav. Plex Mono for numbers, IDs, and anywhere precision matters more than warmth.
One rounding system, four scales. The bigger the surface, the softer the corner — this is the single rule that ties every component together.
Primary is Marigold and appears once per view. Secondary (Plum) is for the next-most-important action. Ghost for anything tertiary. Only one Primary button visible at a time — if two things feel equally important, neither is Primary.
Determinate bars for anything with a known length (uploads, multi-step forms). Indeterminate bars for anything with an unknown duration. Spinners live inline — in a button, next to a label, or centered in a panel — never as a full-page takeover unless the whole screen is genuinely blocked.
A required field gets a small coral asterisk after the label — coral is otherwise reserved for errors, but this specific mark is universally recognized and won't be misread in context. It always ships with hidden text for screen readers, since an asterisk alone isn't reliably announced. Disabled fields mute to the Cloud-dim surface and drop the border contrast, signalling "not available" rather than "empty."
A slight, consistent tilt on tags only — the one place the system allows itself to feel hand-placed. Everything else stays on-grid.
Native checkboxes and radios are visually hidden but stay in the DOM and fully keyboard/screen-reader operable — the styled box is a sibling element driven purely by CSS, not a replacement control. Marigold marks the "on" state everywhere for consistency.
All of the above, assembled into a real form — including a textarea and a typeahead autocomplete field. Try typing "s" or "m" into the City field.
The tokens above, working together on a real screen.
Create your first invoice and Fernwell will handle the reminders.
Fernwell UI System v1.0 — tokens defined as CSS custom properties at the top of this file. Copy them directly into your codebase.