Loading controls
Back Office System
Design System
Complete UI style guide for implementation handoff: typography, color system, controls, cards, tables, rules, and chart primitives.
Visual direction
AN ACCOUNTING OF THE YEAR IN
Back Office
60,754
MILES TRAVELED
System density example
Feltron principles: ruled grids, high-contrast data type, restrained accent usage, dense but scannable modules.
Color system
Primary text / data strokes
Canvas / panels
Secondary labels
Rules / separators
Highlights / focus context
Alerts / time variance
Negative deltas / overdue
Secondary data series
Neutral contrast fill
Type scale
Control
Revenue
25,247
3,221
AN ACCOUNTING OF THE YEAR IN
FINANCIAL MANAGEMENT
Operational support copy and concise descriptions.
UI Elements
Buttons and controls
HR / rule options
Cards and numeric modules
Open invoices
311
awaiting customer action
Auto-matched receipts
49
weekly match rate
Card with emphasis strip
Magic Inbox can confidently map 86% of incoming receipts to transactions using embedding similarity + account history.
Use for actionable module previews.
Table system
| Entity | Owner | Status | Amount | Age |
|---|---|---|---|---|
| Invoice INV-2188 | Mia | Needs review | $8,420 | 4d |
| Receipt RC-0922 | Chris | Matched | $228 | 1d |
| Contract CT-118 | Jules | Missing tag | - | 8d |
| Payment PM-441 | Ari | Scheduled | $2,100 | 2d |
Dense table, ruled rows, tabular numerics, keyboard focus on row actions.
Graph Gallery
Activity ribbon (multi-series)
Timeline columns
Sparkline
Sparkline (secondary palette)
Donut
Bar list
Bar list (workload mix)
Implementation checklist
- Use token variables only. Keep accent usage sparse and intentional.
- Keep panel edges square with no shadows; hierarchy comes from rules and typography.
- Reserve serif for key display headlines only. Operational UI remains sans/mono.
- Maintain contrast on all controls and preserve visible focus ring on keyboard navigation.
- Keep motion subtle: hover/focus feedback and short numeric count-up only.