hero.seventies-sunset-stripes · Sunset stripes

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

Rule
A big orange half-sun rises on 3–10 straight out of four full-width stripes (orange, second accent, mustard, brown); under them the fat headline centred on 2–11, the subhead on 4–9 and one capsule button.
Slots
headline, subhead, cta
Grid areas
sun 3-10 · stripes full · headline 2-11 · subhead 4-9 · action 4-9 (12-column grid, 1-based inclusive spans)
Notes
The stripes run edge to edge (full bleed) and overlap the sun's base so it sinks into them, like a 1970s album cover. Headline, subhead and button are centred under them with space between.
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
full-bleed · vertical padding step 8

Pattern notes

  • An orange half-sun rises on 3–10 and sinks slightly into four full-bleed stripes (accent, accent2, mustard `surfaceAlt`, brown `heading`, 16 px each with 8 px gaps) that overlap its base. Below, with space between: the headline at step 7 centred on 2–11 (max ~14 ch), the lead centred on 4–9 and one large primary capsule button.

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-sunset-stripes",
  "kind": "hero",
  "grid": {
    "sun": "3-10",
    "stripes": "full",
    "headline": "2-11",
    "subhead": "4-9",
    "action": "4-9"
  },
  "slots": [
    "headline",
    "subhead",
    "cta"
  ],
  "notes": "The stripes run edge to edge (full bleed) and overlap the sun's base so it sinks into them, like a 1970s album cover. Headline, subhead and button are centred under them with space between.",
  "bleed": true,
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 4,
    "align": "end",
    "minVh": 0.9,
    "children": [
      {
        "el": "grid",
        "span": "full",
        "rowSpan": "1-1",
        "mobile": "keep",
        "gap": 0,
        "rowGap": 0,
        "children": [
          {
            "el": "box",
            "span": "full",
            "rowSpan": "1-1",
            "align": "center",
            "children": [
              {
                "el": "shape",
                "mobile": "keep",
                "kind": "half-circle",
                "size": "xl",
                "fill": "accent"
              }
            ]
          },
          {
            "el": "box",
            "span": "full",
            "rowSpan": "1-1",
            "alignSelf": "end",
            "gap": 1,
            "children": [
              {
                "el": "box",
                "gap": 0,
                "children": [
                  {
                    "el": "divider",
                    "color": "accent",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "accent",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "accent",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "accent",
                    "weight": 4
                  }
                ]
              },
              {
                "el": "box",
                "gap": 0,
                "children": [
                  {
                    "el": "divider",
                    "color": "accent2",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "accent2",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "accent2",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "accent2",
                    "weight": 4
                  }
                ]
              },
              {
                "el": "box",
                "gap": 0,
                "children": [
                  {
                    "el": "divider",
                    "color": "surfaceAlt",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "surfaceAlt",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "surfaceAlt",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "surfaceAlt",
                    "weight": 4
                  }
                ]
              },
              {
                "el": "box",
                "gap": 0,
                "children": [
                  {
                    "el": "divider",
                    "color": "heading",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "heading",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "heading",
                    "weight": 4
                  },
                  {
                    "el": "divider",
                    "color": "heading",
                    "weight": 4
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "text",
        "span": "2-11",
        "rowSpan": "2-2",
        "slot": "headline",
        "role": "display",
        "step": 7,
        "align": "center",
        "tracking": "tight",
        "leading": "tight",
        "maxCh": 14
      },
      {
        "el": "text",
        "span": "4-9",
        "rowSpan": "3-3",
        "slot": "subhead",
        "role": "lead",
        "align": "center",
        "maxCh": 42
      },
      {
        "el": "box",
        "span": "4-9",
        "rowSpan": "4-4",
        "align": "center",
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "size": "lg"
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.seventies-sunset-stripes.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.seventies-sunset-stripes — Seventies Psychedelic</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 90vh; padding: calc(var(--unit) * 8) 0; display: grid; align-content: end; text-align: center; }
  .sun { width: min(66%, 760px); aspect-ratio: 2 / 1; margin: 0 auto; border-radius: 999px 999px 0 0; background: var(--accent); }
  .hero .stripes { margin-bottom: calc(var(--unit) * 5); }
  .hero h1 { font-size: var(--step-5); max-width: 14ch; margin: 0 auto calc(var(--unit) * 3); }
  .hero p { font-size: var(--step-1); max-width: 42ch; margin: 0 auto calc(var(--unit) * 4); }
  @media (max-width: 640px) { .hero h1 { font-size: var(--step-3); } .sun { width: 90%; } }
</style>
</head>
<body>
<section class="hero">
  <div class="sun" aria-hidden="true"></div>
  <div class="stripes" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
  <div class="wrap">
    <h1 class="display">Good records, good coffee</h1>
    <p>A listening bar in the old bakery on Mill Street. Spinning soul and funk on a 1974 hi-fi, every night from five.</p>
    <a class="btn" href="#visit">Come on down</a>
  </div>
</section>
</body>
</html>

Other patterns in this design

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