principles · werkstatt brand system

how to read this page

a principle is a reason

a rule is what the reason looks like on a tuesday afternoon when someone has to decide a button. the seven below are the reasons. each ends in the rules it produces, and every rule in the rulebook traces back to one of them.

the order is the precedence

when two rules collide, the earlier principle wins. use beats reduction: a label stays even if it is one more thing. honesty beats production: a native element beats a prettier custom one. the rest are tie-breakers.

1usefunction decides form

2honestyhonest materials

3reductionreduce to essentials

4geometrythe four primitives

5productiontokens and parts

6balanceasymmetric, off center

7unityone grammar everywhere

1. function decides form

a thing looks the way it does because of what it does.

function decides form

where it comes from

Louis Sullivan wrote the sentence in 1896, and Walter Gropius restated it for the school in the production principles of 1926: an object is determined by its nature, and to make it work you must first study what it is for. The chairs, lamps and teapots of the workshops were the proof. Nothing on them is there for any reason except the use.

what it means here

Every component starts from a sentence that says what it is for. The sentence picks the shape, the size, the color and the label, in that order. Usability is not a layer added to the form; it is the form. A button is a box with a verb because a hand needs a target and an eye needs to know what will happen.

the rules it produces

related ideasfunctionalismpurposeutilityusabilityaffordancelegibilityfitness for useergonomicsform follows function

2. reduce to essentials

take one thing away and check the design still works.

reduce to essentials

where it comes from

Adolf Loos had argued against ornament before the school opened, and Mies van der Rohe gave the idea its three words. The workshops practiced it on objects: the Wagenfeld lamp is three solids, the Brandt teapot is one hemisphere, and there is nothing to remove from either.

what it means here

Reduction is counted in decisions, not pixels. One dominant block, one red button, one accent per element, two weights per view, three to five links. White space is a pause, not an absence. The test is the remove-one-thing test on the less is more article: take away until it stops working, then put the last thing back.

the rules it produces

related ideasreductioneconomyrestraintminimalismclarityhierarchywhite spacesignal and noiseless is more

3. geometry first

circle, square, triangle, bar. no freehand shapes.

geometry first

where it comes from

Kandinsky's Point and Line to Plane and Klee's Pedagogical Sketchbook, both written at the school, treated form as something built from elements rather than drawn from life. The 1923 questionnaire that paired the three primary forms with the three primary colors made the trio the school's shorthand, and it has stayed everyone's shorthand since.

what it means here

Every icon, the mark and every illustration are constructed from four primitives on a grid. Proportion is a number, not a feeling: one radius makes all three shapes, the mark has one size, the icon grid has a hundred units. Where the eye disagrees with the ruler, as it does with circles and triangles, the eye wins, and the correction is written down.

the rules it produces

related ideaselementary formsprimitivesgeometric abstractionconstructionproportionmodular gridcompass and ruleroptical correctionthe three primary forms

4. honest materials

flat color, hard edges, nothing pretending to be something else.

honest materials

where it comes from

Materialgerechtigkeit, fitness to the material, was a workshop rule before it was a style: steel tube was bent because bending is what tube does, glass was left clear because clear is what glass is. On a screen the material is light in a grid, and honesty means flat color, drawn edges, and controls that are what they appear to be.

what it means here

No gradients, no shadows, no textures of other materials. Depth is overlap and a border. Feedback is a change of color and state, not a change of shape, and it takes 120 milliseconds because that is how long a change takes to register. Native elements first, because a real dialog, a real checkbox and a real details element already behave honestly.

the rules it produces

related ideastruth to materialsMaterialgerechtigkeitflat designmaterial honestynative controlspixel gridno skeuomorphismtransparency of structure

5. design for production

one rule set, one token file, so anyone can build it.

design for production

where it comes from

Art and technology, a new unity was the slogan of the 1923 exhibition, and after it the workshops made prototypes for industry: standardized furniture, lamps for serial production, and in 1929 a wallpaper line that became the school's most successful product. A good object was one that could be made again, exactly, by someone else.

what it means here

The system is the prototype. Tokens name every decision once; components carry every state; the stylesheet has no dependencies; the naming is a convention anyone can follow. A new screen is assembled from parts that already exist, and a change made in one place is manufactured everywhere. A one-off style is a handmade exception, and the system does not keep exceptions.

the rules it produces

related ideasstandardizationprototypeseries productiondesign tokenssingle source of truthconsistencyreusescalabilitypattern libraryversioning

6. asymmetric balance

weight sits off center. balance, not mirror symmetry.

asymmetric balance

where it comes from

The posters of 1923 and the new typography that followed them abandoned the centered page for a balanced one: a heavy block near the middle against a light one at the edge, like children on a seesaw. Theo van Doesburg was in Weimar in those years arguing the same thing for painting, and Tschichold wrote it down for everyone in 1928.

what it means here

Every screen has one dominant block, placed off center on the grid, and a small saturated counterweight on the far side. Everything shares a left edge. Blocks touch, with a rule between them. The interface stays orthogonal; posters and illustrations are allowed the diagonal, because a tilt in print is motion and a tilt in a product is a lie.

the rules it produces

related ideascompositionvisual weightcounterweightequilibriumtensionalignmentthe leverdynamic layoutnew typography

7. art and craft are one

the poster and the button follow the same grammar.

art and craft are one

where it comes from

The 1919 manifesto called architects, sculptors and painters back to the crafts and said there was no essential difference between the artist and the craftsman. Each workshop had two masters, one for form and one for the craft, and students learned both. The school's one language ran from the stage to the kitchen.

what it means here

The palette, the shapes and the typeface are the same in the image library, the posters, the app and this site. Illustrations are built from the icon primitives; the stylesheet and the design file read the same tokens; the journal explains the components and the components illustrate the journal. Craft is care in the smallest decision, and code is part of the deliverable, not a translation of it.

the rules it produces

related ideasunity of art and technologyworkshopcraftGesamtkunstwerkinterdisciplinaryform master and workshop mastermakingone visual language

using the principles

three questions for any decision the rules do not already answer.

ask which principle a decision serves.if it serves none, it is decoration.
ask which principle it costs.a new accent color costs reduction and production; a custom checkbox costs honesty.
write the rule down.a decision made twice is a rule. it goes in the rulebook with a number, or it goes.

next in foundationsrules