the story

from a question about the bauhaus to a working design system: every step, every design and every asset, in order.

start with the school or jump to any page

seven steps

everything made in this project, in the order it was made, with the pieces themselves.

1. the question 2. the board 3. the series 4. werkstatt 5. the system 6. the journal 7. the package

a question about the bauhaus

The project began with four words: teach me about Bauhaus. The answer was the short history on the bauhaus page: a school founded by Walter Gropius in Weimar in 1919, moved to Dessau in 1925 and Berlin in 1932, closed in 1933, whose teachers and students scattered and took the method with them. Three homes, one slogan, seven principles, a dozen names.

Everything after that is an attempt to take the school's grammar seriously: three shapes, three colors, one typeface, hard edges, and nothing it does not need.

what was learned first

the facts.1919 to 1933; weimar, dessau, berlin; gropius, meyer, mies.
the principles.form follows function, reduce, geometry, honest materials, design for production, asymmetry, art and craft as one.
the people.gropius, kandinsky, klee, itten, moholy-nagy, breuer, brandt, bayer, albers, stölzl, schlemmer, mies.

the aesthetic, pinned

The second ask was for the principles, the aesthetic, the visual language and a mood board. The answer was a Pinterest-style board of twenty-one drawn pins: the primary forms, the palette with hex values, the two slogans, Kandinsky's questionnaire, a Dessau-style facade, the club chair, a lowercase type specimen, a woven grid, a teapot, a lamp, a pattern, a photomontage and the seven principles.

The palette was fixed here and never changed: signal red, chrome yellow, ultramarine, ink, paper and white. So were the type (a geometric sans, lowercase for display), the 8-point spacing and the rule that corners are square and borders are 3 pixels.

signal red#D93A2B

chrome yellow#F4B81B

ultramarine#1E4FA0

ink#161616

paper#EDEAE2

white#FAFAF7

the first mood board

open

an image series and five system sheets

Next came a request for a series of images and a design system as a mood board. Eight illustrations were drawn in code: a poster of the three forms, the tubular steel chair, a glass facade, a type-only poster, a Kandinsky-style composition, an Albers-style textile, Brandt's teapot and a halftone photomontage. Five sheets turned the look into a system: color with a usage ratio, a type scale, a twelve column grid with an 8-point scale, a component set, and twelve icons built from four primitives.

Each image exists as a scalable SVG and a 1600 pixel PNG. They are all in the image library, and the second board shows them together.

the series board

open

werkstatt: a landing page, an app and three posters

The system needed something to be a system for, so a product was invented: werkstatt, a pocket design studio that teaches the Bauhaus method in one five-minute exercise a day. The name is the German word for workshop. It got a landing page with a hero, three rooms, a color wheel, an object library and a download band; three phone screens, home, color studio and object detail, joined by a tab bar, with a wheel that highlights a color and its complement when you tap it; and three new posters: a Schlemmer-style figure, the Dessau stairway, and a twelve-step color wheel.

They were built first on a design canvas and then exported as standalone pages. The standalone set is in examples/ and previewed on the in use page.

the landing page

open

app: home

open

app: color studio

open

app: object detail

open

the brand and design system site

Then the system became a site of its own: brand (the mark's construction, lockups, what not to do, voice), color (roles, a computed contrast table, the studio wheel), type, layout, components with every state, icons, the mood board, the image library and the examples in use. Every page is live HTML on one stylesheet, and every value lives in a token file.

Later the system grew: motion and accessibility foundations, a second set of controls, fourteen website sections, six page templates, and a getting started page with naming rules and a changelog.

the tokens

tokens.css and tokens.json: every color, size, space, duration and layer, named once.

the journal: the thinking behind the rules

The rules needed reasons, so the system got a journal: 16 illustrated articles on the principles, the geometry, the icons, color, the grid, lowercase, honest materials, the mark, tokens, hierarchy, states, the preliminary course, Gestalt, and the hundred-year line from Dessau to the design system.

Then the reasons were collected: a principles page with an order of precedence, a rulebook of eighty-five numbered rules, and a glossary of the words the system uses.

form follows function, and then what? · principle
circle, square, triangle · geometry
the case for the square corner · concept
an icon in four moves · icons
less is more, tested · principle
color is structure · color
the grid and the diagonal · layout
why the headlines are lowercase · type
honest materials, on a screen · concept
the mark, taken apart · geometry
design tokens, the single source of truth · system
hierarchy, or telling the eye where to go · principle
states, or what a control is doing · parts
the preliminary course · history
gestalt, or why a rule between blocks works · geometry
from dessau to the design system · history

one package

Finally everything was gathered into one linked package with a credits bar on every page: the site, the articles, the example set, the two early boards, the images, the tokens and the canvas source. This page is the index to all of it, in the order it was made.

What is original here: the werkstatt brand, every illustration, icon, page and article. What is borrowed: the school's grammar, which was the point. What was not possible: photographs of the school's actual work, so every reference image is a drawing made for this project.

every asset

sixteen illustrations as svg and png, sixteen icons, three logo files, the tokens and the stylesheet.

the image library

every page

fifty-five linked pages, listed on one page.

the sitemap

previous in storybauhaus next in storymood board

the story

seven steps

a question about the bauhaus

what was learned first

the aesthetic, pinned

an image series and five system sheets

werkstatt: a landing page, an app and three posters

the brand and design system site

foundations

parts and pages

pictures and words

the tokens

the journal: the thinking behind the rules

one package

every asset

every page