Bauhaus: primary geometry, bold type, hard edges

Form follows function, loudly

Bauhaus design leans on primary geometry and primary color: circles, squares and straight lines, red, blue and yellow, bold sans-serif type, and asymmetric compositions that stay balanced through relation rather than symmetry. As an interface language it says audacious and modern — portfolio sites, studios and creative-tool products wear it well.

Recognize it by commitment: hard-edged shapes used functionally rather than decoratively, a few saturated hues with no greys in between, assertive display type, and compositions whose imbalance is clearly intentional. The discipline is that everything geometric is doing layout work — nothing is ornament for ornament's sake.

A century on, the movement's argument still holds for interfaces: honest materials, honest geometry, and no decoration pretending to be function. That is why the style never reads as twee even now — a Bauhaus screen admits it is a screen, and builds confidence out of straight lines and saturated primaries instead of hiding behind chrome.

How to recognize it

The Bauhaus signature is easy to identify and hard to fake:

• Primary geometry — circles, squares, triangles and straight lines used as functional layout elements
• Primary color — red, blue and yellow at full strength, with no pastels or neutrals in between
• Bold geometric type — assertive sans-serif letters with a temperament, not a polite standard grotesque
• Intentional imbalance — asymmetric grids whose tension is clearly designed, not accidental drift

The Bauhaus preset

The preset goes full Bauhaus: a vermillion primary, a strong blue secondary and a signal-yellow accent, a triadic strategy that keeps all three hues evenly apart on the wheel, sharp radius for honest right angles, and a geometric type pairing with the display personality the movement demands.

The triadic strategy is doing real structural work here, not just picking colors. With three hues evenly spaced at 120°, none can claim to be a tint of another — precisely the democratic, un-hierarchical energy Bauhaus wanted. You get the movement's visual diplomacy for free, then reinforce it by letting the geometry carry the message.

How the color roles land in this style

Roles in Bauhaus do exactly what the movement intended: they separate jobs by hue, not by tint. Primary is the red action voice; secondary is the blue structural voice (frames, inactive chrome); accent is the yellow that marks one point of emphasis; and the surfaces stay clean near-white so the primaries never muddy each other:

:root {
  --background: #f5f5f2;
  --surface: #ffffff;
  --primary: #ff4d00;
  --secondary: #1d4ed8;
  --accent: #ffc400;
  --foreground: #111111;
}

Adapt it

The bold trio is the point, so resist the urge to mute it — if a muted brand needs Bauhaus structure, keep the geometry and drop a single hue. Sharp radius and the geometric pairing do the structural work; let the shapes the previews lay out speak, and keep body copy on white or near-white for contrast.

Where Bauhaus earns its keep is scale and rhythm, so let the marketing preview do the talking first: oversized display type, hard color blocks, type sitting on its baseline like furniture. When something feels off, the fix is usually less color, not more — one hue at full strength per screen honors both the style and accessibility.