Illustrations
6 illustrations. These are pictures for a feature section, like blocks, a gauge, or a key. Each one is drawn in code from the theme, so it follows light and dark, with soft light and almost no words. Below is a sample section, with each one in a Feature Grid.
Built for agents. Checked for people.
Each part explains itself
Every part comes with notes on when to use it and when not to, so an agent picks the right one.
Checked in light and dark
The theme's color pairs are tested for contrast, in light mode and in dark mode.
One theme for every part
Color, type, and motion come from one set of tokens. Lint blocks any color outside it.
A size budget for each part
Every component has a size budget, and the check fails when one goes over it.
The code is yours
Each part is a plain source file in your app, with no runtime. Change anything you like.
brand tone, no characters
no dots, narrow container
Code Key
betaA picture of owning the code: a key whose handle holds a code mark, with scrambled characters in the corner.
brand tone, other letters
no dots, narrow container
Contrast Orb
betaA picture of contrast in light and dark: an orb cut into a light half and a dark half, with letters on each.
Open and close
Narrow container
Folder
betaA folder whose front hinges forward as two papers rise and fan apart.
success tone, lower value
no dots, narrow container
Speed Gauge
betaA picture of speed: a dial with a lit arc, ticks around its edge, and a needle near the top of its range.
brand tone
no dots, narrow container
Stacked Blocks
betaA picture of parts put together: a stack of blocks, with the last one floating down into place.
brand tone
no dots, narrow container
Theme Layers
betaA picture of one theme under every part: three sheets in the air, with a grid, lines of type, and color swatches.