Act-Ready Component Storybook

Living reference of all shared UI components. These are the actual imported components, not mocks.

Colors

Core Palette

#221F1C

Zeus

#5F5A55

Chicago

#7B756F

Tapa

#CDCBC7

Cloud

#E3E1DD

Westar

#E9E7E2

Cararra

#EDEBE8

Cararra Light

#F7F5F3

Pampas

#FDFDFC

White Pampas

Semantic Status Colors

#EEF2EF

Sage (Addressed)

#F5F0E8

Warm Amber (In Progress)

#FBF7F0

Warm Brown (Gap/Action)

#EDEBE8

Neutral (Not Started)

#B8860B

Harvest Gold (Gap Dot)

Typography

Source Serif 4 / 36px Bold

Page Heading

Source Serif 4 / 24px Bold

Section Heading

Inter / 16px Semibold

Card Title

Inter / 14px Regular

Body text — used for descriptions, paragraphs, and general content.

Inter / 12px Regular (Tapa)

Secondary text — helper text, timestamps, meta information.

Inter / 10px Medium (Label)

MICRO LABEL

Spacing & Radius

4px

6px

8px

12px

16px

Buttons

Variant x Size

Size	Primary	Secondary	Ghost (dark bg)
lg
md
sm

States

Badges

StatusBadge

Unified colored pill badge for all obligation/task status rendering.

Not started

NOT_STARTED

In progress

IN_PROGRESS

Addressed

ESTABLISHED

Active

ACTIVE

Due for review

DUE_FOR_REVIEW

Needs update

NEEDS_UPDATE

N/ADocumented

NOT_APPLICABLE

StatusBadge (gap-aware)

Addressed

no gap

Addressed

minor gap

Assessed — action needed

major gap

ClassBadge (bucket)

AI LiteracyTransparencyGPAI ProviderHigh RiskProhibited

Size: xsSize: smSize: md

ClassBadge (risk)

High riskLimited riskMinimal riskProhibitedMay be prohibitedGPAI obligations

StatusDot

not_started

in_progress

completed

Pills

PillToggle (nav)

PillToggle (filter)

Inputs

Text Input

Textarea

Select

Progress Bars

0% complete0%

25% complete25%

50% complete50%

75% complete75%

100% complete100%

Cards

Standard Card

Default card for most content. White Pampas background, subtle shadow.

Highlight Card

5% green tint background. Used for upgrade/upsell prompts.

Done State (bg-pampas)

Done State

Pampas background signals completion. Not a card tier, a state indicator.

Empty States

No AI systems yet

Add your first AI system to get started with your readiness journey.

Obligation Icons

ObligationIcon renders a 32px container with status-driven colors.

Not Started

In Progress

Addressed

Addressed + gap dot

Major Gap

N/A

Obligation Icon Map

ai_literacy

prohibited_screening

transparency_notice

human_oversight

log_retention

monitoring_plan

incident_reporting

Assignee Chips

Jan L.active

Maria S.Invitedinvited

External C.Contactcontact

Alice B.Traineetrainee

Step Indicator

3 steps, step 1 active

3 steps, step 2 active

3 steps, step 3 active

Component Census

Component	Path	Status
Button	ui/Button.tsx	New (replaces PrimaryButton)
ClassBadge	ui/ClassBadge.tsx	New (replaces BucketBadge + RiskBadge)
ObligationIcon	ui/ObligationIcon.tsx	New
StatusBadge	ui/StatusBadge.tsx	Unified (single pill rendering, gap-aware)
AssigneeChip	ui/AssigneeChip.tsx	Updated (warm Trainee badge)
PillToggle	ui/PillToggle.tsx	Stable
PricingToggle	ui/PricingToggle.tsx	Stable
FilterSelect	ui/FilterSelect.tsx	Stable
EmptyState	ui/EmptyState.tsx	Stable
StepIndicator	ui/StepIndicator.tsx	Stable
StatusDot	ui/StatusDot.tsx	Stable
Modal	ui/Modal.tsx	Stable
WizardModal	ui/WizardModal.tsx	Stable
PrimaryButton	ui/PrimaryButton.tsx	Deprecated (re-exports Button)
BucketBadge	ui/BucketBadge.tsx	Deprecated (re-exports ClassBadge)
RiskBadge	ui/RiskBadge.tsx	Deprecated (re-exports ClassBadge)