werkstatt brand and design system version 1.2, october 2026
color4 min read6 october 2026

color is structure

At the Bauhaus color was taught as a material with rules, not a mood. Itten, Albers, the three primaries, and why red does exactly one thing.

Johannes Itten ran the preliminary course from 1919 to 1923, and color was its spine. He taught seven kinds of contrast, drew a twelve-part color circle that every art student has copied since, and took from Goethe a scale of how much light each hue carries: yellow 9, orange 8, red 6, green 6, blue 4, violet 3.

That last idea is the one werkstatt lives by. If yellow is three times as bright as violet, then to balance the two you give yellow a third of the room. Equal areas do not look equal; balanced areas do. Itten called it the contrast of extension, and it is the reason our usage ratio exists: a lot of paper, some ink, and a little of each primary.

Josef Albers took the course as a student and later taught it. His book Interaction of Color, published in 1963, made one point over and over through hundreds of exercises: a color is never seen alone. The same red on paper, on blue and on yellow is three reds. You do not pick a color. You pick a relationship.

on paperon blueon yellowon ink
One red, four grounds. On paper it is warm, on blue it vibrates, on yellow it darkens, on ink it glows. The hex value never changed.

the three primaries, assigned

Red carries the most weight per unit of area, and it is where the eye lands first. So it does one job: it marks the thing to do. One red button per screen. The moment there are two, red stops pointing and starts shouting, and the person has to read instead of look.

Yellow is the brightest hue. Ink on yellow has a contrast ratio above twelve to one, better than ink on white, so yellow can sit under text and be large without hurting. That makes it the state color: hover, selected, current, highlighted. It is the only color that is allowed to change on interaction.

Blue recedes. It can hold a large panel without pushing forward, which is why it is the structure color: focus rings, progress, information, the ground under a card's picture. White text on blue clears the text threshold with room to spare.

Ink is text and rules. Paper is the ground. White is a surface, and on a paper ground it reads as a surface rather than as the absence of one. If the page were white, cards would vanish into it; on paper, they stand.

vibration

Put red next to blue at full saturation and the edge between them shimmers. Itten listed the effect under simultaneous contrast; the color studio asks you to find two colors that do it on the first day. It is beautiful on a poster and unreadable in an interface, so the rule is simple: two primaries never meet along a text edge. Ink or white goes between them. Look at the mark: the shapes overlap, but nothing in it is text.

contrast of extension: equal areas beside balanced areasyellow and violet, half and halfyellow and violet, one to threered and green, half and halfred and green stay half and halftwo primaries on a text edge vibrate; a rule of ink between them stops itredred
Top: Itten's balanced proportions. Yellow needs a third of the room violet needs; red and green are equals. Bottom: a red and blue edge with and without an ink rule between them.

the ratio, in use

A typical screen is half paper, a fifth ink, a tenth red, and yellow and blue sharing the rest. If red climbs above a tenth of what you see, there is more than one call to action. If ink falls below a fifth, there is not enough text or rule, and the primaries float. If yellow dominates, everything is selected, which means nothing is.

Color in this system is not atmosphere. It is a set of load-bearing roles. Change a color and you change what the screen does.

© 2026 Intelligent Operations. Directed, prompted and published by Tommy Saunders, Intelligent Operations.Generated with Claude Fable 5.1 by Anthropic in the Claude app, 10 and 11 October 2026. Bauhaus is referenced as history; all artwork is original. credits and how to cite · sitemap