brand

what werkstatt is, how the mark is built and how we talk.

the story

werkstatt is a pocket design studio that teaches the bauhaus method: one short exercise a day in color, form and type. the name is the german word for workshop, which is what the school called its rooms.

the brand borrows the school's grammar instead of its artifacts. three primary forms, three primary colors, one geometric typeface, and nothing it does not need. it should feel like a well made tool: plain, strong, a little playful.

in one line

learn to see in circles, squares and triangles.

principles

the same seven rules the product and the posters follow.

function decides form.a thing looks the way it does because of what it does.
reduce to essentials.take one element away and check the design still works.
geometry first.circle, square, triangle, bar. no freehand shapes.
honest materials.flat color, hard edges, no gradients, no shadows pretending to be depth.
design for production.one rule set, one token file, so anyone can build it.
asymmetric balance.weight sits off center. balance, not mirror symmetry.
art and craft are one.the poster and the button follow the same grammar.

the mark

three shapes on a 40 by 26 grid.

circle, 18 wide.red. it sits on the left and overlaps the square by four units.
square, 18 wide.blue. centered on the vertical axis of the mark.
triangle, 14 wide, 18 tall.yellow. its right edge is the right edge of the mark; it overlaps the square by six units.

the mark is 40 units wide and 26 tall. the overlaps are what make it one object instead of three. never separate the shapes or change their order.

lockups

the mark keeps its colors on every ground. the wordmark switches between ink and white.

clear space

keep a margin around the mark equal to the height of the square, 18 units, on all sides. nothing else sits inside it.

minimum size

24 px tall on screen, 8 mm in print. below that use the mark alone, never the wordmark.

files

mark.svg, wordmark-ink.svg and wordmark-white.svg. the wordmark text is outlined, so it needs no font.

mark · wordmark, ink · wordmark, white

what not to do

don't

recolor it

the three colors are fixed. there is no one-color version except ink or white, and that is the wordmark only.

don't

rotate or tilt it

the base of the triangle sits flat. always.

don't

add a gradient, shadow or texture

flat color only. depth comes from overlap, not effects.

don't

place it on red

the circle disappears. use paper, white, ink, yellow or blue.

don't

stretch or squash it

scale it as one object, with its proportions locked.

don't

outline it

no strokes around the shapes. the edges are the shapes.

voice and tone

lowercase on the outside

product name, headlines, poster type and section titles are set in lowercase. it comes from herbert bayer's universal alphabet, and it keeps the voice calm.

sentence case on the inside

buttons, labels, fields and messages use normal sentence case so they read fast. proper nouns keep their capitals.

plain verbs, short sentences

say what happens. a button names its action. a message says what went wrong and what to do next. no exclamation marks.

instead of	say	why
Oops! Something went wrong.	couldn't save. check your connection and try again.	what happened, then what to do.
Submit	save design	the button names the result.
Welcome back, superstar!	good morning	warm, not loud.
Are you sure you want to delete this?	delete this exercise? you can't undo it.	the question and the stakes in one line.
No items found	nothing here yet. start an exercise and it will show up.	an empty screen is an invitation.

previous in foundationsrules next in foundationscolor