Interface Intelligence

AI-powered design system co-pilot. Build components, validate consistency, and generate documentation, all grounded in your actual design system. AI should not generate from scratch. It should generate within your system.

Powered by Output.ai

Interface Intelligence is built on Output.ai, an open-source AI workflow framework by GrowthX. Each workflow uses version-controlled .prompt files with Liquid templates, Zod-validated schemas, and structured step execution, the same patterns used in production Output.ai deployments.

.prompt Files

YAML frontmatter for model config + Liquid templates for variable injection. Version-controlled and reviewable in PRs.

Zod Schemas

Every workflow input and output is typed and validated. Structured data in, structured data out. No guessing.

Token Injection

Your design tokens are injected into every prompt at runtime. The AI references your actual values, not generic ones.

Step Execution

Each workflow runs as isolated steps. In production with Output.ai, these gain Temporal orchestration, tracing, and caching.

Mirabelle Design System

Design Tokens

Components

Token Groups

WCAG Target

Token Overview

Colors15

mirabelle-ds-background

mirabelle-ds-surface

mirabelle-ds-surface-alt

mirabelle-ds-primary

mirabelle-ds-primary-hover

mirabelle-ds-primary-text

+9 more

Dark Mode8

mirabelle-ds-background-dark

mirabelle-ds-surface-dark

mirabelle-ds-surface-alt-dark

mirabelle-ds-primary-dark

mirabelle-ds-primary-hover-dark

mirabelle-ds-text-dark

+2 more

Typography16

mirabelle-ds-font-family-sans

mirabelle-ds-font-family-mono

mirabelle-ds-font-size-xs

mirabelle-ds-font-size-sm

mirabelle-ds-font-size-base

mirabelle-ds-font-size-md

+10 more

Spacing8

mirabelle-ds-space-1

mirabelle-ds-space-2

mirabelle-ds-space-3

mirabelle-ds-space-4

mirabelle-ds-space-6

mirabelle-ds-space-8

+2 more

Radius5

mirabelle-ds-radius-xs

mirabelle-ds-radius-sm

mirabelle-ds-radius-base

mirabelle-ds-radius-lg

mirabelle-ds-radius-pill

Motion5

mirabelle-ds-duration-fast

mirabelle-ds-duration-normal

mirabelle-ds-duration-slow

mirabelle-ds-ease-standard

mirabelle-ds-ease-emphasized

Workflows

Build Component

Generate a component spec grounded in your tokens, patterns, and accessibility requirements.

Validate Code

Check component code against your system for token adherence, consistency, and a11y compliance.

Generate Docs

Create comprehensive documentation with usage examples, do/don't guidelines, and a11y notes.

Components

Button3 variants

Web Component (<ds-button>). Pill-radius (ds-radius-pill), min-height 2.75rem. Primary variant uses accent color with inverse text and shadow-sm. Hover lifts 1px via translateY(-1px). Focus ring is accent at 60% mix with white, 2px solid, 2px offset. Disabled state at 0.55 opacity with cursor not-allowed.

Card2 variants

Web Component (<ds-card>). Content container using backdrop-filter blur(16px), bg-surface at 92% opacity via color-mix, border-subtle, radius-lg + 0.125rem. Elevated variant adds shadow-md. Uses slot-based composition: slot='eyebrow' (uppercase kicker, accent color, letter-spacing 0.14em), slot='title' (font-size-500, snug line-height), default slot (body, text-secondary), slot='footer' (flex row with gap-3).

Input1 variants

Web Component (<ds-input>). Min-height 3rem, radius-md, border-subtle, bg-elevated. Focus state: border color-mix(accent 48%, white), box-shadow 0 0 0 3px color-mix(accent 18%, transparent). Label is font-size-200, semibold. Helper text is font-size-200, text-secondary. Emits custom events: ds-input (on input) and ds-change (on change) with detail.value.

Badge4 variants

Web Component (<ds-badge>). Pill-shaped (ds-radius-pill), min-height 1.75rem, font-size-100, semibold, letter-spacing 0.02em. Tones use color-mix for transparent backgrounds: neutral (surface-subtle bg, text-secondary), accent (accent at 12%, accent text), success (success at 14%, success text), warning (warning at 12%, warning text). All tones include matching border at slightly higher opacity.