Tools
The instruments Workhorse brands are edited on, open to anyone. None of them asks you to sign in, and the labs hand you the files.
Labs
Each lab stands in the console a brand is edited on once you sign in: a list of what you can change on the left, the work in the middle, its properties on the right. Below the console, the lessons behind it, set in whatever you made above.
- Color LabOne color in, a color system out: ramps in OKLCH, roles in light and dark, and the contrast fixes it made, set on a live specimen.CSS · DTCG · SVG
- Type LabA type scale worked out from the font’s own measurements, set on a page at a phone’s width and a desktop’s. Add, delete and lock sizes, and the checks say what each change does.CSS · DTCG · Tailwind
Also here
Earlier tools. The Type Lab does most of what the two calculators do.
- Glyph Motion LabType animated at the glyph level: variable-font axis waves, outline morphs and glyph-set flipbooks, side by side.
- Fluid type calculatorA fluid scale from a base size and a ratio, written as CSS clamp().CSS · Tailwind config · plugin
- Typography playgroundFluid type scales on musical intervals, previewed live.CSS · Tailwind