Theming
Every effect is a CSS custom property. Set the grid, the paper and the fonts here and the whole site follows; copy the result into your own stylesheet. Inks and colours have their own page.
Notes from the week
A paragraph in the current ribbon, with a link in pen and a highlighted phrase.
A line written in fountain pen.
A note in coloured pencil, graphite, ballpoint and brush pen.
The code for what is on screen
:root {
--pt-grid: 24px;
--pt-dot-size: 0.8px;
--pt-dot: rgba(88, 86, 80, 0.26);
--pt-grain: 0.1;
--pt-wobble: 1;
--pt-font-type: "Courier Prime", monospace;
--pt-font-hand: "Caveat", cursive;
}Pens, pencils, ribbons and highlighters: see Inks and colours.
Parameters
| Setting | Default | Values |
|---|---|---|
--pt-grid | 24px | Dot pitch and line height. Text snaps to it. |
--pt-sheet-width | 720px | Widest the sheet gets, rounded down to whole cells. |
--pt-paper, --pt-desk | #fefefe, #cdcbc5 | Paper and desk colours. |
--pt-dot, --pt-dot-size | warm grey, .8px | Printed dots. |
--pt-line | pale blue | Ruling on grid, graph and lined paper. |
--pt-grain | .1 | Paper grain, 0 to 1. |
--pt-pen, --pt-pencil, --pt-ribbon | indigo, red pencil, black | Current tools. |
--pt-hl | yellow | Highlighter colour. |
--pt-wobble | 1 | Letter wobble, 0 to 2. |
--pt-tilt | 1 | Multiplies every --pt-rot, 0 to 2. |
--pt-draw, --pt-ease | .75s | Drawing-on timing. |
--pt-font-type, -hand, -type-head, -jp | Courier Prime, Caveat… | Fonts. |
--pt-s-body, -small, -h1, -h2 | 20, 16, 36, 26px | Type sizes. |