Foundations
The visual language as data: 197 tokens read from the installed package, grouped the way the package groups them. Every page here answers two questions — what the scale is for, and what it holds today.
Sections
- Overview
Four layers, and every one of them is data rather than a decision made in a component. Primitives set the scales, roles give them meaning, derived values follow the roles by formula, and per-component tokens fine-tune a single component without touching the rest.
- Tokens8 tokens
The full reference: every token the package publishes, grouped exactly as it is grouped in the source. Grouping by our own taste would have made a prettier page and a useless one — you would not find a token by the name you saw in the code.
- Color96 tokens
Colour is where a design system is most often mistaken for a palette. There are no colours here — there are roles: a surface, the text on it, a fill, the text on the fill. The same role holds a different value in each theme, and both are in the table.
- Typography37 tokens
Two families, one scale of sizes and a separate scale for controls. The second one exists because a button and a paragraph do not share a rhythm: text is read, a control is aimed at, and their sizes answer different questions.
- Spacing17 tokens
One scale for every gap, padding and offset in the system. The step is not linear on purpose: near zero the eye distinguishes two pixels, at forty it does not, and a linear scale would spend half its values where nobody can tell them apart.
- Radius9 tokens
Nine radii, and one of them is the control radius: the value that keeps a button, an input and a select looking like one family. Change it and the whole set of controls changes together.
- Elevation4 tokens
Four levels, and they are semantic rather than decorative: a shadow says what floats above what. A dropdown is above a card, a modal is above the page — the level follows the layer, not the taste of the moment.
- Motion5 tokens
Durations and easing curves, and one rule that covers the rest: the system respects «reduce motion» wholesale, through a single block in the base layer rather than component by component.
- Icons4 tokens
A size scale, not an icon set. The package compiles its own icons — the select arrow, the clear cross, the check mark, the spinner — into its build; your icons come either as a Vue component or as a class your own build generates.
- States18 tokens
Hover, active, disabled, invalid. None of these values is written down: each is a formula over a role, so repainting the role moves its states with it. The table below shows the formula and what it computes to in both themes.
- Responsive10 tokens
Breakpoints and container widths. The system does not lay your pages out — it gives the same numbers to every component that has to know when it is narrow, so that a table and a sidebar agree on what «narrow» means.
- Layering7 tokens
A layering scale with a step of fifty. The step is the point: between two neighbouring layers there is room for someone else’s widget, a consent banner or a chat bubble that has to sit between them — and no need to renumber anything.
Values come from @feugene/granularity 0.41.0, tokens/*.json. Nothing on these pages is typed by hand.