AXL is a consumer-grade, brand-flexible design system for agent builders. Default to beautiful — override to be unmistakably yours.
AXL is opinionated about what stays consistent — and ruthlessly flexible about everything else. These principles are the floor. Brands build on top.
Out-of-the-box widgets feel like Apple or Linear — not enterprise. Beauty is the floor, not the upgrade.
Disney, Williams-Sonoma, Coca-Cola — every customer's brand expresses fully. Six inputs, infinite outcomes.
The system encodes "feel" into tokens. Builders pick a vibe; the system propagates it consistently.
Atomic elements → components → widgets → templates. Everything scales upward cleanly across all surfaces.
WCAG AA is non-negotiable. The system blocks any brand combination that breaks contrast or motion safety.
Visual + AI-assisted side-by-side. Type a prompt, drag a widget, override a token — it all converges.
Three panels. Left: Brand Inputs (the six knobs that control everything). Center: Canvas. Right: AI prompt + Inspector. Hybrid editing — visual + AI-assisted — converges here.
The default AXL palette is warm, optimistic, consumer-friendly — inspired by Apple. Brands swap any of it. The system maintains contrast, derivation, and accessibility automatically.
A two-typeface default — modern sans for clarity, italic serif for warmth and brand moments. Both override-able via the Brand Input panel.
Every AXL widget composes from these twelve atomic primitives. Each one ships with brand-tokenized styling, built-in accessibility, and the full state coverage builders need.
display · heading · body · caption · currency · data · date · link-inline. Tabular numerals for currency & data. Brand font & size scale flow from tokens.
inline · standalone · brand-accent · external. Underlined by default for accessibility (never color-only).
primary · secondary · accent · ghost · danger. Sizes: sm/md/lg. States: hover, focus, pressed, disabled, loading. Min 44px tap target.
simple · icon-list · nav · checklist. Supports virtualization for >100 items. Keyboard navigation built-in.
text · email · password · number · search · textarea. States: default, focus, error, disabled, loading. Pill border-radius scales with brand input.
single · multi · combobox · command. Built on a single popover primitive. Keyboard-accessible with type-ahead search.
date · date-range · time · datetime. Locale-aware. Keyboard nav (arrows, page-up/down). Min size 320px on mobile.
checkbox, checkbox-indeterminate, radio, radio-group, switch. Hit area exceeds visual size to meet 44px target.
success · warning · error · info · neutral. Always pairs color with text/icon for a11y. Pill radius adapts to brand corner-radius input.
square · landscape · portrait · circle. Lazy-load by default. Required alt attribute. Skeleton placeholder while loading.
xs · sm · md · lg. Variants: image · initials · icon · stack. Auto-derives gradient from name hash.
single · multi. Auto-collapse with smooth motion. ARIA-compliant aria-expanded & aria-controls.
The same hero widget reskinned via the six brand inputs. Notice: typography, color, radius, motion personality, and even the button shape adapt — but the underlying component is identical.
A new family adventure every week.
Our copper collection, est. 1956.
Refresh the moment.
Motion encodes brand personality. Pick one of three profiles in the Brand Input panel — every animation in the system inherits.