a design system for marius busen: essays, poems and small things made with care. paper and ink, lots of room, and a few small delights in the margins.
paper and ink carry 95% of every page, and the one cobalt accent marks what matters. the earth hues are for charts and illustration. swatches follow the theme toggle. click one to copy its token.
components only ever use these. they switch for dark mode.
chart colours are checked with a colour-vision-deficiency validator in both modes. data-1…3 (lake, terracotta, pine) stay distinct in any combination, so scatter plots are safe. pos / neg (ochre, dusk) form a diverging pair with a neutral middle.
text contrast on bg, light: text 15.2:1 · text-2 7.1:1 · text-3 5.1:1 · accent-text 5.1:1. dark: text 16.1:1 · text-2 10.1:1 · text-3 6.3:1 · accent-text 8.8:1. text-3 and accent-text also clear 4.5:1 on surface-sunk. ink-500 is for rules and axes only; it fails as text.
Bricolage Grotesque for headlines, semibold and tracked tight. Instrument Serif for the italics inside them, pull quotes and the sign-off. Source Serif 4 for reading. Instrument Sans for interface. IBM Plex Mono for dates, numbers and labels. all open-licensed and self-hosted.
at the margin
what's your utility function?
hanni works because working makes her happy. nanni works because not working makes her unhappy.
the first slice when you're starving is wonderful. the second is still pretty good. the third is enjoyable. by the sixth, you're probably starting to question your decisions. the marginal utility of another slice decreases as you consume more.
interface text, buttons, forms and captions use instrument sans. it stays quiet so the serif can speak.
figure 2 — marginal utility of one more achievement (schematic)
perhaps life isn't an optimization problem.
a 4px base and generous steps. round corners are soft but not bubbly. motion eases out and settles; one spring curve for playful moments, in pure css.
hand-drawn marks, drawn when they scroll into view. use one per screen, at most. the characters come from the utility-function essay: hanni chases, nanni escapes.
a word worth underlining
one circled idea
a highlighted phrase
everything starts with m-. states start with is-. no framework needed.
why the fourth promotion makes you less happy than the first.
a card on a stack, for one-at-a-time flows.
something can have been the right decision in the past and no longer be the right decision today.what's your utility function? · §6
hanni works because working makes her happy. nanni works because not working makes her unhappy.
essays get a 34em measure, old-style numerals and notes in the margin. poems get more air, hanging lines and stanza breaks.
economics has another concept that more people should internalize: opportunity cost.the value of the best alternative you give up by making a decision. when you choose one thing, you're simultaneously choosing not to do something else.
MRSL,M = βM / αL
ten additional hours a week. 520 hours a year. over five years, 2,600 hours.
“hope” is the thing with feathers
“Hope” is the thing with feathers –That perches in the soul –And sings the tune without the words –And never stops – at all –
five pages to start the personal site. copy one, replace the [TK] parts.
four stylesheets and one script. or a single bundled file for one-off projects: run python3 build.py.