Vellum · component specimen · vol. I
A compact, opinionated component set — four primitives tuned for warmth, restraint and typographic care. Every state considered, every token swappable, nothing you wouldn’t ship.
Three weights of intent — commit, consider, dismiss. Hover lifts by a single pixel; pressing settles the button into the page. Focus is never left to guesswork.
primary commits · secondary considers · ghost dismisses — icon buttons always carry an aria-label
the specimens above are frozen with .is-hover / .is-focus / .is-active — try tabbing through the live ones instead
“submit request” runs a real 1.9 s loading cycle, then confirms by toast
Hairline border at rest, elevation on arrival. The image breathes, the arrow turns to face outward, and focus-within rings the whole doorway — keyboard users get the same invitation as pointers.
Rebound in waxed sage canvas with a sewn spine that lies perfectly flat. 192 pages of heavyweight cream stock, ruled faintly enough to disappear under pencil.
Machines are faster. But a deckled edge tells you someone stopped, looked, and decided it wasn’t finished yet.
The label lives inside the field until it’s needed, then steps aside in small capitals. Validation speaks in brick red, success in pine — and the label is always a real <label>, never a placeholder.
Tell us what you’d like bound, printed or stitched.
That address doesn’t look right.
Toasts arrive from the lower right with a coloured spine and a draining progress hairline. Hover one to hold it open; it folds away without disturbing its neighbours.
Everything below is the same markup you’ve already seen. Only ten custom properties changed — the components never knew a thing.
