hero.midcentury-atomic-starburst · Atomic starburst

A hero pattern from Mid-Century Modern, 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.midcentury-atomic-starburst". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Bold headline on 1–8; a teal blob on 8–12 with a circular duotone photo overlapping it on 9–12; a small orange starburst tilted in the top-right corner.
Slots
eyebrow, headline, subhead, heroImage, cta, cta2
Grid areas
eyebrow 1-6 · star 11-12 · headline 1-7 · blob 8-12 · photo 9-12 · subhead 1-6 · actions 1-7 (12-column grid, 1-based inclusive spans)
Notes
The blob sits behind the photo and peeks out on its left and bottom; the photo overlaps column 8 of the headline row by one column. At phone width the photo comes after the headline and the blob and star hide.
Tokens
bg #F3E9D6 · text #2B231B · heading #2B231B · accent #C9552A · accent2 #0099BE · League Spartan / Jost · radius 20px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • The eyebrow (spaced capitals, link colour) on 1–6; an orange starburst (size lg) tilted 15° in the top-right corner (11–12). The headline at step 6, heaviest weight, tight, on 1–7 (max ~14 ch), clear of the blob. A teal blob fills 8–12 across rows 2–3 and a circular duotone photo on 9–12 sits on top of it, so the blob peeks out on the left and bottom. The lead (max 40 ch) on 1–6, then a primary and a secondary pill button. At phone width the blob and star hide; the photo follows the headline.

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 projectRead case studies
Layout tree (as in design/layout.json)
{
  "pattern": "hero.midcentury-atomic-starburst",
  "kind": "hero",
  "grid": {
    "eyebrow": "1-6",
    "star": "11-12",
    "headline": "1-7",
    "blob": "8-12",
    "photo": "9-12",
    "subhead": "1-6",
    "actions": "1-7"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "heroImage",
    "cta",
    "cta2"
  ],
  "notes": "The blob sits behind the photo and peeks out on its left and bottom; the photo overlaps column 8 of the headline row by one column. At phone width the photo comes after the headline and the blob and star hide.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "align": "center",
    "minVh": 0.88,
    "children": [
      {
        "el": "text",
        "span": "1-6",
        "rowSpan": "1-1",
        "color": "link",
        "slot": "eyebrow",
        "role": "eyebrow",
        "transform": "uppercase",
        "tracking": "wide"
      },
      {
        "el": "shape",
        "span": "11-12",
        "rowSpan": "1-1",
        "mobile": "hide",
        "alignSelf": "start",
        "kind": "star",
        "size": "lg",
        "fill": "accent",
        "rotate": 15
      },
      {
        "el": "text",
        "span": "1-7",
        "rowSpan": "2-2",
        "slot": "headline",
        "role": "display",
        "step": 6,
        "tracking": "tight",
        "leading": "tight",
        "maxCh": 14
      },
      {
        "el": "shape",
        "span": "8-12",
        "rowSpan": "2-3",
        "mobile": "hide",
        "kind": "blob",
        "size": "xl",
        "fill": "accent2"
      },
      {
        "el": "media",
        "span": "9-12",
        "rowSpan": "2-3",
        "alignSelf": "center",
        "slot": "heroImage",
        "aspect": "1/1",
        "treatment": "duotone",
        "frame": "circle"
      },
      {
        "el": "text",
        "span": "1-6",
        "rowSpan": "3-3",
        "slot": "subhead",
        "role": "lead",
        "maxCh": 40
      },
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "4-4",
        "dir": "row",
        "gap": 3,
        "wrap": true,
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "size": "lg"
          },
          {
            "el": "button",
            "slot": "cta2",
            "variant": "secondary",
            "size": "lg"
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.midcentury-atomic-starburst.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.midcentury-atomic-starburst — Mid-Century Modern</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 88vh; padding: calc(var(--unit) * 8) 0; align-items: center; row-gap: calc(var(--unit) * 3); }
  .hero .eyebrow { grid-column: 1 / 7; grid-row: 1; }
  .star { grid-column: 11 / 13; grid-row: 1; justify-self: end; width: 96px; aspect-ratio: 1; background: var(--accent); transform: rotate(15deg);
          clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
  .hero h1 { grid-column: 1 / 9; grid-row: 2; font-size: var(--step-6); max-width: 14ch; position: relative; z-index: 1; }
  .hero .blob { grid-column: 8 / 13; grid-row: 2 / 4; background: var(--teal); aspect-ratio: 1.1; width: 100%; }
  .hero .photo { grid-column: 9 / 13; grid-row: 2 / 4; aspect-ratio: 1; border-radius: 50%; object-fit: cover; width: 100%;
                 background: var(--accent); color: transparent; filter: grayscale(1) sepia(0.6) saturate(1.6); transform: translate(12px, 18px); }
  .hero .lead { grid-column: 1 / 7; grid-row: 3; font-size: var(--step-1); max-width: 40ch; }
  .hero .actions { grid-column: 1 / 8; grid-row: 4; display: flex; gap: calc(var(--unit) * 3); flex-wrap: wrap; }
  @media (max-width: 640px) { .hero h1 { font-size: var(--step-4); } .star, .hero .blob { display: none; } .hero .photo { transform: none; width: 80%; height: auto; aspect-ratio: 1 / 1; align-self: start; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <p class="eyebrow">Hand-built furniture · Since 1957</p>
    <span class="star" aria-hidden="true"></span>
    <h1>Chairs that outlive the house.</h1>
    <span class="blob" aria-hidden="true"></span>
    <img class="photo" src="lounge-chair.avif" width="480" height="480" alt="A walnut lounge chair with orange cushions">
    <p class="lead">Moulded plywood, solid walnut and wool from one mill in Yorkshire, assembled to order in our Ohio workshop.</p>
    <div class="actions"><a class="btn" href="#shop">Shop the collection</a><a class="btn secondary" href="#visit">Visit the showroom</a></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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