Components

Feedback

How the portal tells people what is happening: compact badges for state, alerts for things that need reading, toasts for things that just happened, and progress for things still moving.

BadgeAlertToastProgressSkeletonEmptyState

Badges

Seven tones and three emphasis levels. Subtle is the default. Solid is reserved for terminal, positive states such as Certified. Outline marks something provisional.

Tones and emphasis

subtleneutralprimarysignalsuccesswarningdangerinsight

solidneutralprimarysignalsuccesswarningdangerinsight

outlineneutralprimarysignalsuccesswarningdangerinsight

Pills, dots and icons

lightVerifiedDispatchingOpenCertifiedLive

darkVerifiedDispatchingOpenCertifiedLive

Alerts

Alerts sit inline with the content they describe. The insight tone is only for AI suggestions and always says so.

Information: Plan revision r14 is locked

Two approvals are required before wave 5 can dispatch. One of two received.

Success: Read-back confirmed 1,206 collections

Every record in wave 3 exists at the destination with a matching hash.

Warning: 4 operations have an unknown outcome

The destination timed out. No retry runs until read-back reconciles each one.

Review

Error: Wave 5 halted on an unsupported required field

customer.tax_exempt_reason has no destination. Map it, omit it with a reason, or keep the wave blocked.

AI suggestion: Suggested mapping, needs review

AI suggests mapping attribute_set.color to the option name Color. Suggestions never apply themselves.

Alert code

Warning: 4 operations have an unknown outcome

The destination timed out. No retry runs until read-back reconciles each one.

Toasts

Toasts confirm something that just happened. They stack at the bottom right, pause while hovered or focused, and leave after five seconds. Danger toasts are announced immediately.

Trigger a toast

Progress

Determinate bars when the total is known, which is almost always in a migration. Stacked bars show how records spread across ledger stages.

Linear progress

Wave 4 · Catalog62%

100%

Stacked distribution

Certified52,118
Verified6,204
Dispatched3,108
Staged12,400
Pre-dispatch24,920

Loading

Skeletons hold the shape of content that is about to arrive, so the layout never jumps. Spinners are for short, inline waits only.

Skeleton to content

Loading connection

Empty states

An empty state explains why there is nothing here and offers the next step. When the emptiness is good news, say so.

No unknown outcomes

Every write in this run has a confirmed result. New ambiguous outcomes appear here for read-back.

No source connected yet

Connect the store you are moving from. Kramor only reads from it.

Connect a store

Guidance

Saved as draft

Use toasts for things that just happened

A toast confirms an action the person took. Anything they must act on stays on the page as an alert.

Wave halted, gone in 5s

Don't

Put blocking problems in a toast

A halted wave in a toast disappears after five seconds and is easy to miss. Show it inline, next to the wave.