hero.constructivist-red-wedge · Red wedge

A hero pattern from Constructivist, 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.constructivist-red-wedge". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A huge red wedge drives in from the left (1–6, rotated −30°) against a red circle at the top of 9–11; the headline in condensed capitals cuts across 3–12 on a −12° diagonal; eyebrow, subhead and CTA sit square on 8–11.
Slots
eyebrow, headline, subhead, cta
Grid areas
wedge 1-6 · circle 9-11 · headline 3-12 · text 8-11 · cta 8-10 (12-column grid, 1-based inclusive spans)
Notes
The headline overlaps the wedge's tip; the wedge sits behind it. Only the headline and wedge are diagonal — eyebrow, subhead and button stay square to the grid for contrast and never sit under the rotated headline.
Tokens
bg #EFE6D2 · text #16130F · heading #16130F · accent #C8102E · accent2 #FF7777 · Anton / Barlow Semi Condensed · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • A huge red wedge (triangle rotated −30°) fills 1–6 across three rows, pointing up-right; a red circle sits at the top of 9–11 (red, not black, so a long headline that rises into it stays legible as black overprinted on red). The headline at step 7, in capitals, rotated −12°, spans 3–12 so it cuts across the wedge's tip (wedge behind, type on top). Below it, square to the grid on 8–11: the eyebrow in spaced capitals, the subhead (max 36 ch) and a large primary button. Nothing sits under the rotated headline. At phone width the circle hides; the wedge shrinks but stays.

We make complicated companies simple to choose

Brand & product studio

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

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.constructivist-red-wedge",
  "kind": "hero",
  "grid": {
    "wedge": "1-6",
    "circle": "9-11",
    "headline": "3-12",
    "text": "8-11",
    "cta": "8-10"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta"
  ],
  "notes": "The headline overlaps the wedge's tip; the wedge sits behind it. Only the headline and wedge are diagonal — eyebrow, subhead and button stay square to the grid for contrast and never sit under the rotated headline.",
  "tree": {
    "el": "grid",
    "gap": 2,
    "rowGap": 2,
    "align": "center",
    "minVh": 0.9,
    "children": [
      {
        "el": "shape",
        "span": "1-6",
        "rowSpan": "1-3",
        "mobile": "keep",
        "kind": "triangle",
        "size": "xl",
        "fill": "accent",
        "rotate": -30
      },
      {
        "el": "shape",
        "span": "9-11",
        "rowSpan": "1-1",
        "mobile": "hide",
        "alignSelf": "start",
        "kind": "circle",
        "size": "lg",
        "fill": "accent"
      },
      {
        "el": "box",
        "span": "3-12",
        "rowSpan": "2-2",
        "pad": [
          0,
          3
        ],
        "children": [
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "transform": "uppercase",
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 14,
            "rotate": -12
          }
        ]
      },
      {
        "el": "box",
        "span": "8-11",
        "rowSpan": "3-3",
        "gap": 2,
        "children": [
          {
            "el": "text",
            "slot": "eyebrow",
            "role": "label",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "maxCh": 36
          }
        ]
      },
      {
        "el": "button",
        "span": "8-10",
        "rowSpan": "4-4",
        "slot": "cta",
        "variant": "primary",
        "size": "lg",
        "arrow": true
      }
    ]
  }
}
Component example: reference/hero.constructivist-red-wedge.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.constructivist-red-wedge — Constructivist</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 90vh; padding: calc(var(--unit) * 6) 0; align-items: center; row-gap: calc(var(--unit) * 2); }
  .wedge { grid-column: 1 / 7; grid-row: 1 / 4; width: 100%; aspect-ratio: 1; background: var(--red);
           clip-path: polygon(0 100%, 100% 0, 60% 100%); transform: rotate(-30deg); z-index: 0; }
  .circle { grid-column: 9 / 12; grid-row: 1; align-self: start; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--red); }
  .hero h1 { grid-column: 3 / 13; grid-row: 2; font-size: var(--step-6); transform: rotate(-12deg); transform-origin: left center; z-index: 1; max-width: 14ch; }
  .hero .text { grid-column: 8 / 12; grid-row: 3; display: grid; gap: 16px; }
  .hero .sub { max-width: 36ch; font-size: var(--step-1); }
  .hero .btn { grid-column: 8 / 11; grid-row: 4; justify-self: start; }
  @media (max-width: 640px) { .hero h1 { transform: rotate(-8deg); margin: 24px 0; } .wedge { width: 60%; } .circle { display: none; } .hero h1 { font-size: var(--step-4); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <span class="wedge" aria-hidden="true"></span>
    <span class="circle" aria-hidden="true"></span>
    <h1>Break the silence</h1>
    <div class="text"><p class="label">Festival of new music — Riga, 14–16 May</p><p class="sub">Three nights, forty composers, one disused tram depot on the river.</p></div>
    <a class="btn" href="#tickets">Get tickets →</a>
  </div>
</section>
</body>
</html>

Other patterns in this design

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