cta.deco-gilded-band · Gilded band

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

Rule
A full-bleed gold band: a diamond on 6–7, the uppercase headline centred on 2–11 at step 5, a line of copy and one button centred on 4–9, all in onAccent.
Slots
headline, body, cta
Grid areas
diamond 6-7 · headline 2-11 · body 4-9 · action 4-9 (12-column grid, 1-based inclusive spans)
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
background accent · full-bleed · vertical padding step 10

Pattern notes

  • The page's single gold band, full bleed, `bg: accent`, all text `onAccent`: a small diamond in `onAccent` on 6–7, the headline in caps at step 5 centred on 2–11, one line of copy on 4–9, one large secondary button centred.

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.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.deco-gilded-band",
  "kind": "cta",
  "grid": {
    "diamond": "6-7",
    "headline": "2-11",
    "body": "4-9",
    "action": "4-9"
  },
  "slots": [
    "headline",
    "body",
    "cta"
  ],
  "bg": "accent",
  "bleed": true,
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 4,
    "children": [
      {
        "el": "shape",
        "span": "6-7",
        "mobile": "keep",
        "kind": "square",
        "size": "sm",
        "fill": "onAccent",
        "rotate": 45
      },
      {
        "el": "text",
        "span": "2-11",
        "color": "onAccent",
        "slot": "headline",
        "role": "h2",
        "step": 5,
        "align": "center",
        "transform": "uppercase",
        "weight": 400,
        "tracking": "wide",
        "leading": "tight",
        "maxCh": 24
      },
      {
        "el": "text",
        "span": "4-9",
        "color": "onAccent",
        "slot": "body",
        "role": "body",
        "align": "center",
        "maxCh": 48
      },
      {
        "el": "box",
        "span": "4-9",
        "align": "center",
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "size": "lg"
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.deco-gilded-band.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.deco-gilded-band — Art Deco</title>
<link rel="stylesheet" href="base.css">
<style>
  .band { background: var(--accent); color: var(--on-accent); padding: calc(var(--unit) * 10) 0; }
  .band .grid { row-gap: calc(var(--unit) * 4); justify-items: center; }
  .band .diamond { grid-column: 6 / 8; width: 14px; height: 14px; background: var(--on-accent); transform: rotate(45deg); }
  .band h2 { grid-column: 2 / 12; color: var(--on-accent); font-size: var(--step-5); max-width: 24ch; }
  .band p { grid-column: 4 / 10; max-width: 48ch; }
  .band .btn { grid-column: 4 / 10; background: transparent; color: var(--on-accent); outline: 1px solid var(--on-accent); }
  .band .btn:hover { background: var(--on-accent); color: var(--accent); }
  @media (max-width: 640px) { .band h2 { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="band">
  <div class="wrap grid">
    <span class="diamond" aria-hidden="true"></span>
    <h2>Saturday, black tie, until two</h2>
    <p>Tables for the New Year gala open on the first of December. Thirty places only.</p>
    <a class="btn" href="#book">Join the list</a>
  </div>
</section>
</body>
</html>

Other patterns in this design

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