Oro
The design system of GildedBox: one place where the colours, the type, the components, the patterns and the motion of the product are decided, and one place they are taken from.
What Oro is
Oro is the single source of design truth for GildedBox. It holds four layers, in this order: tokens, the raw values: colour, radius, elevation, type, spacing, the button ladders, the motion clock; components, the assembled organisms those values make: the header, the footer, the auth form, the catalog; patterns, the way components are arranged into a screen; and motion, the way all of it moves. The name comes from the brand's Figma library. The system outgrew the library and kept the name.
Nothing in Oro is invented. Every value carries its provenance in the file beside it: measured live on the product, recorded from an earlier measurement, interpolated by a stated formula, or honestly marked felt where live gives no number. Where the live product and Figma disagree, live wins and the disagreement is written down rather than quietly resolved. That is why the token file reads like an argument: it is one.
Why it exists: so the same product looks like the same product on every surface it appears on; so a screen can be assembled out of parts that already fit instead of drawn again from nothing; and so hand-off to engineering is a mapping, not a redraw — the tokens already speak the front end's language and the final delivery is a theme preset, not a folder of pictures.
How we work
Five rules. They are not a style guide. They decide where a thing is allowed to be made and what colour it is allowed to be when it gets there.
The tree: system → live → sandbox
Three folders, three different permissions. Which folder a file sits in tells you what it is allowed to do.
The source
Every component, token and pattern, defined once. If it is real, it is here, and it is here only once.
The consumer
The approved walk. It spends the system and adds nothing: no local colour, no local size, no hand-sewn twin of an organism that already exists.
The freedom
The room where you may step outside the system on purpose, while a question is still open. New patterns are allowed to be wrong here and nowhere else.
Work approved in the sandbox does not travel sideways. It goes back into system/ first and reaches live/ from there.
The test is mechanical: any hardcoded value on a live/ page is a structural bug even when it looks exactly right. Either the page is cheating, or the component it needed is missing, and both are fixed in system/.
The cycle of the new
A new component is the last resort, not the first move. Every new thing walks the same four questions, in order, and only a run of "no" earns a fifth answer.
-
Draw it freely in the sandbox
At concept and wireframe the idea is not limited by what exists. Constraints applied here kill the idea before it is understood.
-
Do we already have this?
Once the concept is approved it gets broken down: what already exists, and what is genuinely missing. If something fits as it is, use it as it is.
-
Can something existing be extended?
A version, a variant, a size step on a component that is already standing. Extending keeps one thing to maintain instead of two that drift.
-
Only now: a new component
If nothing fits and nothing can be stretched, a new component is made, deliberately and named. This is the only way the library grows.
-
Approved things are born in system/
The new component is written into system/ first, and only travels from there to live/. A component that appears on live without a home in the system does not exist yet.
Blue is state. Black is furniture. Gold is neither.
The palette carries a language, and the language has exactly two words. Break it and the product loses its way of saying "this one is selected".
Blue: state and action
- The primary CTA
- The active navigation item
- Checked radios, switches, checkboxes
- The selected day, the selected card
- A count on an icon, because a count is a state
Black: the permanent furniture
- The things that are always there
- Book a meeting, Explore gifts
- The dark chrome, the footer
- Furniture does not shout in colour at all
Gold: not in the UI
- Vetoed for interface use, 2026-07-30
- Legacy points on live still wear it
- It is documented, not spent
- See Colors for the exact values
The trap in this rule is that both halves sound like "do not shout". They are not the same instruction: furniture stays quiet by having no colour, while state is obliged to be coloured. A grey active item is not restraint. It is the loss of the word for "chosen".
The signature plays everywhere
Motion is part of the DNA, not decoration applied afterwards. Curves and durations are named by the size of the journey, never by the component that happens to be travelling, which is why a new animation is a choice between existing values, not a new number.
The signature choreography does not yield to prefers-reduced-motion: a system animation switch was hiding the brand's own entrance entirely while every competitor still moved. Politeness is allowed for utility micro-motion (typing dots, a drawn checkmark, the hovers on this page) and nowhere else. Motion changes strategically or not at all; there is no such thing as chaotic motion.
Reuse before you draw
Faced with any screen, component or element, the first question is never "how should this look". It is "do we already have one?". If there is a GildedBox header, the page uses the GildedBox header. Same for the footer, the auth form, the catalog, the cards. An approximate redrawing of something that already exists is not a shortcut; it is a defect, and it is caught immediately because the copy's numbers always drift from the original's.
This is the rule this very showcase is measured against first. Its frame is one stylesheet for all seven sections, and every value on it resolves out of system/assets/tokens.css, the same file the prototype loads. A document that argued for reuse in hand-sewn CSS would not be worth reading.