Style guide
The system this site is built with, read from its own tokens.
Type
- faceIBM Plex Mono, one weight, cut down to the 117 characters the site uses (5.1 kB)
- textclamp(1rem, .875rem + .18vw, 1.125rem) on a 1.75em line
- smallmax(11px, .72em), for dates, labels and the two lines above the opening
Colour
Colour on a word means its part of speech, the way Escriba colours its editor. Prepositions, determiners and the rest stay ink.
- groundlight #f6f7f7, dark #161717
- inktext light #191919 16.4:1, dark #e4e4e2 14.1:1
- warm inkquiet text light #75604c 5.5:1, dark #bba78f 7.7:1
- nounprojects light #2d63b8 5.5:1, dark #7aa7f0 7.4:1
- verbwrite light #b21f1f 6.3:1, dark #ef7f78 6.8:1
- adjectivecomplex light #9c5410 5.3:1, dark #e3a157 8.1:1
- adverbsometimes light #7d3fae 6.1:1, dark #c79ce9 8.0:1
- pronounI’m light #4a46c0 6.7:1, dark #a2a0f5 7.6:1
- conjunctionand light #0e706b 5.5:1, dark #5bc4bb 8.6:1
Highlight and cursor
A word that does something on hover sits on Escriba’s highlight. The cursor after “What’s next?” is Escriba’s caret.
- highlightEscriba light rgba(250,209,74,.45), dark rgba(250,199,64,.18); nouns on it 4.7:1 light, 4.9:1 dark
- hoverlight rgba(250,209,74,.48), dark rgba(250,199,64,.2)
- cursor light #b21f1f, dark #d9785b
Layout
- columnone column, at most 72 characters wide
- left edgeclamp(1.25rem, (100vw - 72ch) * .62, 28.4vw), so the column sits a little left of centre
- phoneunder 40rem the edge is 1.25rem and the page starts at the top
The switch
A sun and a moon, drawn with the desk’s pen, top right on every page. The page follows the system until a reader picks one, and keeps that pick for the next visit.