design
Invariant
This site runs on Invariant, a small design language I keep for my own work.
An invariant is something that stays true no matter what happens to the system. These are the four that hold here, and they are the same ones I build software by.
rules
- 01
labels before values
Every value carries its key, so you always know what you are reading.
- 02
motion commits once
Things settle into place and stay there. Only live things loop.
- 03
color means state
Ink is for reading. Blue means you can act. Green means it is live.
readactlive
- 04
calm over clever
Quiet surfaces, generous space, and nothing competing for your attention.
type
- Sora
- Names, titles and principles.
- Rethink Sans
- Everything you read in sentences.
- Geist Mono
- Keys, metadata, anything a machine would also say.
Built with Next.js and Tailwind CSS.