01
Build small enough to hold.
If one person can’t hold the system in their head, the system is too big. We design for legibility before scale.
SDF Values
Principles section with intro copy above a ruled two-up grid of numbered value cards.
Principles
Four ideas we keep coming back to.
02
Document the why.
Every non-obvious decision gets a paragraph. Future-you and your team will thank present-you.
03
Ship narrower, more often.
A small thing in production beats a big thing in planning. Cut scope, learn, iterate, repeat.
04
Show the seams.
Honest interfaces beat magical ones. We expose the mechanics so people can reason about what they’re using.
The full source is for members
Sign in and choose a plan to view and copy BaselumenValues.tsx. The live preview above is free to explore.
How to use. Copy BaselumenValues.tsx into your project (it's self-contained — the styles ship with it and dedupe across instances in React 19). Theme it by setting --sdf-* tokens on any ancestor. No dependencies, no build step.
