Machine Vision Unified UI
One token system for admin operations, client delivery, and editorial report surfaces.
Design direction
PRINCIPLES
- Token-first color application across every surface
- Adaptive workspace navigation for dense admin flows
- Editorial display typography only where narrative matters
- Consistent focus, motion, and state messaging
STATUS SEMANTICS
Value opportunity
Risk
Error state
Strategic initiative
Color System
Semantic tokens + grayscale scale. Minimal usage (emphasis only).
SEMANTIC TOKENS
background / foreground
Base page colors
card
Surfaces (cards, panels)
popover
Overlays (menus, tooltips)
primary / default
Primary action color
primary / hover
Primary interaction hover state
primary / active
Primary pressed or active state
primary / soft
Low-emphasis primary background
brand / default
Machine Vision brand identity color
brand / soft
Subtle brand-emphasis surface
accent blue
Secondary brand accent
secondary
Soft tinted surfaces and secondary actions
muted
Subtle surfaces
accent
Highlight surfaces
error / destructive
Error states and destructive actions
border / input / ring
Form & focus primitives
auth shell gradient
Light/dark auth shell gradient
auth hero gradient
Hero panel gradient for authentication
NEUTRAL SCALE (50–900)
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
SYSTEM STATUS TOKENS
success
Positive system status
warning
Warning system status
error
Error system status
info
Informational system status
critical (alias)
Backward-compatible alias of error
Typography
IBM Plex Sans for interface clarity, Source Serif 4 for editorial emphasis.
Hierarchy
H1 — Section headline
H2 — Insight header
H3 — Supporting structure
Analytical body copy prioritizes clarity. Use short, specific sentences. Prefer numbers, ranges, and explicit assumptions.
Display typography is reserved for report covers, case-study intros, and section headlines that need narrative lift.
Components
Buttons
Status
Report successfully published for client delivery.
Preview mode is active and analytics are paused.
Inputs
Badges (emphasis only)
Neutral
Strategic
Risk
Upside
Error
Structure
Alignment grid12-col / max 5xl
Whitespacegenerous, consistent
Radii0.4rem base
Data Visualization
Flat, analytical visuals. No gradients. No playful styles.
Radar chart
Heatmap matrix
Bar chart
Timeline roadmap
ROI waterfall
Prioritization quadrant
Enterprise readiness
Print/PDF friendly and built for secure internal environments.
Export & presentation
Print/PDF
Hides navigation chrome when printing.
Ready
Content-first layout
Optimized for executive scanning.
Ready
Motion discipline
Subtle transitions only.
Ready