Leia 3D
Design System

Building foundational design infrastructure for the world's first AI powered 3D Lightfield tablet.

Case Study

My role

Built a complete 0→1 design system for AI powered 3D Lightfield displays, including depth-aware component patterns, navigation systems, and media controls. Developed brand systems spanning logo refinements, app icons, and semantic color tokenization.

Component Library
Design Tokens
Figma
Android
Cross-functional collaboration
Technical documentation
Brand identity
Iconography
Typography

Leia's AI powered 3D display technology is groundbreaking, but their product ecosystem grew inconsistently. Apps built in silos looked and behaved differently, creating friction for users and inefficiency for teams. I built the design system that unified their visual language and established reusable patterns across their suite of apps in time for the Lume Pad 2 launch.

Brand Systems

As a part of the push for consistency with the design system, I led a brand refresh to unify Leia's visual identity across all public touchpoints.

Logo refinements improved optical balance, custom product wordmarks established consistent proportions, and a consolidated color palette created cohesion between brand and product. This work ensured customers experienced one unified Leia, whether viewing marketing materials or using the actual products.

Redesigned app icon family to clearly communicate app contents and achieve visual unity as a set. Each icon followed consistent construction principles while remaining functionally distinct.

LeiaPlayer app icon with media playback symbolism incorporating 3D depth elements and Leia's signature gradient system

Design Foundation

Established core design language for Leia's Android tablet ecosystem. I defined the grid system, color tokenization, typography scales, and iconography that extended Material Design conventions to address Leia's technical requirements. These foundational elements ensured visual consistency while accounting for how 3D content affects contrast and readability.

Leia design system color palette showing primary, secondary, and semantic color values with hex codes and usage guidelines

Typography specifications showing font families, sizes, weights, and baseline grid system for Leia's design language

Component Architecture

Built comprehensive component library addressing Leia's technical constraints. Buttons and controls required higher contrast ratios to perform best on the Lightfield display. Navigation was optimized for landscape tablets, and media controls became modular for different viewing contexts.

Complete Leia design system overview displaying component library including buttons, navigation elements, media controls, and UI patterns for 3D interfaces

Established depth-based layering system where background shades indicate hierarchy. This approach gave designers a clear mental model for building interfaces that felt cohesive alongside 3D content.

Color application examples showing various background treatments and layering techniques optimized for 3D Lightfield displays

Adoption Strategy

Drove adoption through phased app-by-app implementation. Held individual working sessions with designers to better understand component usage and gave them direct input on system improvements. Collaborated with engineering teams to maintain design-code parity, and presented regularly to stakeholders to keep product, engineering, and leadership aligned.

LeiaFlix streaming app interface showcasing content browsing experience with 3D media thumbnails and navigation optimized for landscape tablet viewing

LeiaLink screen mirroring app interface demonstrating wireless connectivity features with clear visual hierarchy and 3D-optimized controls

Modular media player overlay UI component assembly showing playback controls, progress bars, and interactive elements with appropriate scale and contrast for 3D viewing

Leia Camera app interface featuring intuitive capture controls and real-time 3D preview with depth adjustment settings

System Deliverables

Buttons & ControlsUnified component variations with depth-adjusted contrast
Form ElementsInput fields, toggles, and pickers optimized for tablet interaction
NavigationSidebar architecture for landscape tablets
3D Media ControlsModular system scaled for Lightfield viewing
TypographyBaseline grid system across depth planes
IconsExtended icon library with consistent construction rules
DocumentationTechnical implementation guidelines

Brand Elements

Refined logos, custom product wordmarks with consistent stroke weights, consolidated color palette using semantic variables integrated with Material Design.

Visual Language

Prism gradient motif, device animations, wallpapers creating cohesive branded experience across the product ecosystem.

Leia device wallpaper design featuring Cinema4D-inspired prismatic gradients representing the company's optical Lightfield technology

Abstract wallpaper showcasing Leia's gradient system with dynamic depth and color transitions optimized for 3D display technology

The design system enabled Leia to ship a cohesive product ecosystem for the Lume Pad 2 launch. Within six months, cross-functional adoption was achieved and design-to-development time reduced by an estimated 75% as teams stopped rebuilding components from scratch. Elements of the brand system continue to influence the company's visual identity as it has evolved.