The component library powering the NovaCorp Data Analytics & Invoice Audit Platform. Built on the principle that "benchmarking starts with data cleaning." Every token, component, and pattern below traces back to the design walkthrough.
Three rules govern every choice. When components disagree, principles win.
Enterprise users are time-pressured. No illustrations. No flourish. Data speaks. White space exists to separate sections, never as a stylistic move.
Summary at the top. Drill-down within one click. Dashboard → Vendor → Invoice → Exception. Every screen answers "what do I do next?"
The AI agent is visible, trusted, and always explains its reasoning. Purple #6D28D9 is its consistent visual signature.
All colors are CSS custom properties. Status colors are reserved for compliance semantics — never for decoration. Purple is reserved exclusively for AI activity.
Status colors appear only on badges, dots, and chart marks. Never as panel backgrounds. Brand blue is the only color that signifies interactivity. AI purple is exclusive to AI-generated insights.
IBM Plex Sans for prose and UI. IBM Plex Mono for numeric data — fixed-width is essential for scannability across rows of financial figures.
font-family: 'IBM Plex Sans', -apple-system, sans-serif; /* UI & prose */ font-family: 'IBM Plex Mono', ui-monospace, monospace; /* numerics & refs */
Strict 4-pt rhythm. Spacing tokens compose into layouts; radius tokens round components consistently.
Three shadow tiers. Motion is fast (120–180ms) and uses a single ease curve.
| Token | Value | Use |
|---|---|---|
--dur-fast | 120ms | Hover, focus, button states |
--dur-base | 180ms | Drawer open, dropdown reveal |
--ease | cubic-bezier(.2,.8,.2,1) | All UI transitions |
Five variants × three sizes. Primary blue is exclusive to the most important call-to-action on a screen.
<button class="btn btn--primary">Run audit</button> <button class="btn btn--ai">✦ Apply AI fix</button>
Badges always carry a colored dot. The dot makes status legible at small sizes inside dense tables.
<span class="badge badge--success"> <span class="dot"></span>Fully Compliant </span>
Filters are first-class UI. Applied filters surface as chips at the top of the canvas.
KPI cards stand in a single row at the top of every dashboard view. They show one metric, one delta, and (where applicable) one progress encoding.
Dense tables with inline badges, sortable columns, and dual-encoded ratios. Every row is clickable; hover tints the row.
| Vendor ▲ | Status | Compliance rate | Invoices | Exposure | AI flags |
|---|---|---|---|---|---|
| Acme Logistics VEN-0042 · EMEA |
Compliant | 1,247 | $48,210 | 2 | |
| Northwind Supply VEN-0118 · NA |
Partial | 894 | $112,440 | 9 | |
| Globex Freight VEN-0204 · APAC |
Non-compliant | 412 | $284,008 | 17 | |
| Initech Carriers VEN-0367 · EMEA |
Compliant | 680 | $22,180 | — |
| Line | Description | Invoiced | Expected | Deviation |
|---|---|---|---|---|
| 1 | Express freight · LON→AMS | $1,240.00 | $1,240.00 | $0.00 |
| 2 | Surcharge · fuel | $ 412.00 | $ 385.00 | +$27.00 |
| 3 | Customs handling | $4,500.00 | $ 342.00 | +$4,158.00 |
If it's purple, the agent did it. AI components always lead with evidence and confidence — actions appear last.
Confidence ≥ 75%. Financial impact above threshold. Always presents evidence first.
Confidence 50–75%. Shows reasoning. Action button requires explicit approval.
High confidence + low impact. Logged with rationale. User can audit at any time.
Each chart type has one job. Pick by the question being answered, not by aesthetic.
| Chart | Answers | Where used |
|---|---|---|
| Waterfall | Where did the net come from? | Compliance overview · financial impact |
| Pareto | Which 20% causes 80%? | Root cause analysis |
| Heatmap | Where is leakage concentrated? | Vendor × geography |
| Quadrant | Risk vs volume by vendor | Vendor strategy view |
| Trend line | Are we improving over time? | Compliance over quarters |
| Donut | Distribution of one variable | Compliance status share |
| Ranked bar | Top / bottom N comparison | Vendor leaderboard |
Bars sort by financial impact (descending). Overlay a cumulative-percentage line to identify the 80/20 break.
Pre-assembled patterns that solve specific screen requirements from the brief.
Empty, loading, and error states are part of every screen — designed once, used everywhere.
Upload an invoice file to start your first audit.
Showing partial results. Last successful sync: 2 min ago.
The brief requires "tables must be sortable and filterable (show interaction states in your design)." This section specifies how that requirement is met.
<th class="sortable sorted" data-sort-key="exposure" data-sort-dir="desc"> Exposure <span class="sort-arrow">▼</span> </th>
Distinct from chip pattern (Section 8). Filter buttons sit above the table and represent the brief's required dimensions: Vendor, Date Range, Geography, Contract, Service Level. Each carries an inline applied value when filtered.
<button class="filter-btn">Vendor <span class="caret">▾</span></button> <button class="filter-btn filter-btn--applied">Date: Q1 2026 <span class="caret">▾</span></button>
Circular SVG gauge used for the data-quality before/after pattern on Screen 2. Three color states map to score ranges so the gauge tells the story without reading the number.
circumference = 2 × π × 52 ≈ 326.7 fill-length = (score / 100) × 326.7 // Examples score 67 → stroke-dasharray="218.9 326.7" score 81 → stroke-dasharray="264.6 326.7" // live, brand score 94 → stroke-dasharray="307.1 326.7" // success
Inline indicator that data is out-of-date or only partially available. Used in error/partial states to signal compromised data without hiding it.
<span class="stale-tag">stale</span> <span class="stale-tag">partial</span> <span class="stale-tag">PARTIAL DATA</span>
Detailed specs for the four state variants shown in the submission. Each composite pattern combines tokens from sections 1–15.
Used at the top of any screen waiting on data. Pulse animation on the dot. AI panel below renders dimmed with a "✦ Agent will surface insights once sync completes…" line in italic AI purple.
KPIs render with reduced opacity (0.7) and stale tags. Affected-sources list shown as a panel above the KPIs. AI panel switches to "Paused" badge — agent never operates on incomplete data.