cta.y2k-chrome-starburst · Starburst

A cta pattern from Y2K Chrome, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 7. Give the section root data-pattern="cta.y2k-chrome-starburst". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
On surfaceAlt: a giant rotated sparkle star in accent on 1–4; the chrome headline at step 6 and an inline email form in a pill on 5–12.
Slots
headline, body, newsletter
Grid areas
star 1-4 · copy 5-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)
Section
background surfaceAlt

Pattern notes

  • Section on surfaceAlt, bleeding edge to edge. A giant four-point star in accent rotated −12° on 1–4. On 5–12: headline at step 6 (weight 700, uppercase, chrome fill), one line of text, and an inline email form whose field and button sit together in one pill-shaped capsule. At phone width the star shrinks to 96 px above the headline.

Have a hard thing to explain?

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

you@example.com
Subscribe
Layout tree (as in design/layout.json)
{
  "pattern": "cta.y2k-chrome-starburst",
  "kind": "cta",
  "grid": {
    "star": "1-4",
    "copy": "5-12"
  },
  "slots": [
    "headline",
    "body",
    "newsletter"
  ],
  "bg": "surfaceAlt",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "center",
    "children": [
      {
        "el": "shape",
        "span": "1-4",
        "kind": "star",
        "size": "xl",
        "fill": "accent",
        "rotate": -12
      },
      {
        "el": "box",
        "span": "5-12",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "slot": "headline",
            "role": "h2",
            "step": 6,
            "transform": "uppercase",
            "weight": 700,
            "tracking": "tight",
            "leading": "tight"
          },
          {
            "el": "text",
            "slot": "body",
            "role": "body",
            "maxCh": 50
          },
          {
            "el": "form",
            "slot": "newsletter",
            "fields": [
              "email"
            ],
            "inline": true
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.y2k-chrome-starburst.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.y2k-chrome-starburst — Y2K Chrome</title>
<link rel="stylesheet" href="base.css">
<style>
  .band { background: #DEE7F1; padding: 112px 0; }
  .band .grid { align-items: center; row-gap: 24px; }
  .burst { grid-column: 1 / 5; transform: rotate(-12deg); }
  .copy { grid-column: 5 / 13; display: grid; gap: 20px; }
  .copy h2 { font-size: var(--step-6); }
  form { display: flex; max-width: 520px; padding: 6px; border-radius: 999px; background: var(--surface); border: 2px solid var(--heading); }
  form input { flex: 1; border: 0; background: transparent; font: inherit; padding: 0 16px; min-width: 0; }
  @media (max-width: 640px) { .burst { width: 96px; } .copy h2 { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="band">
  <div class="wrap grid">
    <div class="burst star" aria-hidden="true"></div>
    <div class="copy">
      <h2 class="chrome">Join the fan club</h2>
      <p>Early tickets, unreleased edits and a monthly zine. No spam, ever.</p>
      <form><label for="e" style="position:absolute;left:-9999px">Email</label><input id="e" type="email" placeholder="you@hotmail.com"><button class="pill primary" type="submit">Sign up</button></form>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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