Components

Every part, every variant

The components exported by @revvitapps/canvas-ui, styled entirely from the token layer. All states are carried by shape + word as well as colour, so each survives greyscale.

Buttons

primary is the one blue action per region; ghost is the neutral default; dark is a graphite action; danger is destructive-only.

<Button variant='primary' | 'ghost' | 'dark' | 'danger' /> · sizes sm · md · lg

Chips & Pills

PropertyNotesGuest contactException
<Chip /> — field / spec tags · <Pill /> — filters (graphite when active)

Badges & status

PublishedDraftLockedFor youBlockedHealthyNeeds attentionBlockerLive
<Badge /> — permission / status labels · <StatusDot /> — indicators (never colour alone)

Panels & cards

Raised surfaces at elevation e0–e3; Card adds the selected brand treatment.

Panel · e1

A resting surface for content.

Panel · e2

Toolbars, legends, popovers.

Card

Node radius, resting elevation.

Card · selected

Brand outline + wash.

Metric tiles

The value is always the largest thing; the rail carries target context. A red tile is an exception to act on.

TURNOVERS TODAY
6
of 6 scheduled
OPEN EXCEPTIONS
2
target 0
ON-TIME RATE
92%
target 95%
AVG TURNAROUND
3h 12m
-18m vs last wk

Table

CSS-grid rows; exception rows carry the danger bed and a left marker, and the status cell states it too.

All turnovers
Property
Cleaner
Status
Elapsed
Sunset Villa #2
M. Alvarez
Exception
3h 41m
Harbor Row #12
Unassigned
At risk
1h 06m
Ocean View #4
M. Alvarez
Ready
2h 48m
Pine Lane #7
J. Kim
In progress
1h 22m

Chrome primitives

The operating layer
Live
<Eyebrow /> · <LiveBeacon /> · <ModeSwitcher /> · <Icon />

Map node families

The Build node language: the selected / suggested / locked states read in greyscale by border and fill, not hue.

CAPABILITY
Scheduling
canonical · 4 ctx
CAPABILITY · SELECTED
Manager live board
reads: approved catalog
SUGGESTED
Photo QA step
accept to connect
LOCKED
Payroll
Request access
<CapabilityNode /> — static layout