VERSEVA Design · Web app UI

The ladders

Role	Job	Floor
--bg / --surface / --surface-2	Canvas and card grounds	ground
--text-1 / -2 / -3	Primary, secondary, hints	4.5 / 4.5 / 3
--accent	One per view, matte	label 4.5
--success / --warn / --danger	Status on tints, never alone	4.5 on tint
--hairline*	Decoration only, never a boundary	none

Token	Face	Job
--font-display	Archivo 650	Short statements, tight tracking, accent full stop
--font-sans	Manrope 400-700	Everything a human reads; body 13-14px, meta 11-12.5px
--font-mono	JetBrains Mono	Machines: IDs, codes, microlabels to 10px

buttons · equal-sized pairs, fill decides

status · word-carrying chips

Deployed 2 pending 1 failing Draft

card + stat

Provenance complete. Ready for review.

4.4ms

p95 after the sweep

segmented + field

Client name

As it appears on the quote.

Every component ships all contract states. Hover, focus-visible ring (2px), active press, disabled, loading, empty, error. The happy path alone is unfinished.
Touch targets 44px. Compact controls earn their size with surrounding clear space.
Never color-alone. Status pairs color with a word, count, or shape.
Skeletons mirror the real layout. Loading is a state of the real component, not a spinner page.

Copy, never approximate. The navshell ports verbatim from components.css; registers substitute values only.
Two tiers separate by shade, never a hairline. Light: bright pill leads on recessed frame. Dark: inverted.
Active tab: bloom + label. The radial bloom is a named accent device; the label opens inside it.

DoOne matte accent per view, spent on the primary action.

Don'tA second accent, a colored glow, or an accent that is everywhere.

DoPrimary and secondary equal-sized; the fill says which leads.

Don'tA bigger button for the primary action.

DoRhythm from the spacing scale, at class level.

Don'tInline margins per screen. The spacing gate fails them.

DoBody type for everything a human reads.

Don'tUppercase tracked-out mono footnotes.