Tokens and visual grammar
Palette, spacing, radii, elevation, motion and layer ownership for the arcade companion selector.
Core palette
Click any token to copy its exact production value.
Semantic token aliases
Components consume role-based aliases. Palette names remain implementation details instead of leaking into component APIs.
| Role | Family | Line height | Tracking |
|---|---|---|---|
| Display XL | Oxanium 800 | 0.92 | −0.055em |
| Heading XL | Oxanium 800 | 0.98 | −0.04em |
| Title | Oxanium 800 | 1.05 | −0.025em |
| Reading | Inter 400–700 | 1.55 | Normal |
| Command | JetBrains Mono 800–950 | 1.0 | 0.02em |
Spacing cadence
4px is the base unit. Select a token to inspect the real inset.
Radius hierarchy
Choose a role token, then inspect the concentric outer/inner rule. Pills remain restricted to true circles.
Rinner = max(0, Router − inset)Surface uses a 4px measured inset. Nested corners share one center; a child never copies the parent radius when padding separates their edges.
| Outer owner | Outer radius | Typical inset | Inner result |
|---|---|---|---|
| Card / surface | 12px | 4px | 8px control |
| Dialog / panel | 18px | 6px | 12px surface |
| Persistent tray | 20px | 8px | 12px surface |
| Control | 8px | 2px | 6px inner |
| True circle | 999px | Equal width / height | Circle only |
Border hierarchy
A border communicates ownership: passive surfaces stay quiet, while tactile controls carry the stronger arcade outline.
Cards, panels and documentation blocks use elevation and a quiet theme-aware edge instead of a bright outline.
1px solid var(--border-subtle)Buttons, selected controls and intentional interaction specimens retain the hard arcade silhouette and physical depth.
2px solid var(--text-primary)Focus never thickens a passive card. The shared external ring adds state without moving geometry or replacing its border.
box-shadow: var(--focus-ring)| Owner | Border | Depth | Examples |
|---|---|---|---|
| Passive surface | 1px subtle | Surface shadow | Cards, panels, Heroes |
| Tactile control | 2px high contrast | Hard keycap extrusion | Buttons, selected controls |
| Focus state | Surface border unchanged | External ring | Keyboard focus |
Large-card shadow system
Large surfaces keep two-layer separation in both themes.
Paper surface · 12px radius · soft theme-aware ledge.
0 12px 0 rgba(21,21,21,.07),
0 24px 52px rgba(21,21,21,.11)Dark surface · pale ledge · black ambient falloff.
0 12px 0 rgba(248,250,239,.07),
0 24px 52px rgba(0,0,0,.40)Depth, motion and layer ownership
| Family | Depth | Motion | Use |
|---|---|---|---|
| Compact | 3px | 140ms | Chips and small commands |
| Control | 4px | 140–180ms | Buttons and fields |
| Action | 5px | 140–180ms | Primary commands |
| Panel | 6px | 230–260ms | Result and filter panels |
| Modal | 8–12px | 260–360ms | Dialog and persistent tray |
Persistent controls and the mobile system dock.
Menus and local popovers above persistent UI.
Modal surfaces with focus ownership.
Toast feedback above every interactive surface.
Motion lab
Replay the four production timing families. Only transform and opacity move; reduced motion keeps the state change without the travel.
260ms var(--ease-out)Component token map
Global tokens describe shared meaning; component-local tokens own measured geometry that should not leak into unrelated surfaces.
| Token | Value | Owner | Used by |
|---|---|---|---|
| --top-control-gap | 0.82rem / 0.5rem mobile | Global composition | Escape, Matcher, Theme |
| --top-control-height | var(--command-height) | Global composition | Top control row |
| --top-island-width | min(50rem, available width) | Matcher | Smart Search open/closed shell |
| --tray-compact-height | 4.12rem / 3.72rem mobile | Companion Tray | Compact and expanded clipping |
| --floating-ui-clearance | route responsive | Page composition | Tray-safe content ending |
| --persistent-bottom-offset | safe-area responsive | Floating composition | Companion Tray and Visual System index |
| --toast-stack-gap | 24px | Feedback stack | Expanded Toast cards |
| --loadout-accent | rank accent | Loadout card | Platform, HUD and glow |