features.deco-framed-pairs · Framed pairs

A features pattern from Art Deco, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2. Give the section root data-pattern="features.deco-framed-pairs". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A centred header with ornament on 3–10, then features in two columns across 2–11, each in a fully ruled frame with a diamond and centred text.
Slots
sectionLabel, title, features[4..6]
Grid areas
header 3-10 · features 2-11 (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)

Pattern notes

  • A centred header on 3–10 (gold eyebrow, caps h2, ornament). Features flow two per row across 2–11, each in a ruled frame: a small diamond, the title in caps (h3, regular weight), one centred paragraph (max 40 ch). Never three per row.

What you get

What we do

Positioning

Find the one sentence your best customers already believe.

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

Websites

Fast, editable sites built on the CMS your team already knows.

Sales enablement

Decks, one-pagers and demos your reps actually use.

Product naming

Names that survive trademark search and a noisy trade show.

Brand governance

Guidelines as a living site, not a forgotten PDF.

Layout tree (as in design/layout.json)
{
  "pattern": "features.deco-framed-pairs",
  "kind": "features",
  "grid": {
    "header": "3-10",
    "features": "2-11"
  },
  "slots": [
    "sectionLabel",
    "title",
    "features[4..6]"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 6,
    "children": [
      {
        "el": "box",
        "span": "3-10",
        "gap": 3,
        "align": "center",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "eyebrow",
            "align": "center",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "align": "center",
            "transform": "uppercase",
            "weight": 400,
            "tracking": "wide",
            "maxCh": 26
          },
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 2,
            "align": "center",
            "children": [
              {
                "el": "divider",
                "weight": 1
              },
              {
                "el": "shape",
                "kind": "square",
                "size": "sm",
                "fill": "accent",
                "rotate": 45
              },
              {
                "el": "divider",
                "weight": 1
              }
            ]
          }
        ]
      },
      {
        "el": "repeat",
        "span": "2-11",
        "slot": "features",
        "min": 4,
        "max": 6,
        "layout": "grid",
        "cols": 2,
        "gap": 4,
        "of": {
          "el": "box",
          "gap": 2,
          "pad": [
            5,
            4
          ],
          "align": "center",
          "border": "all",
          "children": [
            {
              "el": "shape",
              "kind": "square",
              "size": "sm",
              "fill": "accent",
              "rotate": 45
            },
            {
              "el": "text",
              "slot": "title",
              "role": "h3",
              "align": "center",
              "transform": "uppercase",
              "weight": 400,
              "tracking": "wide"
            },
            {
              "el": "text",
              "slot": "body",
              "role": "body",
              "align": "center",
              "maxCh": 40
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.deco-framed-pairs.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.deco-framed-pairs — Art Deco</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .head { grid-column: 3 / 11; display: grid; gap: calc(var(--unit) * 3); margin-bottom: calc(var(--unit) * 6); }
  .head h2 { font-size: var(--step-3); }
  .pairs { grid-column: 2 / 12; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--unit) * 4); }
  .pairs article { border: 1px solid var(--rule); padding: calc(var(--unit) * 5) calc(var(--unit) * 4); display: grid; gap: calc(var(--unit) * 2); justify-items: center; }
  .pairs article::before { content: ""; width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); }
  .pairs h3 { font-size: var(--step-1); } .pairs p { max-width: 40ch; }
  @media (max-width: 640px) { .pairs { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <div class="head"><p class="eyebrow">The house</p><h2>Four rooms, one evening</h2><div class="orn" aria-hidden="true"><i></i></div></div>
    <div class="pairs">
      <article><h3>The Lounge</h3><p>Low brass lamps, deep leather and a pianist from eight until late.</p></article>
      <article><h3>The Terrace</h3><p>An open-air deck facing the river, heated from October to March.</p></article>
      <article><h3>The Salon</h3><p>A private room for twenty-four, with its own bartender and gramophone.</p></article>
      <article><h3>The Ballroom</h3><p>Sprung oak floor, a twelve-piece band and dancing until two.</p></article>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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