The design system backbone for AI design
From tokens to production frames, Trio injects your full design system — colors, typography, spacing, radius, shadows, and 105 component specs — directly into the AI's context. Every element built to spec, not guesswork.
Minimal precision, built for modern UI
56 fully specified components with Tailwind-first tokens. Subtle borders over shadows. Every spec enforced by AI — not referenced from a docs page.
14 semantic colors
background, foreground, primary, secondary, muted, accent, destructive, border, input, ring, card, popover — light and dark mode pairs. Auto-bound to Figma variables.
4px base unit grid
16-step spacing scale from 0 to 80px. Radius tokens: none (0), sm (6), md (8), lg (10), xl (16), full (9999). Consistent across every component.
Inter type scale
7 defined levels — h1 (36/800), h2 (30/700), h3 (24/600), p (16/400), sm (14/400), button (14/500), label (14/500). Loaded via smart font fallback chain.
Figma-specific build rules
Buttons: 36px height, 8px radius, 16px padding. Inputs: 1px border, 8px radius, 16px padding, 36px height. Prefer subtle 1px borders over shadows. AI reads these before building.
Scale without compromise
49 components built for data-heavy, interaction-rich interfaces. No gaps in your spec sheet.
9 components shadcn doesn’t have
color-picker, fancy-button, file-upload, digit-input, rating, data-table, avatar-group, segmented-control, status-badge — complex patterns that the AI builds from full spec, not improvisation.
Rich interaction patterns
Button groups, compact buttons, link buttons, tag inputs, progress circles, banners, notifications, modals, hints — every data-heavy UI pattern has a dedicated spec with variants, sizes, anatomy, and states.
Same AI, deeper specs
49 component specs — each with dedicated variants, sizes, anatomy, and states. More interaction-rich patterns means fewer prompts where the AI has to improvise.