Design system · v1Design system · v1The AiXFreight design system: brand foundations, a component library and reusable templates — each shaped by ten laws of UX so every screen feels calm, fast and trustworthy.
Navy is the ground. AI Orange is the one signature accent — reserved for the primary action and anything the AI did. Mode colors follow industry convention and are never reassigned.
Dashed gold path = the journey. Land dot at origin, ocean dot at destination, orange ring where the AI intervened. Pills and progress rings borrow the chain-link shape from the mark.
Every component and template below was checked against these. Each card says what the law is — and the concrete rule it produced in this system.
Users spend most of their time on other products; they expect yours to work the same way.
Time to hit a target depends on its size and distance.
Decision time grows with the number and complexity of choices.
People hold about seven items in working memory.
Objects near each other are perceived as a group.
The item that differs from the rest is the one remembered.
Designs that look good are perceived as easier to use.
Productivity soars when system and user interact under 400ms.
Experiences are judged by their peak and their end.
Every system has complexity that cannot be removed — decide who carries it.
The rules that keep every screen consistent. Full specimens live in the Design System tab; prose in guidelines/.
Body text ≥ 4.5:1 (approved pairs listed). 3px orange focus ring on every control. 44px touch / 40px desktop targets. Color never the only signal. prefers-reduced-motion honored.
Hover darkens one step in 120ms; press scales .98; disabled is 45% opacity. Selection fills navy; the active item alone carries a 3px orange bar or underline.
Ease-out .2,.8,.2,1 at 120 / 200 / 320ms. Enter fades and rises 8px; exit fades only. Nothing bounces.
240 sidebar · 56 topbar · 28 gutter · 2:1 content split. ≥1280 full, 900–1279 rail, <900 stacked. Elevation ladder 0 → 200 (toast).
Skeleton for known shapes, EmptyState for zero results, Alert for recoverable errors. AI output always shows cost, impact, confidence, a “Why this” disclosure with sources and limits, then Review → Dialog → Toast with Undo → thumbs. Every AI surface is instrumented for six human metrics — learnability, trust, confidence, transparency, satisfaction, cognitive load. Rules in ai-ux.md.
Light by default, follows the system in "System", explicit via data-theme. Brand primitives never change — only semantic aliases and mode-color steps. Switch it in the header; every screen re-skins with no component changes. Rules in theming.md.
Thirty-eight primitives in six groups — core, forms, navigation, feedback, data, surfaces — rendered live from the compiled bundle. Every one ships with a props contract and a usage prompt.