glossary

the words the system uses, defined by how the system uses them.

the terms

56 words the system uses, each with the page where it is shown working. the vocabulary is the system: if a word is not here, it is probably not a rule yet.

#a b c d e f g h i l m o p r s t u v w

8-point scale: the spacing system: 8, 16, 24, 32, 48, 64 and 96 pixels, with the 3 px rule outside it. choosing from seven steps gives every screen the same rhythm. layout: space
accessibility: the system's promise that every person can use what it builds: visible focus, 4.5 to 1 contrast, 48 px targets, labeled icons, honored reduced motion. tested with eight checks before a page ships. accessibility
action color: the semantic role of red: the one thing to do on a screen. one primary button, never two. color: semantic roles
affordance: what a thing's form says it can do. a button affords pressing because it is a box with a verb in it, not because it has a bevel. form follows function, and then what?
aria-current: the attribute that marks the current page, tab or step. the stylesheet reads it and turns the item yellow, so look and meaning never separate. states, or what a control is doing
asymmetric balance: composition by weight rather than mirror symmetry: a heavy block near the center against a light one at the edge, like a lever. the grid and the diagonal
bauhaus: the german school of art, craft and design that ran from 1919 to 1933 in weimar, dessau and berlin. werkstatt borrows its grammar, not its artifacts. brand: the story
breakpoint: the width at which the grid changes: 720 px from four columns to eight, 1100 px from eight to twelve. layout: breakpoints
call to action: the red band near the end of a page with one sentence and one yellow button. the only red section a page may have after the hero. patterns: call to action band
clear space: the empty margin around the mark, equal to the square: 18 units on every side. brand: lockups
component: a part with every state documented and a copyable snippet: a button, a field, a card, a dialog. class names start with ws-. components
contrast ratio: the wcag measure of text against its ground. 4.5 to 1 for text, 3 to 1 for large display type. the color page computes every pair. color: contrast
core palette: the six raw values: signal red, chrome yellow, ultramarine, ink black, paper grey and gallery white. components never use them directly. color: the core palette
counterweight: the small saturated element placed far from the dominant block to level a page: a red button, a yellow tag, a blue disc. layout: composition
design token: a decision with a name. a value stored once as a custom property and a json entry, read by every component through its role. design tokens, the single source of truth
display type: the lowercase headline sizes, 96 and 56, set tight and heavy. the outside of the system, as opposed to the inside where people read. type: the scale
dominant block: the one largest element on a screen, placed off center. the hero, the exercise card, the object picture. layout: composition
elementary forms: the circle, square and triangle, with the bar as a fourth working primitive. kandinsky paired them with the primaries in 1923. circle, square, triangle
emphasis color: the semantic role of yellow: hover, selected, current, highlighted. the only color that changes on interaction. color: semantic roles
figure and ground: the perception law that something must be the thing and something the background. paper is the ground; white surfaces are figures. gestalt, or why a rule between blocks works
focus ring: the 3 px blue outline, 2 px outside any focused control, or the 5 px blue underline inside a field. never removed without a replacement. accessibility: how the system is accessible
form follows function: louis sullivan's 1896 line and the school's working order: use, then shape, then proof. form follows function, and then what?
gestalt: the laws of perceptual grouping, proximity, similarity, continuity, closure and figure-ground, which the layout rules restate as instructions. gestalt, or why a rule between blocks works
grid: twelve columns on desktop, eight on tablet, four on phone. blocks snap to columns; one is dominant; everything shares a left edge. layout: the grid
hierarchy: the order in which the eye reads a screen, set by size, weight, color and position. the rules exist to make that order the intended one. hierarchy, or telling the eye where to go
honest materials: truth to materials on a screen: flat color, drawn edges, native controls, whole pixels, and no effects that imitate other materials. honest materials, on a screen
icon grid: the 100 unit square with a 10 unit margin on which every icon is drawn from four primitives. icons: construction
ink: the near-black, #161616, used for all text, rules and inverse panels. never pure black. color: the core palette
inverse panel: a block flipped to ink: white text, yellow headings and links, buttons keeping their fills. at most one per screen. components: inverse panels
less is more: the phrase mies made famous. in the system it is a test: remove one thing, ask three questions, repeat, then put the last thing back. less is more, tested
lockup: the mark and the wordmark in a fixed arrangement, horizontal or stacked, on one of the five allowed grounds. brand: lockups
lowercase: the display convention since bayer's universal alphabet of 1925: titles, poster lines and section heads in lowercase; sentence case inside. why the headlines are lowercase
mark: the three shapes on a 40 by 26 field: red circle, blue square, yellow triangle, with overlaps of four and six units. the mark, taken apart
motion tokens: three durations and one curve: 120 ms linear for color, 200 ms eased for short movement, 320 ms eased for arrival. motion: three durations, one curve
optical correction: adjusting a shape so it looks right rather than measures right: a circle drawn five percent larger and a triangle ten percent taller to match a square. circle, square, triangle
paper: the warm grey, #EDEAE2, that is the page ground. white cards stand on it; on a white page they would vanish. color: the core palette
pattern: a full width website section built from components: header, hero, feature grid, pricing, footer. pages are stacks of patterns. patterns
primitive: one of the four shapes everything is built from: circle, square, triangle, bar. an icon that needs a fifth needs two icons or a word. icons: construction
reduced motion: the system setting the stylesheet honors by removing every transition and stopping the loader. motion: rules
rule: the 3 px ink border that outlines every surface, and the 2 px version between rows. a rule says boundary without spending space. layout: surfaces
semantic role: a token named for its job rather than its value: action, emphasis, structure, text, border, background, surface. color: semantic roles
sentence case: capitals only at the start of a sentence and on names. used inside the product and in long reading. brand: voice and tone
simultaneous contrast: itten's observation that a color changes with its neighbor. the same red on paper, blue, yellow and ink is four reds. color is structure
skeleton: the loading placeholder: striped paper blocks the shape of what is coming, with no shimmer gradient. controls: empty, loading and done
state: what a control is doing: rest, hover, focus, pressed, disabled, selected, error. each has one look, fixed across the system. states, or what a control is doing
structure color: the semantic role of blue: focus rings, progress, information panels and the ground under media. color: semantic roles
surface: a white box with a 3 px rule: cards, fields, lists, dialogs. the surface token is white; the background token is paper. layout: surfaces
template: a page layout drawn on the grid as a stack of patterns: landing, article, object detail, app home, settings, 404. templates
touch target: the minimum size of anything a finger presses: 48 px, never under 44, with 8 px between neighbors. accessibility: how the system is accessible
tracking: letter spacing, tightening as type grows: minus three percent at 96, zero at body size, plus one at 13. type: rules
type scale: the seven sizes: 96, 56, 32, 24, 18, 15, 13. skip a step to show hierarchy. type: the scale
usage ratio: the share of a screen each color takes: half paper, a fifth ink, a tenth red, the rest yellow and blue. color: usage ratio
vibration: the shimmer where two saturated primaries meet. beautiful on a poster, forbidden on a text edge. color is structure
visual weight: how much an element pulls the eye: a product of size, darkness and saturation. the lever balances weight times distance. the grid and the diagonal
vorkurs: the preliminary course every bauhaus student took: material studies, contrast and rhythm before any product. the app's daily exercise descends from it. the preliminary course
wordmark: the name werkstatt set in outlined poppins beside the mark, ink on light grounds and white on dark. brand: lockups

previous in referencestart next in referencecredits