Foundations
The visual language as data: 211 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.
The system2
How tokens are named and how they reach a component.
- OverviewFour 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.
- TokensThe 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.
Colour, type, icons3
Colour roles with their contrast, the type scale, the icon set.
- ColorColour 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 mode, and both are in the table.
- TypographyTwo 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.
- IconsA 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.
Geometry4
Spacing, radii, elevation and the layer scale.
- SpacingOne 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.
- RadiusNine 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.
- ElevationFour 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.
- LayeringA 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.
Behaviour3
States, motion and how the layout responds to width.
- StatesHover, 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 modes.
- MotionDurations 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.
- ResponsiveBreakpoints 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.
Themes4
Complete sets of values for the same tokens: chosen at build time, with modes switched at runtime.
- BlueprintFlat precision: fill, line and type.
- ClayWarm paper, graphite ink and a single clay dot per screen.
- SlateCool neutrals of the slate scale, an indigo accent and contrast tuned to AA in both modes.
- TactileA button as an object: light from above, a shadow in the tone's color below, a response with its body.
Nothing here matches. Try the search for the whole site — ⌘K.
Values come from the slate theme of @feugene/granularity-tokens, the package core 3.7.2 stands on. Nothing on these pages is typed by hand.