XMPro Design System
Living component reference for the Astro site. Every xm-* class, every Astro component, fonts, colors, and interactive elements — all in one place.
1. Brand Colors & Tokens
#003952
--xm-primary #009fde
--xm-secondary #00a698
--xm-success #EC8629
--xm-alert #cc3333
--xm-danger #3a3a3a
--xm-text #F0F0F0
--xm-surface #ffffff
--xm-white 2. Typography
Font: futura-pt (Jost fallback) via Typekit kit tim4txg
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Subtitle text for secondary information
Large body text for introductions and featured paragraphs.
Default body text. Used for most content across the site. Comfortable reading size.
Extra small text for captions, labels, and metadata.
3. Buttons
Light context:
Dark context:
4. Status Dots
5. Panel Component
Astro component: <Panel> — frosted glass card with header, status, and dot.
Equipment monitoring active. All sensors reporting within normal parameters.
Three recommendations awaiting operator review.
Next planned maintenance window: 48 hours.
6. Grid System
xm-grid-2, xm-grid-3, xm-grid-4 — responsive auto-collapse
xm-grid-4
xm-grid-3
xm-grid-2
7. HAS Row Component
Astro component: <HASRow> — Human Agency Scale progression.
Monitoring
Agents observe and alert. Humans decide and act.
Advisory
Agents diagnose and recommend. Humans approve.
Assisted Action
Agents initiate routine actions within boundaries.
Supervised Autonomy
Agents handle full workflows. Humans monitor exceptions.
Full Autonomous
Agent networks coordinate autonomously. Humans set governance.
8. Stat Card Component
Astro component: <StatCard> — animated metric display.
Validated Value
0
Across production deployments
OT/IT Connectors
0
Pre-built integrations
Days Autonomous
0
Continuous MAGS operation
Tier 1 Operators
0
Global mining & energy
9. Ticker
Operational scrolling status bar. Visible in BaseLayout when showTicker=true. See top of any page using BaseLayout.
10. Check Lists
11. Divider
12. Color Modifiers
xm-text-primary — #003952
xm-text-secondary — #009fde
xm-text-muted — #919191
xm-text-white — on dark background
13. Subtitles & Labels
Standard subtitle text
14. Metric Cards
Accent-colored metric displays with animated counters. xm-metric with accent modifiers.
FACILITIES
0
Globally deployed
CONNECTORS
0
OT/IT integrations
UPTIME
0
System availability
WARNINGS
3
Pending review
15. Highlight Cards
Info Highlight
Used for informational callouts and feature explanations.
Warning Highlight
Used for caution notices and important considerations.
Success Highlight
Used for positive outcomes and completed actions.
Danger Highlight
Used for critical alerts and required actions.
16. Section Headers
17. Video Wrapper
18. Background Utilities
19. Dark Context (Panels)
xm-bg-dark
Full-width dark background section. Panels auto-switch to frosted glass in dark context via the .dark parent class.
Panels adapt to dark context automatically.
Glass surface with frosted blur on dark backgrounds.
All decisions audited and traceable.
20. GSAP Scroll Animations
Add xm-animate with data-animate attribute. Stagger groups use xm-stagger-group.
Interactive Islands
JS components from public/islands/. Configured via HTML data attributes.
21. Stat Counter
22. OEE Gauge
23. Agent Card
24. KPI Cards
25. Alert Panel
26. Timeline
27. Sparklines
28. AD Gauge
29. Progress Ring
30. Platform Architecture
Click any layer to expand. Interactive layered architecture diagram.
31. Sensor Telemetry
Live streaming sensor data with pause/resume. React + Recharts.
32. Decision Donut
33. Header Component
Astro component: <Header> — full mega menu navigation matching production xmpro.com.
Variants: light (default), dark, transparent
5 mega menu items: Platform, AI, Solutions, About, Resources. Search dropdown, Demo Hub + Contact Us CTAs, mobile hamburger menu. Currently rendered live at top of this page.
34. Footer Component
Astro component: <Footer> — full site footer matching production xmpro.com.
4-column layout (Platform, Resources, Company, Newsletter), certification badges (ISO 27001, NIST 800-171, NIST 800-82), copyright bar with social icons. Currently rendered live at bottom of this page.
35. Interactive Frameworks (React)
All frameworks are installed and available via React integration. Use Astro's client:visible, client:load, or client:idle directives for hydration control.
Three.js + R3F
3D scenes, particle fields, rotating data meshes, globe visualizations
three, @react-three/fiber, @react-three/drei D3.js
Force graphs, sankey diagrams, treemaps, data-driven visualizations
d3, @types/d3 Framer Motion
Layout animations, gestures, shared transitions, spring physics
framer-motion GSAP + ScrollTrigger
Scroll-driven animations, parallax, pinned sequences, timeline control
gsap (includes ScrollTrigger plugin) Rive
State-based interactive animations, agent state machines, micro-interactions
@rive-app/react-canvas Apache ECharts
Rich charts, dashboards with tooltips, zoom, drill-down capability
echarts Motion One
Lightweight Web Animations API wrapper (3KB), micro-interactions
motion Spline
Visually designed 3D scenes, interactive embeds, no-code 3D
@splinetool/react-spline, @splinetool/runtime Hydration Directives
| Directive | When JS Loads | Use For |
|---|---|---|
client:load | Immediately on page load | Above-fold interactive elements, critical animations |
client:idle | After page becomes idle | Non-critical interactivity, analytics, background features |
client:visible | When scrolled into viewport | Charts, gauges, 3D scenes below the fold |
client:media="(min-width:768px)" | When media query matches | Desktop-only interactive elements |
Usage Pattern
// components/NetworkGraph.tsx (React component)
import { useEffect, useRef } from 'react';
import * as d3 from 'd3';
export default function NetworkGraph({ data }) { ... }
// pages/platform.astro (Astro page)
import NetworkGraph from '../components/NetworkGraph';
<NetworkGraph client:visible data={agentData} />36. Component Inventory
| Component | Type | File | Status |
|---|---|---|---|
| Header | Astro | components/Header.astro | Ready |
| Footer | Astro | components/Footer.astro | Ready |
| Panel | Astro | components/Panel.astro | Ready |
| HASRow | Astro | components/HASRow.astro | Ready |
| StatCard | Astro | components/StatCard.astro | Ready |
| VideoSection | Astro | components/VideoSection.astro | Ready |
| Ticker | CSS | xm-ticker class | Ready |
| Check List | CSS | xm-check-item class | Ready |
| GSAP Animations | JS Island | islands/xm-gsap-core.js | Ready |
| Stat Counter | JS Island | islands/xm-stat-counter.js | Ready |
| Platform Architecture | JS Island | islands/xm-platform-architecture.js | Available |
| OEE Gauge | JS Island | islands/xm-oee-gauge.js | Available |
| Agent Card | JS Island | islands/xm-ad-agent-card.js | Available |
| Alert Panel | JS Island | islands/xm-ad-alert-panel.js | Available |
| Timeline | JS Island | islands/xm-ad-timeline.js | Available |
| Sensor Telemetry | JS Island | islands/xm-sensor-telemetry.js | Available |
| Decision Donut | JS Island | islands/xm-decision-donut.js | Available |
Abstract Backgrounds (R3F)
Reusable WebGL background layers for sections. All use React Three Fiber + Three.js,
respect prefers-reduced-motion, auto-pause when off-viewport, and are transparent
(drop onto any section). Import from components/react/backgrounds/.
When to use which: FlowLines for sections about data, integration, streams, orchestration. NoiseTerrain for intelligence/cognition/analysis moments (best on dark hero). CircuitPulse for platform/architecture/tech-heavy sections.
37. Icons
Curated icon catalogue — iOS 17 Outlined style (Icons8), inlined as SVG via the <Icon /> Astro component.
Color inherits from currentColor so icons automatically flip with the theme: #003952 on light, #e2e8f0 on dark.
Size scales with font-size by default (1em × 1em), or override with size={24}.
Color modifiers
Sizes
Inline with text
Sensors stream telemetry to the brain , which drives decisions and dispatches actions . Icons inherit text color and size automatically.