A Unified Design System for Elixir & LiveView Native
Station UI is the first open-source component library and design system built specifically for Elixir and LiveView Native. By creating a single "hub" where cross-functional teams align, we bridged the gap between Figma and code, reducing client design system setup times from 2–4 weeks down to just 2–4 days.
The Challenge
Elixir and LiveView Native are powerful technologies for building real-time, cross-platform applications. However, the ecosystem lacked a robust, drop-in frontend component library. Product teams were forced to build basic UI elements from scratch for every single client project, delaying MVP launches and wasting critical budget.
Role
Product Designer
Impact
85%+ faster client project setup time.
The Strategy
A deep understanding of our tech stack was critical. Phoenix LiveView operates on a server-driven UI architecture, meaning interface logic and state management are heavily influenced by the backend machinery. To support this reality, the design team engineered a Compatibility Layer. Station UI was designed to meticulously map over and seamlessly replace standard Phoenix Core Components. By sharing the exact same code names, attributes, and structural logic as the native defaults, engineers could drop our reusable components into an existing project. This upgraded the visual design, responsive layouts, and accessibility features instantly without breaking a single line of backend code or fighting against platform constraints.
Key Product Pillars
Atomic Hierarchy: Built with foundational tokens that look great out of the box, but remain infinitely customizable for different brand identities. Compatibility Layer: Designed to replace standard Phoenix Core Components seamlessly without breaking existing backend logic.
The Component and Styling System
We built a modular, highly customizable UI system by pairing atomic design principles with centralized styling tokens, designed out of the box with native iOS and Android UX best practices. Atomic Components The ecosystem is broken down into foundational elements to ensure modularity. Every component features strict interaction states (Default, Hover, Active, Disabled) perfectly mapped to Elixir's logic. Atoms: Buttons, icons, and inputs. Molecules: Search fields and filter groups. Organisms: Complex dashboards and side panels. Token-Based Styling Instead of hardcoding visual styles, we use design tokens for color, typography, spacing, and elevation. Because Station UI is client-facing, this setup allows for instant theming. By changing just a few core variables, the entire system immediately adapts to a new brand identity
Adaptive UX & Interaction Patterns
We designed interaction patterns that intelligently adapted to device capabilities rather than simply resizing static layouts. Our catalog of complex features included mapped-out responsive behaviors, ensuring interactions gracefully degrade based on the viewport. For example, a complex "drag-and-drop" file upload interaction on desktop dynamically translates into a native "tap-to-upload" pattern on touch devices.
Cross-Functional Engineering Collaboration
Scalable UX depends heavily on engineering collaboration. I worked weekly with 6 Elixir engineers to ensure the design system aligned perfectly with implementation realities. This included: Defining predictable component APIs and Tailwind naming conventions. Reviewing edge cases for dynamic, server-rendered data. Validating accessibility behavior across all interactive states. Prioritizing a shared vocabulary to eliminate translation errors between Figma and code.
Real-World Impact
Station UI functioned exactly as intended: design as infrastructure. By aligning technology and terminology, we achieved: 85%+ Faster Feature Delivery: Reduced client project setup time from 2–4 weeks to just 2–4 days (validation proven during the Prowler SaaS cloud security redesign). Increased Developer Velocity: Reduced duplicated engineering effort by providing a drop-in component catalog. Massive Community Adoption: Reached over 1,000+ users in the Figma Community, validating the market need for a robust Elixir UI system. Default Compliance: Simplified onboarding and increased accessibility compliance across all company projects.
