quinepubDesign system · v1

A design system for field guides

Warm paper, ink, one vermilion accent, and a serif you can read for an hour. These are the tokens and components behind every quinepub page. Change them in styles/tokens.css, and the guide and every live figure follow.

2 editions3 typefaces1 accent7 purpose colors

01Principles

Show, then tell.Every term starts with a figure. The text explains what the figure already shows.
One idea per figure.A figure answers exactly one question, with labels of three words or fewer.
Type does the hierarchy.Size, weight, italics and small caps, not boxes, shadows and fills.
Color means something.Ink and paper carry the page. The accent is for links and emphasis, and purpose colors say who an entry is for.
Quiet chrome, loud content.Controls are small, sans-serif and gray until touched.
Written like a person.Plain definitions, and every entry ends with a sentence you could say out loud.

02In the spirit of

The explainers we hold ourselves to, and the one thing we borrowed from each.

Long-form interactive
Bartosz Ciechanowski

One calm column broken by live, draggable figures. Words in the prose share colors with the things they name.

Shaders, step by step
The Book of Shaders

A running shader beside every idea, building up from step and smoothstep to whole effects.

Stylized rendering
Maxime Heckel

Halftone, dithering, painterly and caustics, each explained with before/after playgrounds.

Diagrams you can poke
Red Blob Games

Each figure is built to answer one question, and the prose points straight at it.

Journal rigor
Distill

Numbered figures, careful captions and a serif body: the web set like a journal.

Visual essays
The Pudding

Strong art direction and a voice. The typography sets the mood before you read a word.

Playful intuition
Sam Rose

Interactive essays paced like a good teacher: one small step, then let the reader try.

The tradition
Explorable explanations

After Bret Victor: readers learn by manipulating, not by being told.

03Color

Neutrals carry everything. Toggle the night edition (top right) to see both sets.

Paper & ink

Purpose: who an entry is for

Figure palette: data inside diagrams only

04Typography

Newsreader for reading and display, Inter for interface, JetBrains Mono for figures and code. The scale is a major third (×1.25).

--t-hero · serif

Field guide

--t-3xl · chapter

Light, shading & materials

--t-xl · entry title

Toon / cel shading banded lighting

--t-lg · lede

Lighting snapped into a few flat bands with a hard highlight, like anime and cartoons.

--t-md · body

A ramp texture decides how many bands there are and where they fall. Bold terms like Fresnel link to their own entry.

--t-2xs · overline

Fig. 47

mono · labels

gl_FragColor = vec4(color, 1.0);

05Space

A 4px base. Chapters breathe at 96px, entries at 64 by 32.

06Components

Controls

/space

Tabs

Chapter opener

Shader FX & style

You’re designing an effect or naming a visual style.

“Give it a cel-shaded look with ink outlines.”

Entry

Fig. 9

Winding order

The order of a triangle’s vertices decides which side is the front.

“The winding is reversed, so the model looks inside-out.”

Fig. 133

Synthwave retrowave · outrun

80s retro-futurism: a magenta sunset, a striped sun and an endless neon grid.

Recipe: gradient map + bloom + scanlines

“Make the menu background full synthwave.”

Anatomy

① figure plate (paper-2, 3:2)
② Fig. n + purpose overlines
③ title + italic alias
④ definition (serif, ink-2)
⑤ optional recipe (hairlines)
⑥ “In use” quote (accent rule)

Phrasebook row

You see…	Call it	Usual fix
Flickering stripes where two surfaces overlap	Z-fighting	Separate the surfaces or use polygonOffset