werkstatt brand and design system
one grammar for everything we make: three shapes, three colors, one typeface, hard edges. this site holds the rules, the parts, the pages and the pictures.
what is inside
twenty-four sections in five groups: the story, the foundations, the parts, the pages, and the pictures and words around them.
the story
foundations
the system at a glance
three colors
red for action, yellow for emphasis, blue for structure. ink and paper do the rest.
one typeface
Aa 96
poppins, lowercase for display, sentence case for interface, 8-point spacing rhythm.
three forms
every mark, icon and illustration is built from the circle, the square and the triangle.
seven principles
they repeat across the brand, the product and the posters. the principles page gives each one its origin and its rules; the rulebook numbers every rule.
- function decides form.a thing looks the way it does because of what it does.
- reduce to essentials.take one element away and check the design still works.
- geometry first.circle, square, triangle, bar. no freehand shapes.
- honest materials.flat color, hard edges, no gradients, no shadows pretending to be depth.
- design for production.one rule set, one token file, so anyone can build it.
- asymmetric balance.weight sits off center. balance, not mirror symmetry.
- art and craft are one.the poster and the button follow the same grammar.
from the journal
design tokens, the single source of truth
Every color, size and space in werkstatt is named once. How the three layers of tokens work, why the names are roles and not colors, and what happens when one changes.
hierarchy, or telling the eye where to go
Size, weight, color and position each give an element a rank. The system uses all four, in a fixed order, so that a screen reads the same way to everyone.
gestalt, or why a rule between blocks works
The perception laws that explain the system's layout rules: why gaps belong inside groups, why one color means one category, and why three overlapping shapes read as a single mark.
tokens.css
every color, size and space as a css custom property. drop it in and start building.
download tokens.cssgetting started
how to link the stylesheet, the naming rules, browser support and the changelog.
read start