Hangar Design System
Building the design system backbone for the largest airline in Latin America
Scaling UI consistency across 50+ teams
LATAM Airlines operates at a scale few frontend organizations face: dozens of independent product teams, two primary platforms (web and mobile), and a passenger base in the millions across Latin America and Europe. Before Hangar, each team maintained its own component library, leading to inconsistent UX, duplicated engineering effort, and slow iteration cycles.
The mandate was clear but technically complex: design and build a unified design system that 50+ teams could adopt without sacrificing their autonomy, while ensuring accessibility, performance, and brand consistency at every touchpoint.
Tokens, components, and pipelines
Design tokens
A structured token layer — covering color, typography, spacing, motion, and elevation — served as the single source of truth shared between design (Figma) and engineering. Tokens were versioned and distributed as NPM packages, enabling teams to upgrade incrementally.
Component library
Cross-platform components built for React (web) and React Native (mobile) covered the full UI spectrum: forms, navigation, data display, feedback, and layout primitives. Each component was documented in Storybook with accessibility annotations and usage guidelines.
CI/CD and distribution
GitLab CI pipelines handled automated testing, visual regression checks, semantic versioning, and NPM publishing on every merge to main. Terraform Cloud managed the GCP infrastructure backing internal tooling and the Storybook instance.
MCPs and Skills: making the DS agent-native
Beyond the component library itself, I designed and built Model Context Protocol (MCP) servers and Claude Skills that allowed product teams — and AI coding agents — to consume Hangar directly from their development environment. Engineers could query component APIs, get usage examples, and scaffold compliant UIs without leaving their editor.
This made Hangar one of the first design systems in the region explicitly architected for AI-assisted development workflows, reducing onboarding friction for new teams and accelerating adoption.
Metrics and outcomes
- Adoption
- [METRIC: number of active teams using Hangar at close]
- Delivery velocity
- [METRIC: reduction in UI feature development time]
- Accessibility
- [METRIC: percentage of components with WCAG AA coverage]
- Reach
- Components shipped to products touching millions of passengers across 10+ countries.