cta.luxury-appointment · Appointment

A cta pattern from Luxury Fashion, 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.luxury-appointment". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
On the surface tone, centred on 4–9: caps line, italic headline, a short line and a black outlined button. Nothing else.
Slots
eyebrow, headline, body, cta
Grid areas
panel 4-9 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAF8F4 · text #1A1A1A · heading #0A0A0A · accent #111111 · accent2 #5C4311 · Bodoni Moda / Jost · radius 0px · space unit 8px (full list in design/tokens.json)
Section
background surface · vertical padding step 12

Pattern notes

  • On the `surface` tone, centred on 3–10: caps eyebrow, the h2 at step 5 in italic (max 18 ch), a muted lead line and one small outlined (secondary) black button. Extra padding (step 12).

Brand & product studio

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.luxury-appointment",
  "kind": "cta",
  "grid": {
    "panel": "4-9"
  },
  "slots": [
    "eyebrow",
    "headline",
    "body",
    "cta"
  ],
  "bg": "surface",
  "tree": {
    "el": "grid",
    "gap": 4,
    "children": [
      {
        "el": "box",
        "span": "3-10",
        "gap": 4,
        "align": "center",
        "children": [
          {
            "el": "text",
            "slot": "eyebrow",
            "role": "label",
            "align": "center",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h2",
            "step": 5,
            "align": "center",
            "weight": 400,
            "italic": true,
            "maxCh": 18
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "lead",
            "align": "center",
            "maxCh": 40
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "size": "sm"
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.luxury-appointment.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.luxury-appointment — Luxury Fashion</title>
<link rel="stylesheet" href="base.css">
<style>
  .band { background: var(--surface); padding: calc(var(--unit) * 16) 0; }
  .panel { grid-column: 4 / 10; display: grid; gap: calc(var(--unit) * 4); justify-items: center; text-align: center; }
  .panel h2 { font-size: var(--step-4); font-style: italic; max-width: 22ch; }
  .panel p.muted { max-width: 40ch; font-size: 13px; }
  .btn { font: 500 11px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--heading); text-decoration: none;
         padding: 16px 32px; border: 1px solid var(--heading); transition: background 700ms var(--ease), color 700ms var(--ease); }
  .btn:hover { background: var(--accent); color: var(--on-accent); }
  @media (max-width: 640px) { .panel h2 { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="band">
  <div class="wrap grid">
    <div class="panel">
      <p class="caps">Rue Saint-Honoré, Paris</p>
      <h2 class="didone">A private fitting, at your hour</h2>
      <p class="muted">Our tailors receive by appointment, Tuesday to Saturday. Alterations are made in the atelier upstairs.</p>
      <a class="btn" href="/appointments">Book an appointment</a>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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