cta.synthwave-insert-coin · Insert coin

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

Rule
Centred on an indigo band: a blinking INSERT COIN label, the chrome headline, a large glowing button, then the perspective grid floor runs to the band's edges.
Slots
eyebrow, headline, cta
Grid areas
stack full (12-column grid, 1-based inclusive spans)
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
background surfaceAlt · full-bleed · vertical padding step 6

Pattern notes

  • A full-bleed surfaceAlt band, centred: a blinking mono "insert coin" label (link colour), the chrome h2 at step 6, a large glowing primary button with arrow, then the grid floor (accent horizon, cyan lines widening toward the viewer, 1 px accent verticals) running to the band's bottom edge. No sun here: the footer owns it.

Brand & product studio

Have a hard thing to explain?

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.synthwave-insert-coin",
  "kind": "cta",
  "grid": {
    "stack": "full"
  },
  "slots": [
    "eyebrow",
    "headline",
    "cta"
  ],
  "bg": "surfaceAlt",
  "bleed": true,
  "tree": {
    "el": "grid",
    "mobile": "keep",
    "gap": 0,
    "rowGap": 0,
    "children": [
      {
        "el": "box",
        "span": "1-12",
        "rowSpan": "1-1",
        "gap": 4,
        "align": "center",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "align": "center",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h2",
            "step": 6,
            "align": "center",
            "transform": "uppercase",
            "weight": 900,
            "tracking": "wide",
            "leading": "tight",
            "maxCh": 20
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "size": "lg",
            "arrow": true
          },
          {
            "el": "spacer",
            "size": 8
          }
        ]
      },
      {
        "el": "box",
        "span": "1-12",
        "rowSpan": "2-2",
        "bg": "surfaceAlt",
        "gap": 0,
        "pad": 0,
        "border": "none",
        "children": [
          {
            "el": "divider",
            "color": "accent",
            "weight": 2
          },
          {
            "el": "spacer",
            "size": 8
          },
          {
            "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": "grid",
        "span": "1-12",
        "rowSpan": "2-2",
        "mobile": "keep",
        "alignSelf": "stretch",
        "cols": 12,
        "gap": 0,
        "children": [
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          },
          {
            "el": "divider",
            "color": "accent",
            "weight": 1,
            "orientation": "v"
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.synthwave-insert-coin.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.synthwave-insert-coin — Synthwave Retro-Future</title>
<link rel="stylesheet" href="base.css">
<style>
  .band { background: var(--surface-alt); padding-top: calc(var(--unit) * 8); overflow: hidden; }
  .stack { display: grid; gap: calc(var(--unit) * 4); justify-items: center; text-align: center; }
  .blink { color: var(--link); animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .stack h2 { font-size: var(--step-5); max-width: 20ch; }
  .floor { width: 100%; margin-top: calc(var(--unit) * 4); }
  @media (max-width: 640px) { .stack h2 { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="band">
  <div class="wrap stack">
    <p class="mono blink">Insert coin</p>
    <h2 class="chrome">Player two has entered the game</h2>
    <a class="btn" href="/tickets">Claim your ticket <span aria-hidden="true">→</span></a>
  </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