Design system
One design system across everything a user touches — web app, desktop app, marketing site, blog, docs, and email.
The problem
Most products look right in the main app and come apart at the edges. The password-reset email, the desktop build, the blog, and the docs each get built with a different tool, by a different person, at a different time. Six months later they look like four products.
What Bones does
Bones puts one design system on every surface a user touches, from the same source.
| Surface | How it gets the design system |
|---|---|
web-app, the auth-gated app | shared-ui tokens and components |
desktop | The same shared-ui tokens and components, inside Tauri |
web-static, the marketing site | shared-ui tokens and components |
blog and these docs | shared-ui tokens and components |
email-templates/tokens.ts, generated from the same tokens, in the light scheme only |
Every value comes from one file, shared-ui/src/tokens.css. If a value isn't there, it doesn't exist yet. shared-ui holds 36 components, with Storybook stories and play tests.
The rules are short and hard:
- Grayscale, plus one color — red, and only for errors.
- Two fonts. Instrument Sans for what people wrote, JetBrains Mono for what machines produced.
- Borders, not shadows. Three shadows exist, and each one is a token.
Bones has no mobile app yet.
How it compares
| Option | Trade-off |
|---|---|
| shadcn/ui | The popular default, but copied into your repo and styled toward its own look |
| Radix or other headless primitives | Unstyled, so you still need the rules |
| A full kit (Material, Chakra) | Complete, but instantly recognizable as that kit |
Each of these covers the web app. None of them reaches your emails or your docs. Bones uses Mantine for behavior and overrides its look with tokens, then carries the same tokens everywhere else.
Go deeper
- Principles and Layout