The Recurna design system
One system, two products, no second copy.
Recurna's products share a single token package. It defines colour, type, motion and elevation once, and both applications consume it directly — there is no per-product theme file to fall out of step. Every value on this site is read from that package when the site is built, so what you are reading cannot drift from what ships.
What a design system is for here
Recurna builds tools people open when they are worried about money. That constraint decides most of what follows. An interface in that position cannot afford to be loud, cannot afford to be ambiguous about what is real and what is projected, and cannot afford to be beautiful at the cost of being legible.
So the system is not a component library with a colour palette attached. It is a set of commitments — about contrast, about restraint, about what colour is allowed to mean — and a token layer that makes those commitments the path of least resistance rather than a matter of remembering.
- The token layer is the contract. Products consume tokens, never raw values. A colour that is not a token is not in the system.
- Rules are gated, not documented. The contrast floors and the motion taxonomy are enforced in continuous integration. Prose alone has never held a rule.
- Claims are measured. Every conformance figure on this site was computed during the build by the same engine that gates the products.
- Exceptions are named. Where a rule does not apply, it is listed with its reason. A silent omission and a stated exception look identical otherwise.
What it refuses to do
Colour never carries meaning alone
A status that is only a colour is invisible to a meaningful share of readers. Every state in the products is legible from its text; colour reinforces it and never replaces it.
Motion never carries meaning that isn't also in the DOM
A visitor with reduced motion enabled sees a static interface. If something can only be understood by watching it move, they have lost information — so nothing is allowed to depend on it.
Status colour is never a data colour
Chart series and status indicators draw from separate sets. Warm amber belongs to data; it is never allowed to imply caution, because a chart that happens to be amber would then be saying something it does not mean.
How to read the rest
The foundations describe the commitments and how they cash out in practice. The evidence pages are generated from the package itself — values and measurements, nothing written by hand. Patterns shows the system applied to real surfaces.