hero.deco-ziggurat-setback · Ziggurat setback

A hero pattern from Art Deco, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.deco-ziggurat-setback". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Four accent bars widen downwards (6–7, 5–8, 4–9, 3–10) like a skyscraper crown; under them the headline spans 2–11 and three facts sit in a ruled row on 3–10.
Slots
headline, facts[3..3], cta
Grid areas
crown 3-10 · headline 2-11 · facts 3-10 · action 4-9 (12-column grid, 1-based inclusive spans)
Notes
The bars are the hero's only shapes; they stack one unit apart and keep their widths at phone width. Facts are separated by vertical hairlines.
Tokens
bg #0E0D0B · text #E8E0CB · heading #E6C676 · accent #C9A24B · accent2 #88660B · Limelight / Josefin Sans · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 10

Pattern notes

  • A skyscraper crown: four accent bars stacked one unit apart, widening downwards — 6–7, 5–8, 4–9, 3–10. Then the headline at step 7 in caps on 2–11, three facts in one row on 3–10 separated by vertical hairlines (caps label + small muted line, centred), and one large primary button. The bars are the only shapes in the hero and keep their widths at phone width.

We make complicated companies simple to choose

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.deco-ziggurat-setback",
  "kind": "hero",
  "grid": {
    "crown": "3-10",
    "headline": "2-11",
    "facts": "3-10",
    "action": "4-9"
  },
  "slots": [
    "headline",
    "facts[3..3]",
    "cta"
  ],
  "notes": "The bars are the hero's only shapes; they stack one unit apart and keep their widths at phone width. Facts are separated by vertical hairlines.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 1,
    "align": "center",
    "minVh": 0.88,
    "children": [
      {
        "el": "shape",
        "span": "6-7",
        "mobile": "keep",
        "kind": "bar",
        "size": "sm",
        "fill": "accent"
      },
      {
        "el": "shape",
        "span": "5-8",
        "mobile": "keep",
        "kind": "bar",
        "size": "sm",
        "fill": "accent"
      },
      {
        "el": "shape",
        "span": "4-9",
        "mobile": "keep",
        "kind": "bar",
        "size": "sm",
        "fill": "accent"
      },
      {
        "el": "shape",
        "span": "3-10",
        "mobile": "keep",
        "kind": "bar",
        "size": "sm",
        "fill": "accent"
      },
      {
        "el": "spacer",
        "span": "1-12",
        "size": 4
      },
      {
        "el": "text",
        "span": "2-11",
        "slot": "headline",
        "role": "display",
        "step": 7,
        "align": "center",
        "transform": "uppercase",
        "weight": 400,
        "tracking": "wide",
        "leading": "tight",
        "maxCh": 16
      },
      {
        "el": "repeat",
        "span": "3-10",
        "mobile": "stack",
        "slot": "facts",
        "min": 3,
        "max": 3,
        "layout": "row",
        "gap": 3,
        "divider": true,
        "of": {
          "el": "box",
          "gap": 1,
          "pad": [
            2,
            3
          ],
          "align": "center",
          "children": [
            {
              "el": "text",
              "slot": "title",
              "role": "label",
              "align": "center",
              "transform": "uppercase",
              "tracking": "wide"
            },
            {
              "el": "text",
              "color": "textMuted",
              "slot": "body",
              "role": "small",
              "align": "center"
            }
          ]
        }
      },
      {
        "el": "box",
        "span": "4-9",
        "align": "center",
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "size": "lg"
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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