Principles
Black and white, borders not shadows, mono for machine values, gaps not margins.
Every screen in Bones — the app, the marketing site, the blog, and these docs — follows the same rules. The values live in shared-ui/src/tokens.css; bones-style-guide.html renders all of them.
Color
The palette is grayscale, plus one exception: --bones-danger, used only for error text and error borders. There is no success, warning, or accent color. Status is a filled dot.
Type
Two families, split by who wrote the text.
- Instrument Sans for anything a person wrote — headings, body, labels.
- JetBrains Mono for anything a machine produced — paths, hashes, timestamps, counts, IDs, status words, and eyebrows.
Negative tracking scales with size: -0.045em for display, -0.04em for h2, -0.025em for subheads, -0.02em for card titles, and 0 at body size.
Borders, not shadows
Cards, inputs and rows are separated by 1px rules. A rule that opens a section is ink; every other rule is --bones-border. The only shadows are three tokens: the hero preview frame, the prompt bar, and the focus ring.
Focus
Focus is always visible: an ink border plus a 3px ring at 7% opacity. Never remove an outline without replacing it.
Related
- Layout — spacing, radii, and breakpoints.
- Why a design system — the problem it solves.
- React and Mantine — the component layer underneath.