hero.seventies-concentric-burst · Concentric burst

A hero pattern from Seventies Psychedelic, 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.seventies-concentric-burst". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A concentric emblem centred on 3–10 (a thick second-accent ring, an orange disc, a small second-accent core, sharing one centre) crowns the stack: the label, the fat headline centred on 2–11, the lead and a capsule button.
Slots
eyebrow, headline, cta, subhead
Grid areas
emblem 3-10 · headline 2-11 · subhead 3-10 (12-column grid, 1-based inclusive spans)
Notes
Ring, disc and core share one centre (draw them as one SVG or stacked absolutely). The emblem stays concentric and centred at phone width, at about half the screen width.
Tokens
bg #F7E8C6 · text #3A1D0C · heading #4A1F08 · accent #D2561E · accent2 #BF8400 · Shrikhand / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • A concentric emblem crowns the hero, centred on 3–10: a thick second-accent ring, a band of background, an orange disc and a small second-accent core, all sharing one centre (like a record label or a setting sun seen head-on). Under it, centred: a small label, the fat headline at step 5 on 2–11 (max ~14 ch), the lead on 3–10 and a large primary capsule button. At phone width the emblem stays concentric at about half the screen width.

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.seventies-concentric-burst",
  "kind": "hero",
  "grid": {
    "emblem": "3-10",
    "headline": "2-11",
    "subhead": "3-10"
  },
  "slots": [
    "eyebrow",
    "headline",
    "cta",
    "subhead"
  ],
  "notes": "Ring, disc and core share one centre (draw them as one SVG or stacked absolutely). The emblem stays concentric and centred at phone width, at about half the screen width.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 4,
    "align": "center",
    "children": [
      {
        "el": "grid",
        "span": "3-10",
        "mobile": "keep",
        "cols": 1,
        "gap": 0,
        "rowGap": 0,
        "children": [
          {
            "el": "box",
            "span": "1-1",
            "rowSpan": "1-1",
            "alignSelf": "stretch",
            "align": "center",
            "justify": "center",
            "children": [
              {
                "el": "shape",
                "mobile": "keep",
                "kind": "ring",
                "size": "xl",
                "fill": "accent2"
              }
            ]
          },
          {
            "el": "box",
            "span": "1-1",
            "rowSpan": "1-1",
            "alignSelf": "stretch",
            "align": "center",
            "justify": "center",
            "children": [
              {
                "el": "shape",
                "mobile": "keep",
                "kind": "circle",
                "size": "md",
                "fill": "accent"
              }
            ]
          },
          {
            "el": "box",
            "span": "1-1",
            "rowSpan": "1-1",
            "alignSelf": "stretch",
            "align": "center",
            "justify": "center",
            "children": [
              {
                "el": "shape",
                "mobile": "keep",
                "kind": "circle",
                "size": "sm",
                "fill": "accent2"
              }
            ]
          }
        ]
      },
      {
        "el": "text",
        "span": "3-10",
        "slot": "eyebrow",
        "role": "label",
        "align": "center"
      },
      {
        "el": "text",
        "span": "2-11",
        "slot": "headline",
        "role": "display",
        "step": 5,
        "align": "center",
        "tracking": "tight",
        "leading": "tight",
        "maxCh": 14
      },
      {
        "el": "text",
        "span": "3-10",
        "slot": "subhead",
        "role": "lead",
        "align": "center",
        "maxCh": 44
      },
      {
        "el": "box",
        "span": "3-10",
        "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