The Grid
One grid, one spacing scale, one type scale, and the pages that carry the site written by hand instead of generated.
A brand whose credibility rests on precision: architecture, engineering, industrial design, or a studio whose buyer will notice a misaligned edge and quietly discount everything else you said.
The alignments are messed up and the composition is not there. Start again from the grid.
The whole thing is standing, every page of it, built on the same prices and the same mark as this site. It is marked on every screen as a direction rather than the live site, and the figures printed inside it are the ones published on the day it was built.
How it was built to look like itself.
- #F5F5F3Paper
- #0E0F11Ink
- #D8FB2ELime
- #D5D7DBRule
Archivo
900 at 104px, tracking -4.368px
Every display size carries a negative left margin equal to its own overhang, so a 104px headline optically aligns with the 11px label beneath it.
Twelve columns, a 24px gutter, margins stepping 20 / 32 / 56 / 72 with the viewport, a 1440 maximum, and one eight step spacing scale where a value off the scale is a bug.
Almost none, deliberately.
A label always sits in columns one to two, body copy always begins at column three, a plate may run the full twelve. All seventy nine placement classes exist, so a missing class can never drop an element out of the grid.
It solved composition outright, and the rule it found is how this site is still set: measured in the browser, labels at 72px and every line of body copy at 292px.
Discipline stops a page being wrong and cannot make it worth looking at. On its own this is correct and cold; it wants a strong imagery treatment sitting on top of it.
A grid is a floor, not a ceiling.