Style guide

Dojo

The game at the door, stillness inside. The landing page is a crack intro of the eighties in the night of the reader’s palette; inside, the writing is set in Charter on the reader’s own paper, the machine speaks in mono, and the judge signs every page.

Principles

Five rules

The game at the door, stillness inside. The landing page and its ending, the contact page, are a game: motion, sound and the night. Inside, nothing moves unless it means something, and nothing is needed to read the page but the words.
Breath is structure. Sections are separated by space, not boxes: four steps of breath, from 2rem to 12rem.
One judge. The judge, Mikko’s avatar in pixels, is the only mark: beside the name in every top line, where a piece of writing ends, as the icon, and stitched where a sampler is signed. Pressed full size once, on About.
Three voices. Charter for what is written. IBM Plex Mono for what the site says about it: labels, dates, counts and controls. The game’s face of eight by eight for the game, and for one letter of a long read.
Ink before colour. The accent is kept for the judge, the drop cap, link underlines and state. Pictures are stitched in the palette’s own threads; only a screenshot keeps its colours.

Colour

Ink, paper, one accent

Declared once in src/design/palettes.json, each with its day and night value. These are the house palette’s; the swatches show whichever palette the reader has chosen, as the page does. The page follows the reader’s setting.

--paper
#f4f0e8 · #14120f

--paper-2
#ece6da · #1c1915

--ink
#1d1a16 · #ece6da

--ink-text
#1d1a16 · #ddd6c9

--ink-2
#5f574d · #a99f91

--ink-3
#8b8276 · #756d62

--line
#d9d0c1 · #2e2a24

--accent
#ae269d · #d34dc0

--accent-ink
#9c068c · #f26adc

--seal
#ae269d · #a71d97

--seal-paper
#f6efe2

--selection
#f5d4ee · #482441

--code-string
#33681d · #7db469

--code-number
#894e03 · #de9754

--code-function
#295ba4 · #72a7f7

--code-type
#056768 · #46b6b7

Type

Charter and IBM Plex Mono

A perfect fourth (1.333) on a fluid base of 17–19px. Charis SIL, the open cut of Matthew Carter’s Charter, drawn in 1987 for the first laser printers, sets the reading and the titles; IBM Plex Mono is the machine’s voice: the top line, labels, dates and counts. The game’s own face of eight by eight draws the drop cap. Self-hosted: four cuts of Charis and two of Plex Mono.

Display

Mikko Kotila

Heading

Machine intelligence

Italic

Rather be a poor volunteer than a rich slave.

Text

Charter carries the reading, the links and the captions: sturdy by day and by night, made for long reads on a screen.

Label

Uppercase · IBM Plex Mono · tracked 0.08em · step −2

Pixels

The game’s face, eight by eight, capitals only, as the home computers of 1982 had it: the game’s words, the landing page’s buttons, the address at the end of the contact page, and the drop cap of a long read.

Signature

The judge and the palettes

Palettes

A reader may choose the house palette or one traced from a painting, in Appearance. Each keeps the house palette’s contrast in every role, by day and by night; the hues are the painting’s.

Magenta
The house colour

The Great Wave
The Great Wave off Kanagawa, Katsushika Hokusai, c. 1831

The Starry Night
The Starry Night, Vincent van Gogh, 1889

The Scream
The Scream, Edvard Munch, 1893

Water Lilies
Water Lilies, Claude Monet, 1906

The Kiss
The Kiss, Gustav Klimt, 1907–1908

The mark

The judge of the landing page’s game, Mikko’s avatar in pixels, cut into a square of the seal’s ink: its dark in the ink, the rest in the seal’s paper, ringed by a pixel of paper. Pressed by hand, a little turned and worn, where it signs the About page; square and clean beside the name in every top line, where a piece of writing ends, and as the site’s icon, a pixel of it to each pixel of the screen; stitched small where a sampler is signed. It takes the colours of the palette.

Writing