INDIZILLA Talk to us
Marketing OS Research Services Tools Pricing Studio Market
More
25% off your first order, until Black Friday. Use FIRST25 at checkout
Home / Design directions / The Grid
Direction 12 of 14

The Grid

One grid, one spacing scale, one type scale, and the pages that carry the site written by hand instead of generated.

Available 46 pages 81 interactive controls on the home page
Right for

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.

Where the buyer reads before they call

the grid
The Grid as it was built: Composition as the argument
The brief it came from

The alignments are messed up and the composition is not there. Start again from the grid.

Open it

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.

The brand design

How it was built to look like itself.

Palette
  • #F5F5F3Paper
  • #0E0F11Ink
  • #D8FB2ELime
  • #D5D7DBRule
Type

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.

Shape

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.

Motion

Almost none, deliberately.

The one device

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.

What it does better than the rest

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.

What it costs you

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.

The rule it taught us

A grid is a floor, not a ceiling.

WhatsApp Call