DESIGN SYSTEM — VERSION 1.0.3
Calm, technical, trustworthy. The visual and interaction standards for brand, web, and product.
Primary Palette
Secondary Palette
Neutral Palette
Display: Sora · Body: Geist
| Token | Font | Size | Weight | Line Ht | Usage | Sample |
|---|---|---|---|---|---|---|
type.h1 | Sora | 45px | 700 | 56.7px | Hero titles | MPR |
type.h2 | Sora | 35px | 600 | 44.1px | Section titles | Section Heading |
type.h3 | Sora | 28px | 500 | 31.5px | Card titles | Card Title |
type.body.xl | Geist | 24px | 400 | 31.2px | Subheading paragraphs | Body XL sample text |
type.body.md | Geist | 16px | 400 | 20.8px | Standard body | Body MD sample text |
type.caption | Geist | 14px | 500 | 18.2px | Metadata | Caption text |
Primary
Secondary
Tertiary
Label Badge (non-interactive)
Filter Tags
Filter-Control Tags
Informational Cards
Full visibility into every AI interaction across your infrastructure, with role-based access controls and audit trails.
End-to-end encryption, SOC 2 compliance, and real-time threat detection built into every layer.
Fortune 500 · Financial Services
"MPR's governance platform gave us the visibility we needed to deploy AI across our entire organization."
Metric Cards
Enterprise SLA with redundant global infrastructure.
Source: Q2 2026 Status ReportResource Cards
An in-depth analysis of how enterprises are approaching AI governance in 2026.
A framework for developing AI systems that are transparent, auditable, and aligned with enterprise values.
From pilot to enterprise-wide deployment in 6 months. A detailed walkthrough.
Spacing
| Token | Value |
|---|---|
space.xs | 4px |
space.sm | 8px |
space.md | 16px |
space.lg | 32px |
space.xl | 64px |
Radii
| Token | Value |
|---|---|
radius.button | 8px |
radius.input | 8px |
radius.card | 20px |
radius.badge | 100px |
Shadows
| Token | Style |
|---|---|
shadow.default | |
shadow.hover |
MPR Design System · Version 1.0.3
Standardized from the MPR design spec · DESIGN.md · Original Spec