# Bauhaus design language kit > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A kit sheet for "formhaus", a fictional Bauhaus-revival furniture brand, that doubles as a style guide you can apply to a whole product. The page is a 12-column grid of paper cells separated by 3px ink rules (the grid's `gap` shows the black body behind it). The first row is a live landing hero for "Regal 25" modular shelving, with a red circle, blue square, yellow triangle, ink bar and ink dot composed on the right, next to a type specimen with a 150px "Aa". The second row holds the palette with roles, buttons in four states, tags, inputs and a product card; the third row states the shape grammar (circle acts, square holds, triangle points, rule divides). The detail worth copying: **shape carries meaning**. Circles are only ever actions or status, squares are containers, triangles point; nothing is rounded unless it is a circle. ## Reference behaviour 1. Initial state: header bar (56px) with a three-shape mark, "formhaus / design language 01", four section anchors and "Kit v1.4 · Weimar · Oct 2026". Below it the sheet; the first 800px show the hero, specimen and the whole component row. 2. Hover any rectangular button: it lifts `translate(-3px, -3px)` and gains a hard `3px 3px 0` ink shadow over 120ms. Press: it drops back to 0/0 with no shadow. The "States" strip shows Rest / Hover / Pressed / Disabled statically using forced classes, so the states are readable without interacting. 3. Click the yellow round button in the hero's bottom-right corner ("Recompose"): the five shapes move to arrangement 2 over 520ms with expo-out easing (circle shrinks to .62 and drops left, square rotates 90° and grows to 1.3, triangle flips 180°, bar goes horizontal, dot grows). Click again: arrangement 3. Again: back to 1. The copy column never moves. 4. Focus a text input or the select: a 5px yellow offset block appears behind it, outlined by a 2px ink edge (a "printed" focus shadow). No radius, no glow. 5. The email field ships in its error state: red 2px border, pale red fill `#F6DDD6`, 12px red message under it, `aria-invalid="true"`. 6. Click the checkbox: a 10px red square scales from 0 → 1 in 120ms. Click a radio: a 10px blue disc does the same. 7. Click the switch: the track fills yellow and the knob slides 24px right **and morphs from an ink square to a red circle** (240ms expo-out). Off again: back to an ink square. 8. Hover the product card: it lifts 4px with a 4px hard ink shadow. 9. Header anchors jump to sections; their hover state is a 2px red underline. ## Structure ``` 1280 × 800 first frame (sheet continues to ≈ 1000px; body scrolls) ┌──────────────────────────────────────────────────────────────────────────────┐ │ ●■▲ formhaus / design language 01 TYPE COLOUR CONTROLS GRAMMAR Kit v1.4│ 56 + 3px rule ├───────────────────────────────────────────────┬──────────────────────────────┤ │ formhaus möbel Kollektion Werkstatt Journal [Cart 2] │ ● 01 TYPE SPECIMEN│ │ REGAL 25 · MODULAR SHELVING ● ( red circle 290 ) │ Aa (150px) Josefin…│ │ build it ━━━━━━━━ │ ─────────────────────│ │ in squares. (76px) ■ (150) ▲ (180×156) │ Display 76 form follows│ │ body 15px │ H2 26 / H3 18 / Body 15 │ │ [Configure Regal 25 →] [1925 drawings] (↻) │ Label 11 │ │ From €640 · ships in 3 weeks cols 1–7 · 424h │ cols 8–12 · 424h │ ├───────────┬───────────┬───────────┬──────────────────────────────────────────┤ │02 PALETTE │03 BUTTONS │04 INPUTS │05 CARD │ │ 5 swatches│ 3 buttons │ postcode │ [blue art 118h, yellow circle, NEW tag] │ │ 46px rows │ 4 states │ email err │ Stuhl B3 · €1,180 [Add] │ │ ratio bar │ 5 tags │ ☐ ◉ ○ sw │ │ │ cols 1–3 │ cols 4–6 │ cols 7–9 │ cols 10–12 ≈ 254h │ ├───────────┴───────────┴───────────┴──────────────────────────────────────────┤ │ ● Circle acts │ ■ Square holds │ ▲ Triangle points │ ━ Rule divides (span 3 each) │ footer strip: kit summary · "Click the round button to recompose" │ └──────────────────────────────────────────────────────────────────────────────┘ ``` - `

`: `.mark` (three 16px shapes, 4px gap), `.brand`, `