Axon Design System adds 'Arranger', an AI layout engine for responsive components

Design · 4 min read

Arranger analyzes a component's structure, tokens, and constraints, then generates size, spacing, and content-aware variants for different breakpoints. It also produces a set of recommended breakpoints based on content density and interaction patterns observed in a product's screens.

Designers can accept Arranger's suggestions or edit rules with a visual interface; Axon stores variant rules as code-friendly manifests so engineering stacks can consume them with minimal translation. The company claims faster cross-platform parity between mobile and web, reducing the manual work of creating separate layout variants.

Arranger includes a verification pass that runs simulated content through each layout and flags overflow, clipping, or misaligned anchors, helping teams catch layout regressions before QA. Axon will offer a cloud service for teams that want continuous layout checks against evolving content.