Compliance Alliance

Charter

The design system for the modern Compliance Hub — the tokens, components, and patterns that make a regulatory platform feel calm, precise, and trustworthy. One vocabulary, used everywhere, so the product feels like a single crafted property.

v0.1 HTML + CSS + Lucide Light & dark Golden-ratio scale

10Foundations 45Components 8Product patterns 43Pages 131Design tokens 2Themes · light & dark 2Colorblind modes φGolden harmony

Start here

Principles

The beliefs the whole system is built on — clarity as care, calm by default, show your work.

Foundations

The tokens everything inherits: color, type, the golden space scale, and icons.

See it composed

The Workflow Runner — the whole vocabulary working together in one pattern.

Foundations

The decisions everything else inherits.

ColorBrand, neutrals, status palette TypographyPetrona · Libre Franklin · Mono Space & sizingGolden ladder, radii, elevation IconographyLucide, sized for the Hub AccessibilityKeyboard, focus, ARIA, motion Color visionColorblind-safe modes + simulation Content & voiceVoice, the regulatory line, terms AI / ArgusThe trust contract for AI MotionEasing, choreography, streaming Brand & logoMark, lockups, clear space

Atoms

The smallest building blocks.

ButtonsVariants, sizes, group & split Status & healthDots, badges, health, confidence AvatarsPeople, banks, presence, stacks

Forms & inputs

Everything members type, choose, and upload.

Forms & inputsInputs, choices, layout, advanced Search & commandSearch bar + ⌘K omnibox File uploadDropzone + CSV column mapping Rich text editorToolbar + branded canvas

Navigation

Moving through the Hub.

Step navigationHorizontal + workflow rail Tabs, menus & pagingTabs, breadcrumbs, menus, tree

Data display

Surfacing records, numbers, and time.

TablesSort, select, bulk, paginate Data grids & densityFilter, edit, density modes Charts & data vizSpark, bar, line, donut, heat Cards & tilesCards, stat tiles, program health CalendarMonth grid + agenda Timeline & activityAudit trail, evidence binder Document readerLong-form regs, terms, footnotes Document & exportBoard packets, print, PDF

Feedback & overlays

How the Hub communicates — and the non-happy-path.

Banners, toasts & modalsAlerts, toasts, dialogs, empty Disclosure & overlaysAccordion, drawer, notifications System & edge statesGates, errors, no-results, offline

Molecules

Compliance-specific compositions.

Impact cardThe Regulatory-Radar signature Domain moleculesFindings, rollup, assistant msg More componentsTree, diff, coach marks, help

Patterns

Whole surfaces, composed from the vocabulary above.

Workflow runnerRail · canvas · context dock Today / dashboardThe personal command center Radar feedPersonalized regulatory impact Program homeA program's full anatomy Manager portfolioOversight at a glance Review queueRosetta-assisted document review Audit trailImmutable, attributed, exportable Permissions & rolesEdition → role → entitlement

How it's built

Three token layers

Primitives → semantic (themeable) → component aliases. Dark mode is a token swap, not a rewrite.

One golden proportion

Type and spacing share a √φ ladder anchored at 15px; body line-height is φ itself.

Calm by default

Color means status, never decoration; urgency is spent sparingly, and access is the floor.