Profit margin
Healthy %
Motion
Grain & surfaces
The texture that makes colour feel printed rather than digital, and the few surfaces it belongs on.
Film grain
An SVG noise overlay blended over colour. It belongs on saturated gradient surfaces — the vitals cards, hero panels — never on text-heavy cards or tables.
Gradient with grain.grain · --grain: 0.32
The default is 0.32. Below 0.2 it disappears on most screens; above 0.45 it reads as dirt.
Add
class="grain" to any surface; it keeps its own corners.In use
The vitals card: gradient, grain, thin white drawing and the breathing dot together.
Cash runway
days
Hatch
Fine diagonal lines mark “the rest”, “not yet” or the unfilled part of a bar — a texture instead of a second colour.
Spent · rest of budget
.hatch on any surface
Glass
Menus, popovers and tooltips are frosted (the theme’s --pop colour, almost opaque, with a 14px backdrop blur) so the page shows faintly through and they feel above it.
Frosted panebackground: var(--pop) · backdrop-filter: blur(14px)