RAMTT design system
The tokens and components RAMTT is built with: generated colors, one face, pills for everything you press, and one delay for every move.
What it is
Every color is a token generated from one source file; the neutrals were locked and the build stops if one of them drifts. Components are found by their attributes, so a button works the moment it is in the page, with or without a framework.
The marketing pages use the app’s own sizes. Most brands build their website in a second, larger design. Here only the text size goes up.
The parts
Parts you press
Buttons, segmented controls, switches and sliders. They all hold their state in the DOM, so a port to React keeps the same attributes.
The palette
Search everything with ⌘K.
Properties
Label and value, one row each. The same part lists a component’s measurements in the catalog.
Color
Labels, charts and states use them.