Tokens, components, icons, motion, and voice reference for every ArcGrid surface. The single source of truth for how the platform looks and behaves.
Mark & Wordmark
The mark is a node-network graph - two clusters of nodes connected across a midline, representing arc and grid as two halves of one system.
Mark sizes
Wordmark
Set in IBM Plex Mono. "arc" at weight 700, color #F2F3F5. "grid" at weight 400, color #80848E. Always lowercase. Never use the old SVG wordmark - always compose from the mark + styled text.
Don'ts
Three-Theme System
Surface ships three themes that share the same token structure and teal accent hue. The theme is set via data-theme on the root element. Use the D / M / L toggle in the nav to preview each theme live.
Identity colors (shared across all themes in dark / medium)
These eight colors are used for user identity chips, project tags, and avatar borders. Light theme uses desaturated equivalents for accessibility on white backgrounds.
Palette
The swatches below reflect the active theme - use the D / M / L toggle in the nav to switch. The page background is always sunken; cards sit on base; interactive surfaces raise to raised or overlay.
Surface layers
Borders
Text
Accent
Semantic
Type System
IBM Plex Sans for UI text. IBM Plex Mono for code, token names, and the wordmark. Both ship as open-source weights from Google Fonts or self-hosted.
Space & Shape
Base unit is 4px. All spacing is a multiple. Never use arbitrary pixel values - stay on the scale.
Spacing scale
Border radius
Grid & Breakpoints
Two width containers govern all content. .wrap is the site-wide rail; .page-wrap is for narrower editorial content. Both center with auto margins and horizontal padding.
Content containers
Breakpoints
| Max-width | Token | What changes |
|---|---|---|
| 860px | - | Mobile nav: burger appears, main nav collapses to dropdown |
| 700px | - | Theme comparison grid stacks from 3-col to single column |
| 680px | - | .grid-3 and .grid-4 collapse to 2-column |
| 420px | - | All .grid-* helpers collapse to single column |
Grid helpers
.grid-2
.grid-3
.grid-4
Timing & Easing
Motion is for orientation, not decoration. Use the fastest duration that doesn't feel abrupt. Always respect prefers-reduced-motion.
Live demo
Click a duration to fire a panel entrance at that speed. All use --ease.
UI Components
These are the canonical component forms. Copy tokens and structure exactly - variants must stay within this vocabulary.
Orchestration layer for the sovereign agent fleet.
Work platform for the team - tasks, time, clients.
Icon System
Surface uses Lucide as the system icon library. All icons are 24×24, 1.5px stroke, currentColor. Never fill icons. Scale to 20px for standard UI and 16px for dense contexts.
Copy Standards
ArcGrid speaks like a senior engineer who respects the reader's time: precise, direct, no filler. Avoid marketing fluff and corporate hedging equally.
| Do | Don't |
|---|---|
| Your task was published. | Your task has been successfully published! |
| No results. Try a different filter. | Oops! We couldn't find anything. |
| Delete project - this can't be undone. | Are you sure you want to proceed? |
| Sign in to continue. | Please log in to access this resource. |
| Connecting to ArcGrid… | Please wait while we establish a secure connection to your workspace. |
| Saved. | Your changes have been automatically saved. |
| 3 items need attention. | We noticed some items that may require your attention! |
| ArcGrid - sovereign work platform | ArcGrid: AI-powered productivity for modern teams |