hero.deco-sunburst-portal · Sunburst portal

A hero pattern from Art Deco, 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.deco-sunburst-portal". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Everything on the central axis: a half-sun rises over columns 4–9, the uppercase headline spans 2–11 centred, a diamond ornament and the subhead sit on 4–9.
Slots
eyebrow, headline, subhead, cta, cta2
Grid areas
sun 4-9 · eyebrow 3-10 · headline 2-11 · ornament 4-9 · subhead 4-9 · actions 4-9 (12-column grid, 1-based inclusive spans)
Notes
The half-circle is a flat sunburst (render rays as alternating accent/bg wedges if you can, else a solid half-disc). The headline is the only display-size text; mirror the two buttons around the axis.
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 10

Pattern notes

  • A flat half-circle in the accent colour (the rising sun; render rays as alternating accent and background wedges if you can) sits centred on columns 4–9 at the top of the hero. Under it: the eyebrow in gold spaced capitals (3–10), the headline in uppercase display type at step 6, regular weight, wide tracking, centred on 2–11 (max ~18 characters per line), the ornament on 4–9, the subhead centred on 4–9, and two buttons mirrored around the axis (primary + ghost). At phone width everything stacks centred, the sun stays, and the headline drops to step 3 with tracking reduced to 0.05em so the longest word fits 375 px without horizontal scroll.

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.deco-sunburst-portal",
  "kind": "hero",
  "grid": {
    "sun": "4-9",
    "eyebrow": "3-10",
    "headline": "2-11",
    "ornament": "4-9",
    "subhead": "4-9",
    "actions": "4-9"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2"
  ],
  "notes": "The half-circle is a flat sunburst (render rays as alternating accent/bg wedges if you can, else a solid half-disc). The headline is the only display-size text; mirror the two buttons around the axis.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 4,
    "align": "center",
    "minVh": 0.9,
    "children": [
      {
        "el": "shape",
        "span": "4-9",
        "mobile": "keep",
        "alignSelf": "end",
        "kind": "half-circle",
        "size": "xl",
        "fill": "accent"
      },
      {
        "el": "text",
        "span": "3-10",
        "color": "link",
        "slot": "eyebrow",
        "role": "eyebrow",
        "align": "center",
        "transform": "uppercase",
        "tracking": "wide"
      },
      {
        "el": "text",
        "span": "2-11",
        "slot": "headline",
        "role": "display",
        "step": 6,
        "align": "center",
        "transform": "uppercase",
        "weight": 400,
        "tracking": "wide",
        "leading": "tight",
        "maxCh": 18
      },
      {
        "el": "box",
        "span": "4-9",
        "mobile": "keep",
        "dir": "row",
        "gap": 2,
        "align": "center",
        "children": [
          {
            "el": "box",
            "children": [
              {
                "el": "divider",
                "weight": 1
              }
            ]
          },
          {
            "el": "shape",
            "kind": "square",
            "size": "sm",
            "fill": "accent",
            "rotate": 45
          },
          {
            "el": "box",
            "children": [
              {
                "el": "divider",
                "weight": 1
              }
            ]
          }
        ]
      },
      {
        "el": "text",
        "span": "4-9",
        "slot": "subhead",
        "role": "lead",
        "align": "center",
        "maxCh": 46
      },
      {
        "el": "box",
        "span": "4-9",
        "dir": "row",
        "gap": 3,
        "align": "center",
        "justify": "center",
        "wrap": true,
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "size": "lg"
          },
          {
            "el": "button",
            "slot": "cta2",
            "variant": "ghost",
            "size": "lg"
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.deco-sunburst-portal.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.deco-sunburst-portal — Art Deco</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 90vh; padding: calc(var(--unit) * 10) 0; align-content: center; row-gap: calc(var(--unit) * 4); }
  .sun { grid-column: 4 / 10; aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0;
         background: repeating-conic-gradient(from -90deg at 50% 100%, var(--accent) 0 6deg, var(--bg) 6deg 12deg); }
  .hero .eyebrow { grid-column: 3 / 11; }
  .hero h1 { grid-column: 2 / 12; font-size: var(--step-6); max-width: 18ch; justify-self: center; }
  .hero .orn, .hero .sub, .hero .actions { grid-column: 4 / 10; }
  .sub { font-size: var(--step-1); max-width: 46ch; justify-self: center; }
  .actions { display: flex; justify-content: center; gap: calc(var(--unit) * 3); flex-wrap: wrap; }
  @media (max-width: 640px) { .hero h1 { font-size: var(--step-3); letter-spacing: 0.05em; overflow-wrap: anywhere; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <div class="sun" aria-hidden="true"></div>
    <p class="eyebrow">The Meridian Room — Est. 1928</p>
    <h1>Cocktails at the top of the city</h1>
    <div class="orn" aria-hidden="true"><i></i></div>
    <p class="sub">A rooftop bar on the forty-second floor, with a twelve-piece band every Friday night.</p>
    <div class="actions"><a class="btn" href="#book">Reserve a table</a><a class="btn ghost" href="#menu">See the menu</a></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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