Foundations

Space, shape, marks, motion

The guide’s own rhythm — 14, 22, 26, 40, 64, 90 — extended with an 8px base. Soft corners, no depth, and a clear-space rule around the mark that nothing may enter.

Spacing scale

Icon to label · rule to body

Kicker to heading — the guide’s

Grid gap — the guide’s

Card padding — the guide’s

Page gutter on desktop · petrol band padding inside a card

Section padding — the guide’s

Hero padding — the guide’s

Measures

1080 — the frame, the guide’s wrap

640 — the body measure, about 70ch of Garamond at 18px

560 — the centred intro, the guide’s 62ch

340 — one column of a three-up card row

Breakpoints: 640 · 767 · 1024 · 1180. Below 767 the layout is one column, the gutter drops to 20 and the display steps from 48/56 to 34/42.

Shape — the guide’s radii

10 — cards, swatches

6 — buttons, inputs

20 — badges

50% — avatars

No shadows and no gradients. The guide forbids both on the mark, and a page that shadows its cards while the logo stays flat looks like two systems. Depth comes from the petrol bands; separation comes from a 1px rule.

Strokes

1px rule — dividers and card edges

48×2 vermeil — under a heading, the one gold

1px vermeil vertical — the lockup’s divider

1px limestone/22% — dividers on petrol

The marks — clear space and minimum sizes

Clear space

Equal to the cross’s arm span on every side. Nothing — type, rules, page edges — enters that field. The SVG files carry it in their viewBox.

Minimum sizes

Mark alone24px · 8mm

Horizontal lockup140px · 40mm wide

Stacked lockup120px · 32mm wide

Below thesethe favicon variant

The favicon carries a heavier cross tuned for 16–48px. Never scale the primary mark down to it. The seal is ceremonial and never appears on the website.

Motion

One duration

180ms · ease-out

A petrol button deepens; a link goes to porphyry; an outline fills. That is the whole vocabulary. Nothing moves, lifts or scales — carved letters do not animate. Under prefers-reduced-motion the change is instant.