Jo Design System

Living component catalog

v1.0

UI primitives

Buttons, badges, feedback, and structural primitives that every workspace surface is built from.

Buttons

Variants, sizes, icons, and loading state.

Badges & avatars

Status pills and people identity.

In reviewPriorityActivePending renewalPast dueArchived
VerifiedBetaSLA 4h
Team logo

Alerts

Inline messaging across the four tones.

Renewal approaching

Belmont Manufacturing renews in 14 days. Confirm seat count before the auto-renewal runs.

Sync complete

The nightly account sync completed. 312 records updated.

Action required

Two payment methods failed verification overnight.

What's new

Reporting exports now include department attribution.

Loading & progress

Skeletons, spinners, and progress feedback.

Loading
Loading
Loading
Onboarding completion72%

Tabs, accordion & separators

Sectioning and progressive disclosure.

Cascade Health Group is on the Enterprise plan with 312 active seats and a May renewal.

Table & pagination

Tabular account data with paging.

AccountOwnerRenewalSeatsHealth
Northwind Trading Co.Priya NatarajanMar 14, 2026184Healthy
Belmont ManufacturingDiego AlvarezApr 02, 202696At risk
Cascade Health GroupHannah BeckerMay 21, 2026312Healthy
Orchard & Vine HospitalityMarcus LinJun 09, 202647Watch

Showing 4 of 128 accounts

Empty state

Shown when a filtered list returns no results.

No matching accounts

No accounts match the current filters. Try widening the renewal window or clearing the health filter.