Distribution
This app is the source of truth. A change made here — a new motion, a recoloured token, a promoted component — ships to every krownmanager.com application through the versioned export endpoints below. Consumers never hand-copy values; they pull.
Export endpoints
Three feeds, all generated from the same registry that renders this documentation. Every response carries an x-km-design-version header.
| Endpoint | Content | For |
|---|---|---|
/api/tokens.css | The full custom-property stylesheet, including the Fast/Calm pace blocks. | Link directly or vendor at build time — instant theming for any web app. |
/api/tokens.json | Tokens as structured data — name, value, group, description, pace overrides. | Build pipelines: Tailwind config, style-dictionary, native platforms. |
/api/registry.json | The complete registry — tokens, component manifests, motion behaviours, the entire icon set, changelog. | The sync feed for consumer codebases. |
How consumers stay in sync
dealer.krownmanager.com and marketing.krownmanager.com build on this system. Two integration modes, by how much control the consumer wants.
Live link (zero-touch)
The consumer links the stylesheet straight from this host:
<link rel="stylesheet" href="https://design.krownmanager.com/api/tokens.css">
Publishing here updates every linked app within the cache window (5 minutes) — no consumer deploy needed. Right for token-only changes: colour, spacing, motion timing.
Vendored sync (reviewed)
The consumer's CI fetches /api/registry.json, diffs it against
the vendored copy, and opens a pull request regenerating local artifacts (tokens file,
icon set, class manifest). The version header makes the diff legible; the changelog
explains it.
Right for structural changes — new components, renamed tokens — where the consuming codebase needs a code change and a review alongside the new values.
Versioning contract. Patch = value tweaks, safe to auto-take. Minor = additions (new tokens, icons, components) — safe, but consumers should wire the new pieces. Major = renames or removals — consumers must migrate; the changelog lists every breaking entry. The audit on this side keeps removals honest: nothing is deleted while still in use here, and consumer builds fail loudly on missing custom properties.
Changelog
Every published version, newest first. The same data ships inside /api/registry.json.
- Motion Lab evaluation COMPLETE. Final promotions: shared surface morph and snap-into-place reorder. 26 core behaviours, 0 pending; magnetic buttons and blanket press coverage stand retired (now a documented ledger — RETIRED_BEHAVIORS in the registry and feed).
- Every behaviour integrated into a real home: Overview gained the system-pulse hero (tilt + glow + rolling registry counters); Elements demos icon micro-motions on buttons; Objects/Pages workload metrics roll in and fill with sheen; Pages review cards lift; Components gained five sections — shared surface morph, reorderable widgets, loading states, AI generation, completion celebration — plus the ambient empty state; Dialogs gained the parallax drawer and spatial depth.
- New reusable primitives: growFrom/shrinkTo/fadeIn ($lib/motion/morph) and createSnapDrag ($lib/motion/snap) — the morph and drag choreographies as library code for consumer apps.
- Motion Lab reset to all-clear: forwarding addresses for every behaviour, the retired ledger, and the process for staging the next batch.
- Card lift: phantom-hover guard. When a collapsing surface leaves the cursor resting over an unrelated card, that card no longer lifts — hover is muted (.km-hover-muted) until the pointer actually moves, and the just-viewed card carries the lift (.km-lift--active) so attention returns to where the viewer’s mind already is. (Browsers cannot move the cursor; this delivers the intent the honest way.)
- Motion Lab review round 4 (Mark): PROMOTED to core — icon micro-motions (hover previews, event plays in full; every glyph owns one move).
- Shared-layout morph collapse re-choreographed: the PANEL itself shrinks back into the card’s slot (content fading out over the first third); the small card’s display only appears once the surface has arrived at small size. The returning type never balloons.
- Snap-into-place drag made foolproof: drag listeners moved to the window — reordering moves the row’s DOM node, which silently released pointer capture and could strand the row mid-air. Release now always lands; window blur is a safety net.
- Motion Lab review round 3 (Mark): the settled rule — PRESS DIPS, SELECTION SLIDES. Buttons and interactive cards keep the original V1 buttery press, unchanged. Choosing between options is never a press: the sliding marker carries the change.
- RETIRED the press-coverage extension (facet/tab/nav active scaling, whole-frame toggle dip, tonal option presses) and the harder-edged .km-toggle itself.
- NEW: .km-seg--ink — the view-toggle voice. The black portion is now the thumb, gliding from Table to Cards and back on the same recipe as the tab underline; the selected label turns white as the thumb arrives. All view toggles ride it.
- Motion Lab review round 2 (Mark): PROMOTED to core — 3D tilt (pairs with cursor glow on hero surfaces), spatial modal (2% recede), ambient empty state.
- Press physics: contained controls (view toggle, segmented control) now press as ONE OBJECT — the whole frame dips like a card while the chosen option shades. As noticeable as any press, and a fill can never break its boundary.
- Icon micro-motions: one grammar everywhere — HOVER previews every glyph’s move (bell swings, refresh half-turns, trash leans, upload rises, accordion caret nudges toward where it will go); the glyph’s own event plays it in full.
- Shared-layout morph rebuilt as a TRUE FLIP: one continuous element grows from the card’s exact footprint to the detail panel on the new --dur-grow token (1100ms smooth / 420 fast / 1700 calm) — the boundary is visible the whole way; content fades in after the surface lands.
- Snap-into-place drag: direct index targeting (fast multi-slot drags land in one splice, no chained swaps), quicker neighbour give-way. No more mid-drag sticking.
- Motion Lab review round 1 (Mark): PROMOTED to core — card lift, cursor-follow glow (now glass-harmonised: glass-hi core blending to brand tone), drawer parallax, status celebration, AI generation motion, command palette (now global — ⌘K anywhere, navigation + pace commands).
- RETIRED — magnetic buttons (effect, action, classes and registry entry removed).
- TUNED, still in lab — 3D tilt strengthened to ±4.5° + hover shadow; spatial modal recede deepened to 2%; shared-layout morph slowed to --dur-curve so the edges visibly travel; snap-into-place drag smoothed (dragged item exempt from FLIP); ambient empty state amplified (visible drift + ok-green ping dot); icon micro-motions unified — one grammar, custom accent per glyph (bell swing, refresh spin, trash lean, upload hop).
- Press physics rule amended: options contained in a shared frame (view toggle, segmented control) press tonally instead of scaling, so a fill never breaks its boundary. Value roll now lands the moment the remainder falls under half a digit — no stopped-then-flips-once tail.
- Motion Lab: sixteen staged behaviours from the game-like-but-quiet brainstorm — card lift, magnetic buttons, route transitions, shared-layout morph, 3D tilt, meter inertia + sheen, depth skeletons, command-palette spawn, drawer parallax, status celebrations, cursor-follow glow, icon micro-motions, spatial modals, ambient empty states, AI generation motion, snap-into-place reordering. Each carries a stage (core/lab) and a usage contract; evaluate at /motion-lab.
- New primitives: magnetic/tilt/glow actions, Drawer, CommandPalette, Meter, CountUp, Skeleton, CheckDraw components; press physics extended to facets, toggles, tabs and nav items.
- Route transitions ride the View Transitions API with system tokens; the no-blurred-scrim and brand-tones-only laws hold across all new effects.
- Re-architected as a SvelteKit application — the system is now data first: tokens, icons, components and motion are a typed registry from which the CSS, the docs, the audit and the distribution endpoints are generated.
- Doc shell (nav, labels, hover and selection states) rebuilt from the system’s own tokens — removed all hardcoded chrome colours.
- New tokens: border widths (--border-w, --border-w-hairline, --border-w-focus), z-index scale (--z-shell, --z-pop, --z-overlay, --z-toast), micro spacing (--space-05, --space-15), on-dark additions (--ondark-ink-mute, --ondark-active), glass input/inset tokens promoted from dialog one-offs.
- Retired the V1 highlight-options token fork — V2 is the single design language.
- Archived shipped explorations (black action, orange & mic, live tile fill, status outline, typography options).
- V1 draft built in Claude Design AI (Claude Opus 4.8). Reviews module promoted to core with all ten edge cases resolved.