← All styles
Live preview Open site ↗
A page rendered in Drafting Sheet

Drafting Sheet

an architect's plot sheet on the desk

Warm paper ground, ink grotesk set in tight uppercase, and one plot orange for annotation. Corners are square, rules are hairlines, and the page is bounded by ruler ticks and register marks like a sheet off a plotter.

lighttechnicaleditorialarchitecturesaasuppercaseminimal v1.0.0 CC-BY-4.0

Install

npx styles-md add drafting-sheet

Palette

bg #efede7
surface #cdcac1
fg #232320
muted #6b6a64
accent #c2380a
accent-fg #ffffff
border #a6a39a

Type

Body & headings Familjen Grotesk

Aa Bb Cc 0123 The quick brown fox

"Familjen Grotesk", "Helvetica Neue", Arial, sans-serif
Code Geist Mono

const total = 1 + lI0O;

"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace

16px base · 1.2 ratio · body 500 / heading 600 · heading tracking -0.02em. Fonts are not bundled. Install the first family in each stack, or the specimens below fall back to the next one your device has.

4xl · 39.81px

The quick brown fox jumps

3xl · 33.18px

The quick brown fox jumps

2xl · 27.65px

The quick brown fox jumps

xl · 23.04px

The quick brown fox jumps

lg · 19.2px

The quick brown fox jumps

base · 16px

The quick brown fox jumps

sm · 13.33px

The quick brown fox jumps

xs · 11.11px

The quick brown fox jumps

Licensing

No font files are redistributed here. Every family this style asks for by name is free for commercial use, and CI rejects a style that names one which is not.

Fallbacks: Helvetica Neue, Arial, sans-serif, ui-monospace, SFMono-Regular, Menlo, monospace. These are CSS generics and fonts the reader's OS already ships, referenced by name only, so nothing is licensed or downloaded.

The spec itself, and everything generated from it, is CC-BY-4.0. Attribution is the comment at the top of each generated file; keep it and you have complied.

Shape, space & motion

stroke
1px
radius
0px · 0px · 0px
spacing unit
4px
gutter
24px
section gap
96px
max width
1440px
motion
400ms cubic-bezier(0.625, 0.05, 0, 1)
Download

Drafting Sheet

A plot sheet, not a landing page. Paper ground, ink type, hairline rules, and one orange reserved for the marks an engineer would make by hand. Nothing is rounded and nothing is blurred, so the page reads as something printed and measured rather than rendered.

Principles

  • Corners are square. radius-sm through radius-lg are all 0, and only markers are circles.
  • Rules are 1px hairlines. They divide the page into cells the way a drawing has a border and a grid.
  • Type is uppercase grotesk at -0.02em. Sentence case appears only in body paragraphs.
  • Orange is annotation. Small squares, one hairline, a link, a single filled control per screen.
  • Illustration is drawn, stippled and monochrome, sitting on the paper with no frame around it.
  • Shadows are hard offsets in ink with no blur. A soft shadow is the one thing that breaks this.

Typography

One grotesk does headings and body, one mono does everything the sheet needs to label. Headings run uppercase at weight 600 with tracking pulled to -0.02em, because at that width the caps close ranks and read as a title block rather than as a sentence. Mono is small on purpose: 10 to 13px, wide tracking, uppercase, and it carries dimensions, section keys and annotations. Body copy is the only sentence case on the page, at weight 500 so it holds against the greige.

Colour

Paper #efede7 is the ground and ink #232320 sits on it at 13.46:1. surface greige is a filled cell, and ink still clears AA on it at 9.61:1. accent is a burnt plot orange, dark enough that white on it clears AA at 5.43:1 and that it works as link text on paper at 4.64:1. Brighter oranges look better and fail both, which is the tradeoff this palette settles. border is a greige hairline at 2.15:1 against the paper.

Components

  • Title block: uppercase, weight 600, -0.02em, sitting against a hairline with a mono key above it.
  • Rule: 1px border, full bleed, dividing sections into cells rather than framing them.
  • Ruler edge: mono tick marks along a section edge, with a plus register mark at each corner.
  • Button (primary): accent fill, accentFg label, square, 12px/24px, uppercase mono.
  • Button (secondary): 1px border, fg label, square, same metrics, shadow-sm on hover.
  • Cell: surface or paper, 1px border, 24px padding, square, no radius and no blur.
  • Annotation mark: an 8px accent square with a mono label, pinned to a point on a drawing.
  • Drawing: stippled monochrome linework, no frame, no fill behind it.
  • Nav: hairline underneath, items in cells divided by 1px rules, active item in accent.
  • Focus ring: 2px accent at 2px offset.

Do / Don’t

  • Do keep every corner square. Circles are for markers and nothing else.
  • Do divide the page with hairlines into cells, and let the cells be uneven.
  • Do set headings uppercase and tight, and leave body copy in sentence case.
  • Do use orange as annotation: a mark, a rule, a link, one filled control.
  • Do put ticks and register marks on the edge of a full bleed section.
  • Don’t use a blurred shadow. The offsets here are hard and inked.
  • Don’t fill a large area with orange. It stops being an annotation and becomes a brand band.
  • Don’t set body copy in the mono. It is for labels, dimensions and keys.
  • Don’t add a second accent hue, or a gradient of any kind.
  • Don’t round a button, a cell or an image. The sheet has no rounded corners on it.

When to use

Tools for people who model, draw or measure: architecture and engineering software, hardware, data tooling, technical documentation. A poor fit for consumer lifestyle brands and anything sold on warmth, where square corners and a title block read as cold.