features.bauhaus-shape-key · Shape key

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

Rule
Features two per row across 1–12; each opens with one primary shape (cycle circle → square → triangle) beside its title and text.
Slots
title, features[4..6]
Grid areas
title 1-6 · features 1-12 (12-column grid, 1-based inclusive spans)
Notes
Cycle the shape kind and fill per item: circle/accent, square/accent2, triangle/yellow, then repeat.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #0050CC · accent2 #AF0029 · Jost / Jost · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • The section title (h2, lowercase) on 1–6. Below, four to six features in two columns. Each feature is a small 4-column grid: a solid 48 px shape in column 1, then title (h3, lowercase) and a short paragraph across 2–4. Cycle the shapes in order circle (accent), square (accent2), triangle (yellow) — the shapes are the icons, so no other icons. At phone width features stack, each keeping its shape on the left.

What we do

Positioning

Find the one sentence your best customers already believe.

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

Websites

Fast, editable sites built on the CMS your team already knows.

Sales enablement

Decks, one-pagers and demos your reps actually use.

Product naming

Names that survive trademark search and a noisy trade show.

Brand governance

Guidelines as a living site, not a forgotten PDF.

Layout tree (as in design/layout.json)
{
  "pattern": "features.bauhaus-shape-key",
  "kind": "features",
  "grid": {
    "title": "1-6",
    "features": "1-12"
  },
  "slots": [
    "title",
    "features[4..6]"
  ],
  "notes": "Cycle the shape kind and fill per item: circle/accent, square/accent2, triangle/yellow, then repeat.",
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "grid",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "span": "1-6",
            "slot": "title",
            "role": "h2",
            "transform": "lowercase",
            "maxCh": 24
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "features",
        "min": 4,
        "max": 6,
        "layout": "grid",
        "cols": 2,
        "gap": 6,
        "of": {
          "el": "grid",
          "mobile": "keep",
          "cols": 4,
          "gap": 3,
          "children": [
            {
              "el": "shape",
              "span": "1-1",
              "kind": "circle",
              "size": "md",
              "fill": "accent"
            },
            {
              "el": "box",
              "span": "2-4",
              "gap": 1,
              "children": [
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h3",
                  "transform": "lowercase"
                },
                {
                  "el": "text",
                  "slot": "body",
                  "role": "body",
                  "maxCh": 44
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.bauhaus-shape-key.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.bauhaus-shape-key — Bauhaus</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: 112px 0; }
  h2 { grid-column: 1 / 7; font-size: var(--step-4); max-width: 24ch; margin-bottom: 48px; }
  .features { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .feature { display: grid; grid-template-columns: 48px 1fr; gap: 24px; align-items: start; }
  .feature > span { width: 48px; }
  .feature h3 { font-size: var(--step-2); margin-bottom: 8px; }
  .feature p { max-width: 44ch; }
  @media (max-width: 640px) { .features { grid-template-columns: 1fr; } h2 { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid"><h2>what the workshop does</h2></div>
  <div class="features">
    <div class="feature"><span class="circle blue"></span><div><h3>furniture</h3><p>Tubular-steel chairs and tables, bent and welded in-house, finished in chrome or black.</p></div></div>
    <div class="feature"><span class="square red"></span><div><h3>lighting</h3><p>Opal-glass lamps with nickel fittings, built for desks, ceilings and long hallways.</p></div></div>
    <div class="feature"><span class="triangle yellow"></span><div><h3>textiles</h3><p>Hand-woven wall hangings and upholstery in wool and linen, dyed in the primaries.</p></div></div>
    <div class="feature"><span class="circle blue"></span><div><h3>courses</h3><p>A twelve-week preliminary course: colour, material and form, taught at the bench.</p></div></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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