The library
The buttons, fields and tables in our products are written by us. It is the same package the assistant uses, and in a client project it is installed with their brand, without pulling in code we do not control.
Try it
What you see below works: these are the components served from the published package. Change the brand colour and notice how each role keeps its lightness and only the hue changes. That is why a green and an amber read just as well.
Your hex gives hue 219.5° and chroma 0.146. Each role keeps its own lightness: that is what holds the contrast.
Real components, not a screenshot
Billed this month
12.480 €
Why it exists
npm is the registry where code packages written by other people are downloaded from. Ours only asks for React (react and react-dom), the base it runs on, and nothing else. The little we needed from outside is copied in, with its licence, so your project does not inherit other people’s updates, security advisories or surprises.
Give it your brand colours in hex and it writes the whole theme. It works out all 41 colour roles, meaning each job a colour does in the interface, in light and dark. If a combination falls short of the minimum contrast to be readable, it refuses to write it.
Every component works with the keyboard, shows where the focus is and works with screen readers, the programs that read the screen aloud for people who cannot see it. They are checked with axe, an automated analyser, on desktop, mobile and touch. If something fails, the release does not go out.
Each component lives in its own file and does nothing on its own when loaded, so only what you actually use goes into the finished app. A screen with one field does not load the table as well.
In numbers