L · 12 / 26

L — Line art

One weight of line, nothing filled.

The style

An edge, and nothing inside it.

Line art is the oldest way to make a picture: a line where a thing ends. Print taught it to carry tone as well. The engravers of the old floras shaded with hatching, laying lines closer where a leaf turned away from the light.

In 1949 Picasso drew in the air with a light for Gjon Mili’s camera. Hergé’s even contour in Tintin was later named ligne claire, the clear line, by Joost Swarte in 1977.

On screens it came back as outline icons. iOS 7 traded glossy pictures for thin lines in 2013, and most icon sets are still drawn on a 24-unit keyline grid. The rules have barely changed: one weight of line, closed shapes, and tone from lines laid side by side.

In use

A field guide, drawn by hand.

Hedgerow, a field guide on the desktop. Search eight plants by name, Latin or family, narrow them by habitat and season, open a plate and mark what you have seen. Every edge in it is one line.

  • 1Drawn, not shadedEvery plate, card and control is a 1.5px line on paper. Tone, where it is needed, is hatching.
  • 2The line is the hierarchyThe open plant is double-drawn; the others are single. A dashed line means not yet, or not now.
  • 3Colour only means somethingSap green is seen and on. Rosehip red is a warning. Everything else is ink.

8 plants

Plate 4

Foxglove

Digitalis purpurea
Family
Plantaginaceae
Habitat
Woodland
Height
1–2 m
Flowers
  1. January
  2. February
  3. March
  4. April
  5. May
  6. June, flowers
  7. July, flowers
  8. August, flowers
  9. September, flowers
  10. October
  11. November
  12. December

A spire of bells, opening from the bottom up. Bees climb right inside them.

Every part is poisonous.

The kit

Every part, every state.

The parts that guide is built from, numbered like figures on a plate. Rows of states hold still for comparison; everything else works.

Fig. 1Button

Depth is a second line, offset 4px; it lifts to 6 and closes when pressed

Fig. 2Text field

The common name will do
Focus ring: a dashed pencil line, 4px out

Fig. 3Select

3 plants in the guide grow there.

Fig. 4Switch, checkbox, radio

Show Latin names
Plates
On is sap and hatched, never filled

Fig. 5Slider

5px
Closer lines read darker: tone without a fill

Fig. 6Progress

Spring list5 of 12
42%

Fig. 7Segments and tabs

Leaf: Bells open from the bottom of the spire up. Seen at the wood edge, 14 June.

Selected tab: a double rule under it

Fig. 8List rows

Icons at 16, 20, 24Stroke stays 1.5px

Fig. 9Card and loading

Lady fernAthyrium filix-femina
Loading is drawn in dashes that march, not grey blocks

Fig. 10Toast

Fig. 11Modal

The veil is hatching, not a dark scrim

Fig. 12Steps

  1. Done: Find
  2. 2Draw
  3. 3Name
  4. 4Keep
Done is sap, now is a double ring, later is dashed

Fig. 13Badges and avatars

NativeIn flowerPoisonousNot yet seen
Rosa, Jun and AdaWalked the lane together
Radius and spacing
2px3px4pxpill48121624
Signature

Never lift the pen.

Draw on the sheet, lift, and draw again. Every stroke joins the one before, so the drawing stays a single path; it is thinned, smoothed through the points that remain, and replayed at the speed of your hand.

Strokes
1
Paths
1
Points drawn
105
Points kept
64
60%0 keeps every wobble. Higher drops close points and pulls the curve through the rest.

The icon set

Drawn to a grid of 24.

Each icon sits on 24 units with 2 of padding, and is drawn to one of four keyline shapes so circles and squares look the same size. Turn the keylines off to see the icon alone.

flowerDrawn to the portrait, 16 × 20 keylineKeylines
The set, 14 of 21
Every size, one weight
  • 16
  • 20
  • 24
  • 32
  • 48

The path is drawn on 24 units and scaled, but the stroke is not:vector-effect: non-scaling-strokeholds it at 1.5px from 16 to 380. A line set reads as one family only if every line is the same weight.

  • Circle, 20
  • Square, 18
  • Portrait, 16 × 20
  • Landscape, 20 × 16
