Drawing a glyph

What a drawing has to hold to look like it belongs to the set. These are the rules a review checks against, in the order somebody drawing their first glyph meets them.

Construction

Four values, and every one of them is checkable. A drawing that holds all four is already most of the way to looking like the set, because what makes a set a set is that nobody had to judge any of this.

canvas

type: 16 × 16
default: no other size

Every glyph sits on the same square, whatever size it renders at. A drawing made on a larger canvas and scaled down lands between pixels, and the whole set leaves its one baseline.

protective space

type: 1 unit

The ring of the canvas nothing can enter. It is what keeps a glyph the same optical size as its neighbours when one is a circle and the next is a square.

stroke

type: 1 unit
default: even numbers only

An odd stroke on a whole-pixel grid renders as two grey lines instead of one black one. This is the rule that costs the most to break, because it looks correct at every size except the one people use.

fill required

type: currentColor

Never a literal. A glyph takes the colour of the text it stands in — that is the whole reason the drawing is in the document rather than linked from it, and a hardcoded fill is a glyph that goes invisible in the other mode.

Colour

A glyph has one colour and inherits it. The palette below is what the page around it resolves — every entry carries the name a design writes and the value the mode resolved it to, because a chip on its own is nothing a reader can type into their own drawing.

--accent #FF8700

--surface-canvas light-dark(#FBFAF7, #131210)

--surface-raised light-dark(#FFFFFF, #171614)

--text-primary light-dark(#1C1A17, #EDE9E2)

--text-muted light-dark(#726C63, #878076)

--border-subtle light-dark(#E3DFD6, #2B2823)

Never a literal

A hex typed into a drawing is a glyph that survives one mode. The value above is the pair, and the drawing takes whichever half the reader is in — which is what currentColor is for.

Both grounds

The same drawings on either ground, and each pane forces its mode on itself rather than paints one. A glyph that goes flat in dark was drawn against a single background, and this is where that shows before a reader finds it.

light

The page's own ground

dark

The page's own ground

The source

What a finished drawing looks like. The viewBox is the canvas, the fill comes from the page, and there is nothing else in the file — no width, no height, no metadata an editor left behind.

html

<svg viewBox="0 0 16 16">
  <path d="…" fill="currentColor"/>
</svg>