Layout.

Every page is one sheet: a column up to 1400px wide, zone letters down both rails on a wide screen, ruled into bands, with the nav above and the title-block footer below. The parts below are what a page is built from.

Sheet and bands.

SheetShell is the page: its width, its rails and, unless a page opts out, the closing band. Band is a section of it, ruled off by a hairline with the site’s padding. A page is a stack of bands, and the stack reads as one document from nav to footer.

Band 1

Hero.

Band 2

The argument.

Band 3

Proof.

Show code
import { Band, SheetShell } from "#/ui/site/sheet-shell";

<SheetShell>
  <Band className="border-x">...</Band>
  <Band className="border-x">...</Band>
</SheetShell>  // the closing band follows on every page

Page title.

A mono eyebrow naming the subject, a sentence-case headline ending in a period, and one graphite line under it. The headline argues; the eyebrow files it.

Model-based definition

GD&T on the model, and on the sheet.

Drafter puts the tolerances on the faces they control, in SolidWorks and NX.

Show code
<Eyebrow>Model-based definition</Eyebrow>
<h1 className="mt-5 max-w-[20ch] text-3xl leading-[1.15] font-semibold tracking-[-0.02em] text-balance text-ink sm:text-4xl">
  GD&amp;T on the model, and on the sheet.
</h1>
<p className="mt-4 max-w-[52ch] text-base leading-relaxed text-graphite">...</p>

Eyebrow.

IBM Plex Mono, 11px, uppercase, widely tracked, in faint. It labels what a section is; it is never a sentence and never a call to action.

Careers at Drafter

Show code
import { Eyebrow } from "#/ui/site/eyebrow";

<Eyebrow>Careers at Drafter</Eyebrow>

Title block.

A drawing’s title block, closing a masthead: the four facts a reader scans before reading a word. Used by posts, job postings, legal pages and case studies. Every field tells the truth; nothing is invented for effect.

Document
Job posting
Location
Remote, USA
Type
Full time
Status
Open
Show code
import { TitleBlock } from "#/ui/site/title-block";

<TitleBlock
  kind="Job posting"
  fields={[
    { label: "Location", value: role.location },
    { label: "Type", value: "Full time" },
  ]}
/>

Sheet frame.

Anything meant to be filled in or held up for a look sits on a sheet: a form, a window’s body, a result. The hard offset shadow is a sheet of paper lifted off the drawing, never a blur.

Vellum

A sheet laid on the drawing, with the 6px hard offset.

Show code
import { SheetFrame } from "#/ui/site/sheet-frame";

<SheetFrame className="p-6">...</SheetFrame>        // tone="paper" for a paper sheet

Best practices.

Do

  • Build a page from SheetShell and Bands, and let the closing band end it.
  • Open every page with an eyebrow, a headline that argues, and one line.
  • Keep corners square; only buttons take a slight round.
  • Lift what is meant to be handled onto a sheet with the hard offset.

Don't

  • Do not use soft, blurred shadows on the page itself; windows are the one exception.
  • Do not center body copy beyond a short closing line.
  • Do not write an eyebrow as a sentence.
  • Do not start a second column of chrome inside a band.

Go to manufacturing.

Book a demoOpen the Toolbox