The system behind the system.

Display tracking. Applied to the largest type on the page — hero headlines and page titles using font.display. At very large sizes, the typeface's default tracking reads as too loose; pulling it in slightly (-0.01em) restores optical density without over-tightening.

Title tracking. Applied to structural headings using font.title.large, font.title.medium, and font.title.small. Tighter tracking than display (-0.025em) helps headings read as a cohesive unit at mid-range sizes.

Body tracking. No adjustment from the typeface's built-in tracking. The default for all Spectral body text — font.body.large, font.body.medium, font.body.small. Tracking adjustments at reading sizes typically hurt legibility more than they help. Do not tighten or open body text without a specific, tested reason.

Label tracking. Slightly open tracking for small Space Grotesk UI text — navigation, button labels, captions, tag text. At small sizes (12–14px), a modest +0.03em opening improves legibility and gives the label a clean, structured feel. Use for font.label.small and font.label.medium.

All-caps tracking. Generously open tracking exclusively for text set in ALL CAPS. All-caps text at default or tight tracking reads as dense and unpolished — the wide +0.1em opening is the convention that makes it legible and intentional. Do not use at body sizes or mixed-case; it will read as broken text.

Instant feedback. The shortest transition in the system — fast enough that the change feels immediate, but present enough to avoid a jarring cut. Use for hover color changes, focus ring appearance, active/pressed state toggles, and any micro-interaction where the UI must feel truly responsive. At 120ms, the motion is felt but not consciously watched.

Standard transition. The default duration for most state changes involving layout or visibility — dropdowns opening, tooltips appearing, accordions expanding, tabs switching. Fast enough to feel snappy; slow enough for the eye to register what changed. The workhorse of the motion system.

Emphasized transition. Reserved for large, page-level motions where the movement itself carries meaning — modal entry and exit, drawer slides, full-screen overlays, page transitions. The extra time lets the user's eye track the motion deliberately. Do not apply to hover states or small component toggles — 350ms on a button hover reads as broken.

Easing for elements entering the screen or appearing. Ease-out: starts fast, decelerates to rest. The deceleration signals arrival — the element lands rather than snapping into place. Use for modals appearing, drawers sliding in, tooltips fading up, dropdowns opening.

Easing for elements leaving the screen or disappearing. Ease-in: starts slow, accelerates to exit. The acceleration signals departure — the element moves away with purpose rather than drifting off. Use for modals closing, drawers retracting, tooltips fading out, dropdowns collapsing.

Easing for elements repositioning within the viewport. Ease-in-out: accelerates then decelerates symmetrically, giving the motion a smooth arc. Use for sliding panels, tab indicator underlines moving between tabs, loading indicators traversing a track, or any element traveling from one place to another without entering or exiting.

General-purpose easing. CSS ease — a gentle acceleration and deceleration with no strong directional character. Use when the transition has no meaningful direction — opacity fades, color shifts, scale pulses. Falls back gracefully for any motion where enter/exit/move semantics don't clearly apply.

Micro-interaction transition. The fastest composite in the system, with directionless easing. Use for property changes that should feel instantaneous but not jarring: hover color shifts, focus ring fade-in, active/pressed background flips, checkbox tick reveals, link underline color swaps. Do not use for any motion that involves layout, size, or position change — at 120ms those read as twitchy.

Standard component transition. The workhorse composite — pair with most state changes that involve visibility or layout: dropdown menus opening, tooltips appearing, accordions expanding, tabs switching, popovers fading in. Directionless easing keeps the motion neutral so the same token can run both directions without feeling lopsided. If the element is *clearly* entering or exiting and you want to underscore that, reach for motion.easing.enter or motion.easing.exit on a custom transition instead.

Emphasized transition for layer-shifting motion. Reserved for full-screen or near-full-screen movement where the motion itself is part of the meaning: modal entry and exit, drawer slides, full-page sheet reveals, route-level transitions. The 350ms duration gives the eye time to follow; the symmetric in-out easing reads as a deliberate slide rather than an entrance or exit, which keeps the same token usable both ways. Do not apply to small components — emphasized timing on a hover or a dropdown feels broken and slow.

Repositioning transition. Standard duration paired with symmetric in-out easing — the right combination for elements that travel from one position to another within the viewport without entering or exiting. Use for tab indicator underlines sliding between tabs, segmented control thumbs, accordion content shifting siblings, drag-and-drop snap, sticky header offset changes. The arc-shaped easing gives the motion a sense of weight and direction that linear or ease-out would flatten.

No shadow. The element sits flush with its background — zero elevation cue. Use when depth is communicated by background color (color.background.alt) rather than shadow, or when the component is intentionally part of the surface rather than floating above it. Code blocks, data tables, inline elements.

Raised elevation. Minimal lift — just enough to separate an element from its parent surface without creating strong depth. The element reads as slightly above the canvas but still close to it. Use for inputs on hover or focus, inline dropdowns, subtle interactive feedback. On a dark background, this shadow is nearly imperceptible at rest — which is correct.

Overlay elevation. Strong depth cue — the element is clearly floating above the page layer. Use for context menus, popover panels, dropdown lists, and any element that temporarily overlays content without dimming the background. The jump from raised to overlay is intentionally large: there is no 'card' shadow in this system — cards use background.alt for separation instead.

Dialog elevation. The maximum shadow in the system — reserved for components that must read as the highest layer regardless of page context: modals, full-screen drawers, bottom sheets, and toast notifications. The strong shadow (0 12px 40px) grounds a floating dialog against an already-dark background. Do not apply to cards, panels, or overlays — it will feel overblown.

Compact icon. 16px — use in dense UI contexts: input adornments, tag/chip icons, tight toolbar rows. The smallest interactive icon size.

Default icon. 20px — the standard icon size for most UI contexts: nav items, button icons, list row glyphs, form icons. When in doubt, use this.

Large icon. 24px — for icons that anchor a UI region: section headers, standalone icon buttons, prominent action icons.

Extra-large icon. 32px — reserved for empty states, onboarding illustrations, and feature highlight graphics. Never inline with text.