Tokens

The system, in numbers.

Nine colours with their contrast, three weights of line, four densities of hatching, two typefaces, the spacing and the motion. Copy them as custom properties.

Colour
  • --paper #faf7f0The page
  • --sheet #fffdf8Inside a drawn edge
  • --ink #1d1d1bEvery line and all type, 15.8:1
  • --ink-2 #55534dSecond ink, 7.2:1
  • --ink-3 #6e6a61Disabled and placeholders, 5.0:1
  • --rule #cfc9bbGuides, keylines, hover hatching
  • --sap #2f6b4fOn, seen, done, 5.9:1
  • --hip #b03a26Errors and warnings, 5.6:1
  • --pollen #b8862bIn drawings only, never type
Line
  • Line 1.5pxEvery edge, icon and plate
  • Fine 1pxHatching, guides, leader lines
  • Letter 2.5pxDisplay drawings only
Hatching
  • Light
  • Mid
  • Dark
  • Cross
Type
  • Digitalis purpureaInstrument Serif · headings
  • Digitalis purpureaInstrument Serif italic · Latin names, labels
  • Digitalis purpureaInstrument Sans 400 · text
  • Digitalis purpureaInstrument Sans 500 · buttons
Spacing
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 64
Motion
  • Draw1.4s, 180ms apartPlates draw in, path by path
  • Lift250msThe second line of a button
  • Replaythe speed of the handThe one-line pad
:root {
  /* Paper and ink */
  --paper: #faf7f0;
  --sheet: #fffdf8;
  --ink: #1d1d1b;
  --ink-2: #55534d;
  --ink-3: #6e6a61;
  --rule: #cfc9bb;

  /* Colour that means something */
  --sap: #2f6b4f;
  --hip: #b03a26;

  /* One weight of line */
  --line: 1.5px;
  --line-fine: 1px;
  --edge: var(--line) solid var(--ink);
  --radius: 4px;

  /* Tone from lines */
  --hatch: repeating-linear-gradient(
    -45deg,
    currentColor 0 var(--line-fine),
    transparent var(--line-fine) 5px
  );

  /* Depth: a second line, offset */
  --lift: 4px 4px 0 calc(var(--line) * -1) var(--paper),
    4px 4px 0 0 var(--ink);

  /* Type */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-text: 'Instrument Sans', system-ui, sans-serif;
}

/* Icons and drawings keep the weight at any size */
svg.line :is(path, circle, rect) {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--line);
  vector-effect: non-scaling-stroke;
}

.button {
  border: var(--edge);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--lift);
}
.button:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}
:focus-visible {
  outline: var(--line) dashed currentColor;
  outline-offset: 4px;
}

Do

  • Pick one weight of line and keep it at every size. Icons, borders and drawings all share it.
  • Get tone from hatching, never from a fill. Closer lines read darker.
  • Show depth with a second line, offset, never with a blurred shadow.
  • Keep colour for meaning. When everything is a line, one coloured line is loud.

Don’t

  • Don’t mix weights

    At 1, 2 and 3.5px the icons stop being a set. The eye reads three families, then none.

  • Don’t scale the stroke

    Scale a 24px icon to 96 and its 1.5px stroke becomes 6. Use non-scaling-stroke, or redraw it.

  • Don’t fill to fix contrast

    A solid block in a line system is the loudest thing on the page. Draw the edge darker, or hatch.

In the wild

Where the style shows up outside this page.

  1. Drawings for The New Yorker

    Saul Steinberg · from 1941A single pen line carrying a whole joke, often without lifting.

  2. Picasso drawing with light

    Gjon Mili · 1949Long exposures of one-line drawings made in the air.

  3. Plant drawings

    Ellsworth Kelly · from 1949Leaves and stems in contour only, one even weight, no shading.

  4. Feather icons

    Cole Bemis · 2017Every icon on a 24-pixel grid at one 2-pixel stroke with round ends.