hero.deco-triptych-arches · Triptych of arches

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-triptych-arches". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A mirrored triptych: arched duotone images in 1–3 and 10–12, the centred headline block in 4–9 bottom-aligned with them.
Slots
eyebrow, headline, subhead, cta, heroImage, image
Grid areas
left 1-3 · centre 4-9 · right 10-12 (12-column grid, 1-based inclusive spans)
Notes
Both arches are the same size and crop; duotone in accent over the background. At phone width the left arch hides and the right one follows the text.
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 8

Pattern notes

  • A mirrored triptych: two identical arched duotone images (3:4) in 1–3 and 10–12, and the centred text block on 4–9 (eyebrow, headline at step 5 in caps, ornament, short subhead, secondary button), bottom-aligned with the arches. At phone width the left arch hides and the right arch follows the text.

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 project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.deco-triptych-arches",
  "kind": "hero",
  "grid": {
    "left": "1-3",
    "centre": "4-9",
    "right": "10-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "heroImage",
    "image"
  ],
  "notes": "Both arches are the same size and crop; duotone in accent over the background. At phone width the left arch hides and the right one follows the text.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "end",
    "minVh": 0.82,
    "children": [
      {
        "el": "media",
        "span": "1-3",
        "mobile": "hide",
        "alignSelf": "end",
        "slot": "heroImage",
        "aspect": "3/4",
        "treatment": "duotone",
        "frame": "arch"
      },
      {
        "el": "box",
        "span": "4-9",
        "alignSelf": "end",
        "gap": 4,
        "align": "center",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "eyebrow",
            "align": "center",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 5,
            "align": "center",
            "transform": "uppercase",
            "weight": 400,
            "tracking": "wide",
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 2,
            "align": "center",
            "children": [
              {
                "el": "divider",
                "weight": 1
              },
              {
                "el": "shape",
                "kind": "square",
                "size": "sm",
                "fill": "accent",
                "rotate": 45
              },
              {
                "el": "divider",
                "weight": 1
              }
            ]
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "align": "center",
            "maxCh": 42
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "arrow": true
          }
        ]
      },
      {
        "el": "media",
        "span": "10-12",
        "alignSelf": "end",
        "slot": "image",
        "aspect": "3/4",
        "treatment": "duotone",
        "frame": "arch"
      }
    ]
  }
}

Other patterns in this design

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