Brand · draft

Wherefore

The brand, said once. Every page, card and slide takes its colours, type and shapes from one file, and this page is built from it too.

The look follows the name. Wherefore asks why, so the display face is a literary serif. It compiles, so the page is a terminal's black and anything a person could type is set in monospace. And one bright accent marks the point of a line, the way a passing build does.

tokens.json brand.css

Colour

ground #0B0C0E
the page
a terminal's black, faintly cool: the product lives in a shell
surface #111317
cards and panels, and what sits on them
one step up from the ground, so a card reads as an object without a shadow; what sits on a card is told apart by its border, not a third shade
line #2A2D33
borders and rules
visible on the ground and on a card, never louder than text
ink #EDEBE6
text
a warm off-white: paper, on a terminal
muted #A3A6AD
secondary text: captions, labels and fine print
for what supports a line, not what makes it; one grey, because a second one nobody could tell apart
accent #C3FF0F
the one thing to look at: actions, and the point of a line
a passing build's green, pushed to highlighter strength. Used sparingly, it means 'this'
on-accent same as ground
text on the accent
the ground's own black, so the accent reads as a highlight on the page. A role, not a new colour: said as the ground, so it moves if the ground does
caution #F4D35E
drafts, and what is still being built
a warning that is not an error: nothing is wrong, it is just not finished
fail #FF8A6B
a failed check
warm and plainly not the accent, so a failure never reads as a pass

Every text colour, on every ground it is set on

Text	On	Sample	Contrast	At least
`ink`	`ground`	Aa Wherefore	16.4:1	4.5:1
`ink`	`surface`	Aa Wherefore	15.6:1	4.5:1
`muted`	`ground`	Aa Wherefore	8.0:1	4.5:1
`muted`	`surface`	Aa Wherefore	7.6:1	4.5:1
`accent`	`ground`	Aa Wherefore	16.4:1	4.5:1
`accent`	`surface`	Aa Wherefore	15.6:1	4.5:1
`on-accent`	`accent`	Aa Wherefore	16.4:1	4.5:1
`on-accent`	`caution`	Aa Wherefore	13.3:1	4.5:1
`on-accent`	`fail`	Aa Wherefore	8.5:1	4.5:1
`caution`	`ground`	Aa Wherefore	13.3:1	4.5:1
`caution`	`surface`	Aa Wherefore	12.7:1	4.5:1
`fail`	`ground`	Aa Wherefore	8.5:1	4.5:1
`fail`	`surface`	Aa Wherefore	8.1:1	4.5:1

Type

display · Instrument Serif · 400, 400 italic

Your company, compiled.

headlines and the wordmark

the literary half of the name: 'wherefore art thou'. Set large, where its contrast has room

body · Inter · 400, 500, 600

Your code has one source of truth, and a pipeline that tests every change before it ships. Everything else your company says is a copy of a copy, and every copy drifts.

everything that is read rather than looked at

built for screens at small sizes, and quiet enough to let the serif and the mono speak

mono · JetBrains Mono · 400, 500

$ wherefore gate [--keep]

commands, file names, labels

the compiler half of the name: anything a person could type is set in it

Shape

card 16px
cards, panels, tiles and the boxes on them
soft enough to read as an object, square enough to stay a document
control 999px
buttons, tabs, chips and badges
every action is a pill, so anything round can be pressed

Wordmark

Wherefore

the company's name, set in the display face's italic and never redrawn: until there is a drawn mark, the type is the mark

Icon

the picture beside the name wherever the company has an account: GitHub, and every social profile

the wordmark's first letter, set the way the page sets “compiled.”: the display italic, in the accent, on the terminal's black. One letter still reads at the size of a tab, and every platform crops to a circle, so it sits in the middle with room all round

icon.svg icon-1024.png

Fonts and licences

Family	Role	From	Licence
Instrument Serif	display	`@fontsource/instrument-serif 5.3.0`	SIL Open Font License 1.1
Inter	body	`@fontsource/inter 5.3.0`	SIL Open Font License 1.1
JetBrains Mono	mono	`@fontsource/jetbrains-mono 5.3.0`	SIL Open Font License 1.1