Layouts
Every layout this system can produce, on one page. Each section below shows the variant, and its description names the JSON that makes it. Copy the shape, replace the content.
Three placements and nine content types. Everything on this page is one section object in a JSON file. This block is type "statement", layout "full" — no label column, 32px type, used as a pause between chapters.
Three placements
The muted line above the heading is an eyebrow — a category, not a sub-heading. Set it with the section field "eyebrow". Same 16px as body: it is quiet because of colour, not because it is small.
The section shell is a nine-column grid with a min(2.25vw, 32px) gutter. The label column spans three, the content column spans six. Below 1024px everything stacks and the grid stops mattering.
When to use which
- split — anything that needs a name and an explanation next to it. This is most sections.
- wide — a specimen that needs the full measure: a type scale, a wide diagram, a screen.
- full — a statement, or a block whose heading would only repeat what the content already says.
The label column is sticky at 32px from the top, so it stays with the content as you scroll past a long section.
Editorial
type: "editorial" — prose in the content column. Headings, lists, links, blockquote and cite are all styled.
Body copy sits at 16px. Paragraphs, bold, links and lists all inherit from one prose block, so a section written by anyone looks like every other section.
A guideline nobody can find is a guideline nobody follows.Placeholder attribution
Use editorial for reasoning. Use the specimen types below for anything with a value attached to it.
Group
type: "group" — named blocks in a two-up grid, with an optional intro above them. For rules, principles, do-and-don't pairs.
An optional intro paragraph runs above the grid.
First block
Each item is a heading and a body. The grid is one column on narrow screens, two from 640px up.
Second block
There is no item limit. Four items read as a 2×2, six as a 2×3.
Third block
Body accepts the same HTML as editorial.
Fourth block
Keep headings to two or three words so the grid stays even.
Compare
type: "compare" — two panels under one label, each with a verdict. tone is "right", "wrong" or "neutral". The only place colour carries meaning rather than brand.
Three new plans. Same price as last year.
Says the thing. Nothing to decode.
An innovative new range of digital solutions for our valued customers.
Five adjectives, no information.
Colour specimen
type: "specimen", kind "color" — named swatches, click to copy the hex. Three across from 640px.
Tiles — palette grid
type: "tiles" with columns 4 and tight true. A tile takes a fill and a label; span decides how many columns it eats. Same primitive as the two sections below it.
Tiles — matrix
The same type with columns 3 and every span 1. For a nine-up of icons, states or crops.
Media panel
type: "media" — one panel at a fixed aspect ratio. Optional "tag" puts a chip above it, "caption" a line below. Set contain true to letterbox a logo instead of cropping a photograph.
Panel stack
type: "panels" — hairline rule, chip, tinted panel, repeated. The pattern behind any page that shows cuts of a typeface or variants of an asset. Each block is separated by a rule instead of a border around a card, so the page stays flat and the eye still knows where a block ends.
Wide
layout: "wide" — the heading takes the left three columns, this description takes the next six, and the content below runs across all nine. For anything that needs the full measure.
Type specimen
type: "specimen", kind "type" — sample, name and size on one row. Works well as a wide section because the samples need the measure.
Gallery
type: "gallery" — captioned figures in a two-up grid, each with its own aspect ratio. For crops, mockups and applications.