cta.seventies-gradient-sunset · Gradient sunset

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

Rule
A full-bleed sunset band (accent fading to accent2): the fat headline centred on 2–11, a capsule button.
Slots
headline, cta
Grid areas
headline 2-11 · action 2-11 (12-column grid, 1-based inclusive spans)
Notes
The band's background is a vertical gradient from accent to accent2 (gradients are allowed only here and in the wavy-band hero); text stays onAccent and must pass AA on both ends — if it fails on accent2, end the gradient on a deeper shade of accent instead.
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
background accent · full-bleed · vertical padding step 10

Pattern notes

  • A full-bleed band with a vertical accent-to-accent2 gradient: the headline at step 6 centred on 2–11 in `onAccent` and a large secondary capsule button; the footer's stripes follow straight after it.

Have a hard thing to explain?

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.seventies-gradient-sunset",
  "kind": "cta",
  "grid": {
    "headline": "2-11",
    "action": "2-11"
  },
  "slots": [
    "headline",
    "cta"
  ],
  "notes": "The band's background is a vertical gradient from accent to accent2 (gradients are allowed only here and in the wavy-band hero); text stays onAccent and must pass AA on both ends — if it fails on accent2, end the gradient on a deeper shade of accent instead.",
  "bg": "accent",
  "bleed": true,
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 6,
    "children": [
      {
        "el": "text",
        "span": "2-11",
        "color": "onAccent",
        "slot": "headline",
        "role": "display",
        "step": 6,
        "align": "center",
        "tracking": "tight",
        "leading": "tight",
        "maxCh": 20
      },
      {
        "el": "box",
        "span": "2-11",
        "align": "center",
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "size": "lg"
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.seventies-gradient-sunset.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.seventies-gradient-sunset — Seventies Psychedelic</title>
<link rel="stylesheet" href="base.css">
<style>
  .band { background: linear-gradient(180deg, var(--accent) 0%, #B8461A 100%); color: var(--on-accent); padding: calc(var(--unit) * 10) 0 0; text-align: center; }
  .band h2 { color: var(--on-accent); font-size: var(--step-4); max-width: 16ch; margin: 0 auto calc(var(--unit) * 4); text-shadow: 4px 4px 0 var(--heading); }
  .band .btn { margin-bottom: calc(var(--unit) * 8); }
  @media (max-width: 640px) { .band h2 { font-size: var(--step-2); } }
</style>
</head>
<body>
<section class="band">
  <div class="wrap"><h2>Saturday night is on the house</h2><a class="btn secondary" href="#rsvp">Save me a stool</a></div>
  <div class="stripes" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
</section>
</body>
</html>

Other patterns in this design

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