content.seventies-flowing-column · Flowing column

A content pattern from Seventies Psychedelic, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 6; about page, section 1. Give the section root data-pattern="content.seventies-flowing-column". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
One centred column: label, fat h2 at step 5, a wavy divider, two centred paragraphs and a text link.
Slots
sectionLabel, title, body, body2, cta
Tokens
bg #F7E8C6 · text #3A1D0C · heading #4A1F08 · accent #D2561E · accent2 #BF8400 · Shrikhand / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • One centred column, max 64 ch wide: a label in the link colour, the h2 at step 5, a wavy divider, a lead paragraph, a body paragraph and a text link with an arrow.

About

How we think

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.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "content.seventies-flowing-column",
  "kind": "content",
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "body2",
    "cta"
  ],
  "tree": {
    "el": "box",
    "align": "center",
    "children": [
      {
        "el": "box",
        "gap": 4,
        "align": "center",
        "maxCh": 64,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "label",
            "align": "center"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "align": "center",
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 20
          },
          {
            "el": "divider",
            "weight": 8
          },
          {
            "el": "text",
            "slot": "body",
            "role": "lead",
            "align": "center",
            "maxCh": 58
          },
          {
            "el": "text",
            "slot": "body2",
            "role": "body",
            "align": "center",
            "maxCh": 58
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "link",
            "arrow": true
          }
        ]
      }
    ]
  }
}
Component example: reference/content.seventies-flowing-column.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>content.seventies-flowing-column — Seventies Psychedelic</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .col { max-width: 64ch; margin: 0 auto; display: grid; gap: calc(var(--unit) * 4); text-align: center; justify-items: center; }
  .col .label { color: var(--link); font-weight: 800; }
  .col h2 { font-size: var(--step-3); max-width: 20ch; }
  .col .wave { width: 240px; }
  .col .lead { font-size: var(--step-1); line-height: 1.4; }
  .col a { color: var(--link); font-weight: 800; }
</style>
</head>
<body>
<section class="wrap">
  <div class="col">
    <p class="label">Our story</p>
    <h2>It started with one crate of records</h2>
    <div class="wave" aria-hidden="true"></div>
    <p class="lead">In 2019 we bought a bakery, a crate of 600 records and a hi-fi older than both of us.</p>
    <p>We kept the bakery's tiles and ovens, built a bar from the old flour bins and opened with a single turntable. Five years on there are three, and the crate has become a wall.</p>
    <a href="#visit">Plan your visit →</a>
  </div>
</section>
</body>
</html>

Other patterns in this design

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