hero.synthwave-sunset-horizon · Sunset horizon

A hero pattern from Synthwave Retro-Future, 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.synthwave-sunset-horizon". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Symmetric poster: the centred text stack (eyebrow, chrome headline, subhead, buttons) on top, then a striped neon sun on the centre columns 4–9, sinking into a full-width perspective grid floor.
Slots
eyebrow, headline, subhead, cta, cta2
Grid areas
title 1-12 · sun 4-9 · floor 1-12 (12-column grid, 1-based inclusive spans)
Notes
Text never sits on the sun. The accent sun (~320 px circle) sinks half behind the floor: a 2 px accent horizon, then cyan lines whose spacing grows toward the viewer, crossed by border-colour verticals converging on the sun. Cut 4–6 bg stripes through the visible sun. Phone keeps the composition, scaled.
Tokens
bg #0E0B1F · text #EDE6FF · heading #FFFFFF · accent #FE2D6D · accent2 #00A59F · Orbitron / Space Grotesk · radius 2px · space unit 8px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 4

Pattern notes

  • Full-bleed, symmetric, read top to bottom like a poster. Row 1: the text stack centred across 1–12: mono eyebrow (link colour), chrome headline at step 7 (max ~14 ch), lead subhead (max 48 ch), and a centred row of a large glowing primary button and a large outlined secondary button. Row 2: the sun (accent circle, ~320 px) centred, its lower half hidden behind the floor so it sinks into the horizon. The floor starts with a 2 px accent horizon line, then 2 px cyan (accent2) lines whose spacing grows toward the viewer (about 40, 48, 64, 80, 96, 128 px), crossed lower down by border-colour verticals (in the build, converge them on the sun's centre). Cut 4–6 bg-coloured stripes through the visible half of the sun. Text never sits on the sun. Phone keeps the same composition, scaled (sun ~190 px).

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.synthwave-sunset-horizon",
  "kind": "hero",
  "grid": {
    "title": "1-12",
    "sun": "4-9",
    "floor": "1-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2"
  ],
  "notes": "Text never sits on the sun. The accent sun (~320 px circle) sinks half behind the floor: a 2 px accent horizon, then cyan lines whose spacing grows toward the viewer, crossed by border-colour verticals converging on the sun. Cut 4–6 bg stripes through the visible sun. Phone keeps the composition, scaled.",
  "bleed": true,
  "tree": {
    "el": "grid",
    "mobile": "keep",
    "gap": 0,
    "rowGap": 0,
    "align": "end",
    "minVh": 0.92,
    "children": [
      {
        "el": "box",
        "span": "1-12",
        "rowSpan": "1-1",
        "gap": 4,
        "align": "center",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "align": "center",
            "tracking": "wide",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "align": "center",
            "transform": "uppercase",
            "weight": 900,
            "tracking": "wide",
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "align": "center",
            "maxCh": 48
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "justify": "center",
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg",
                "arrow": true
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "lg"
              }
            ]
          },
          {
            "el": "spacer",
            "size": 8
          }
        ]
      },
      {
        "el": "box",
        "span": "1-12",
        "rowSpan": "2-2",
        "alignSelf": "start",
        "align": "center",
        "children": [
          {
            "el": "shape",
            "kind": "circle",
            "size": "xl",
            "fill": "accent"
          }
        ]
      },
      {
        "el": "box",
        "span": "1-12",
        "rowSpan": "2-2",
        "bg": "bg",
        "alignSelf": "end",
        "gap": 0,
        "pad": 0,
        "border": "none",
        "children": [
          {
            "el": "divider",
            "color": "accent",
            "weight": 2
          },
          {
            "el": "spacer",
            "size": 5
          },
          {
            "el": "divider",
            "color": "accent2",
            "weight": 2
          },
          {
            "el": "spacer",
            "size": 6
          },
          {
            "el": "divider",
            "color": "accent2",
            "weight": 2
          },
          {
            "el": "spacer",
            "size": 8
          }
        ]
      },
      {
        "el": "box",
        "span": "1-12",
        "rowSpan": "3-3",
        "bg": "bg",
        "gap": 0,
        "pad": 0,
        "border": "none",
        "children": [
          {
            "el": "divider",
            "color": "accent2",
            "weight": 2
          },
          {
            "el": "spacer",
            "size": 10
          },
          {
            "el": "divider",
            "color": "accent2",
            "weight": 2
          },
          {
            "el": "spacer",
            "size": 12
          },
          {
            "el": "divider",
            "color": "accent2",
            "weight": 2
          },
          {
            "el": "spacer",
            "size": 16
          },
          {
            "el": "divider",
            "color": "accent2",
            "weight": 2
          }
        ]
      },
      {
        "el": "grid",
        "span": "1-12",
        "rowSpan": "3-3",
        "mobile": "keep",
        "alignSelf": "stretch",
        "cols": 12,
        "gap": 0,
        "children": [
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "border",
            "weight": 2,
            "orientation": "v"
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.synthwave-sunset-horizon.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.synthwave-sunset-horizon — Synthwave Retro-Future</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 92vh; display: grid; grid-template-rows: auto auto 1fr; align-content: end; overflow: hidden; padding-top: calc(var(--unit) * 4); }
  .text { display: grid; gap: calc(var(--unit) * 4); justify-items: center; text-align: center; padding-bottom: calc(var(--unit) * 5); }
  .text h1 { font-size: var(--step-7); max-width: 14ch; filter: drop-shadow(0 0 12px rgb(255 42 109 / 0.5)); }
  .text .lead { font-size: calc(var(--base) * 1.333); max-width: 48ch; }
  .actions { display: flex; gap: calc(var(--unit) * 3); flex-wrap: wrap; justify-content: center; }
  .horizon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); max-width: var(--max); margin: 0 auto; width: 100%; padding: 0 var(--gutter); }
  .horizon .sun { grid-column: 4 / 10; }
  .floor { width: 100%; aspect-ratio: 21 / 6; }
  @media (max-width: 640px) { .text h1 { font-size: var(--step-4); } .horizon .sun { grid-column: 1 / -1; } }
</style>
</head>
<body>
<section class="hero">
  <div class="wrap text">
    <p class="mono" style="color: var(--link)">Live · Friday 23:00 · Warehouse 9</p>
    <h1 class="chrome">Night Drive Forever</h1>
    <p class="lead">Six hours of analog synths, laser light and the city's last all-night dance floor.</p>
    <div class="actions"><a class="btn" href="#tickets">Get tickets <span aria-hidden="true">→</span></a><a class="btn outline" href="#lineup">See the lineup</a></div>
  </div>
  <div class="horizon" aria-hidden="true"><div class="sun"></div></div>
  <div class="floor" aria-hidden="true"></div>
</section>
</body>
</html>

Other patterns in this design

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