hero.bauhaus-primary-shapes · Primary shapes

A hero pattern from Bauhaus, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.bauhaus-primary-shapes". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Text block on columns 1–6; a 2×2 composition of circle, square, triangle and half-circle in the three primaries fills 7–12 edge to edge.
Slots
eyebrow, headline, subhead, cta, cta2
Grid areas
text 1-6 · composition 7-12 (12-column grid, 1-based inclusive spans)
Notes
Headline lowercase at step 5, weight 700, max ~16 characters per line. At phone width the text comes first and the composition follows the buttons at full width. The composition is four solid shapes with no gap: circle (accent), square (accent2), triangle (heading colour), half-circle (surfaceAlt / yellow).
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #0050CC · accent2 #AF0029 · Jost / Jost · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • Columns 1–6 hold the text, top to bottom with space between: lowercase eyebrow, the headline at step 5 (weight 700, lowercase, tight leading, max ~16 characters per line), a lead paragraph (max 40 ch) and two square buttons side by side (primary fill + outlined). Columns 7–12 hold a 2×2 shape composition with no gutter: a circle in accent, a square in accent2, a triangle in the heading colour, a half-circle in yellow (surfaceAlt). Each shape fills its quarter exactly; shapes are flat, never outlined or shaded. At phone width the text comes first and the composition keeps its 2×2 form at full width below the buttons, closing the hero like a poster foot.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Layout tree (as in design/layout.json)
{
  "pattern": "hero.bauhaus-primary-shapes",
  "kind": "hero",
  "grid": {
    "text": "1-6",
    "composition": "7-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2"
  ],
  "notes": "Headline lowercase at step 5, weight 700, max ~16 characters per line. At phone width the text comes first and the composition follows the buttons at full width. The composition is four solid shapes with no gap: circle (accent), square (accent2), triangle (heading colour), half-circle (surfaceAlt / yellow).",
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "stretch",
    "minVh": 0.86,
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "gap": 4,
        "pad": [
          4,
          0
        ],
        "justify": "between",
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "eyebrow",
            "role": "eyebrow",
            "transform": "lowercase"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 5,
            "transform": "lowercase",
            "weight": 700,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 16
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 40
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 2,
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "lg"
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "7-12",
        "children": [
          {
            "el": "grid",
            "mobile": "keep",
            "cols": 2,
            "gap": 0,
            "children": [
              {
                "el": "shape",
                "kind": "circle",
                "size": "fill",
                "fill": "accent"
              },
              {
                "el": "shape",
                "kind": "square",
                "size": "fill",
                "fill": "accent2"
              },
              {
                "el": "shape",
                "kind": "triangle",
                "size": "fill",
                "fill": "heading"
              },
              {
                "el": "shape",
                "kind": "half-circle",
                "size": "fill",
                "fill": "surfaceAlt"
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.bauhaus-primary-shapes.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.bauhaus-primary-shapes — Bauhaus</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 86vh; padding: calc(var(--unit) * 6) 0; align-items: stretch; column-gap: calc(var(--unit) * 6); }
  .text { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px 0; }
  .eyebrow { color: var(--muted); text-transform: lowercase; }
  h1 { font-size: var(--step-6); max-width: 12ch; letter-spacing: -0.04em; }
  .lead { font-size: var(--step-1); max-width: 40ch; line-height: 1.35; }
  .actions { display: flex; gap: 16px; flex-wrap: wrap; }
  .composition { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; align-self: center; }
  @media (max-width: 640px) { h1 { font-size: var(--step-4); } .composition { margin-top: 24px; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <div class="text">
      <p class="eyebrow">werkstatt für möbel und licht — dessau</p>
      <h1>form follows function.</h1>
      <p class="lead">Chairs, lamps and shelving made from steel tube, plywood and glass. Built in small series, designed to last a century.</p>
      <div class="actions"><a class="btn primary" href="#shop">see the collection</a><a class="btn" href="#visit">visit the workshop</a></div>
    </div>
    <div class="composition" aria-hidden="true">
      <div class="circle blue"></div><div class="square red"></div>
      <div class="triangle black"></div><div class="half yellow"></div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page