start

how to use the system, what is in the files, and what changed.

use it

three steps.

copy assets/styles.css next to your page and link it.or paste it into a style element; every page on this site does that so it opens on its own.
load poppins from google fonts, or do not.the fallback stack is jost, futura, century gothic, avenir next; the system survives without the web font.
build with the classes on the components, controls and patterns pages.copy a snippet, change the words, keep the attributes.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>werkstatt</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/styles.css">
</head>
<body>
  <a class="skip" href="#main">skip to content</a>
  <header class="ws-header">…</header>
  <main id="main">
    <section class="ws-hero">…</section>
  </main>
  <footer class="ws-footer ws-footer--slim">…</footer>
</body>
</html>

naming

form	example	meaning
`ws-block`	`ws-card`, `ws-dialog`	a component. the prefix keeps it clear of your own classes.
`ws-block__part`	`ws-card__body`, `ws-hero__art`	a part inside a component.
`ws-block--variant`	`ws-btn--primary`, `ws-alert--error`	a variant. add it beside the base class.
`[aria-…]`, `:checked`	`aria-current="page"`	state. the stylesheet reads the attribute; there are no `.is-active` classes.
`--token`	`var(--emphasis)`	a value. use the semantic names in your own css, never the hex.

the files

file	what it is
`assets/tokens.css`	every value as a custom property. include this alone if you only want the numbers.
`assets/styles.css`	tokens plus base styles plus every `ws-` component and pattern. about 40 kb, no dependencies.
`assets/tokens.json`	the same values as data, for design tools and build scripts.
`images/icons/*.svg`	sixteen icons on a 100 unit grid. inline them.
`images/brand/*.svg`	the mark and the wordmark, outlined.
`images/series/*`	sixteen illustrations and posters, svg and png.
`examples/*.html`	the landing page, three app screens and three posters, as working pages.

browser support

evergreen browsers.the stylesheet uses custom properties, clamp, grid, :has and the native dialog. everything from 2023 onward renders it as designed.
older browsers get a plain page.without :has the segmented control loses its yellow fill; without dialog the confirm falls back to a window.confirm. nothing breaks.
no javascript required.the few scripts on the controls page are optional and under 60 lines.

adding a component

five checks. a component is in the system when all five are true.

it is built from existing tokens.no new colors, sizes or spaces. if it needs one, the token is the proposal, not the component.
it has every state.rest, hover, focus, pressed, disabled, and error where it applies. all five documented.
it works with a keyboard and a screen reader.the test list on the accessibility page, in full.
it has a snippet and three rules.copyable markup, and the three things people get wrong.
it is named for what the person does with it.a menu, not a dropdown; a dialog, not a modal.

changelog

version	date	what changed
1.2	11 october 2026	added the principles page with precedence, the numbered rulebook (85 rules), the glossary (55 terms) with structured data, six more journal articles (tokens, hierarchy, states, the preliminary course, gestalt, lineage), a credits page with citation formats, a sitemap, and a credits bar on every page. the whole site, the example pages, the two early mood boards and the canvas source now ship as one package.
1.1	october 2026	added motion and accessibility foundations; the controls set (tabs, accordion, menu, dialog, toast, tooltip, breadcrumbs, steps, badges, avatars, search, segmented control, range, drop zone, chips, lists, states, code, dividers); fourteen website patterns; six page templates; this page. tokens gained three motion values, three layers and the focus ring.
1.0	october 2026	first release: brand, color, type, layout, the first component set, sixteen icons, the mood board, the image library, seven example pages and ten journal articles.

what is next

data visualization.bars and lines in the three primaries, with the rule that red is one series at most.
a print set.the poster grid and the type scale for a4 and letter.
a figma library.the tokens.json is the source; the library would be generated from it.
more icons.the set grows when a screen needs one, never ahead of it.

next in referenceglossary