Color and type token specimen

The design systems team needs this when tokens change. The brand doc needs a specimen of the current swatches and the current type scale. Those values have to be the vars the app reads. A specimen that documents a color the product no longer uses is worse than no specimen.

This happens when the tokens change, not once when the brand doc is first written. The person doing it already owns config.json. They should not type hex values into a second file and hope they still match.

The job is one PNG specimen sheet for the brand doc. The component reads token values from the config.json vars cascade. A --config run can render an alternate palette without editing the artboard or the default config. You look at the sheet, then keep or drop the alternate file.

Give Lerret a React component under .lerret/ and the config vars. export writes a PNG. Same specimen, vars swapped if you pass --config.

The component is .lerret/design-system/tokens.jsx. It draws swatch rows and a type scale ramp reading from config vars. The specimen is React. The vars are the same cascade the app uses. You do not type hex values into the artboard.

Data is not a per-run row file in the usual sense. Token values come from the config.json vars cascade. A --config run can render an alternate palette without editing anything. This is the fourth of the four bulk patterns: --config to swap theme vars without touching the source. --config is never written back into .lerret/, so an alternate palette cannot become the committed default.

The image is a PNG specimen sheet for the brand doc. The swatch rows and the type scale ramp both read the same vars cascade. When tokens change, you re-export. An alternate palette is a --config file for that run only.

The specimen reads the same vars the app reads, so it cannot document a color the product no longer uses. A design-file specimen will keep an old swatch until someone opens it. You use Lerret because the sheet is the cascade, and the cascade is what the product uses.

The image is a PNG specimen sheet for the brand doc. The specimen reads the same vars the app reads.

npx @lerret/cli@latest export --config

Start a project with npx create-lerret@latest. More in the use cases index.