Foundations
A monochrome workshop. Neutral surfaces, hairline rules, tight geometric type.
Everything on this site — components, blocks, and charts — is built on shadcn/ui and Base UI or adopted from libraries like Bklit UI, and themed through one set of CSS variables. The foundations are those variables and the rules for using them.
Colors
Neutral surfaces with color reserved for status.
Typography
DM Sans for display, SF Pro for everything else.
Spacing
A 4px grid and the Tailwind scale.
Radius
One base radius, derived steps.
Elevation
Depth from surfaces and borders, not shadows.
Motion
Short, quiet transitions.
Principles
- Tokens, not values. Use semantic tokens (
bg-card,text-muted-foreground,border-border) so both themes work without overrides. - Color means something. The palette is neutral. Color is reserved for status — success, warning, error, information — and for data.
- Hairlines over shadows. Separate layers with 1px borders and a step in surface color. Shadows are for things that float: menus, popovers, dialogs.
- Compose, don't fork. Build from the components in
components/ui. If something is missing, compose it from what exists before writing a new primitive. - Light and dark are equals. Both follow the system preference and get the same care.