Component Design System

Architecture patterns for building a consistent component library where Phoenix function components and Svelte 5 components live side by side, sharing visual language through a unified Tailwind design token system.

When You Need This Skill

You're working in a stack where Phoenix LiveView renders most of the UI via HEEx templates and function components, but islands of interactivity are handled by Svelte 5 components (mounted via LiveSvelte). The challenge: both sides need to produce visually identical output from a single source of truth for colors, spacing, typography, and component structure.

Core Architecture

The system has three layers: