The design system, published

Velta's colors, type sizes, and spacing were written down once, in a file inside the app source, and stayed there. That file — design/velta-design-system.html from the main repository — is now served as a page: velta.cc/design.

What is in it

It is a reference, not a style guide essay. Every value is the exact one the app uses, taken from the stylesheet at release 1.4.76:

• Color tokens for the three themes — dark (the primary), light, and the brutal variant — with contrast notes.
• The type ladder, from 8.5 px captions to 32 px headlines, and which role gets which size.
• The 2 px spacing grid, the radius ladder, and the structural metrics like the 56 px header.
• The principles the tokens encode: no pure black or white, WCAG contrast targets, dark theme as the default others inherit from.
• A rhythm audit — the log of spacing exceptions, each marked as either a fix or a deliberate optical choice.

Who it is for

Contributors and forks, mostly. If you build a screen for Velta, the tokens are the shortest path to a screen that does not look like a guest. If you wonder why a button is 46 px tall or why nothing is pure black, the page answers before the issue does.

The page itself is static and dark-themed, with no scripts and no third parties — same rules as the rest of this site. Its source lives in the app repository as design/velta-design-system.html; the copy here is refreshed from it when the tokens change.