Orbro — Building a design system from principles to patterns

With multiple products and external contributors, teams needed common guidelines to create a consistent experience.

I defined principles around Orbro’s product context, giving the team a shared basis for design decisions and a clear expression of its design philosophy.

I identified reusable components and defined their anatomy, variants, and states to make their roles clear.

I documented each component’s purpose, variants, and usage considerations so teams could make consistent choices in similar situations.

I standardized component structure, appearance, and states to make the interface more consistent and implementation more efficient.

I brought platform-specific fonts into a shared type system to improve readability and keep layouts stable across data-heavy screens.

I organized product colors into tonal palettes and semantic tokens that describe how each color should be used.

I worked with a brand designer on five icon categories that balance clear communication with Orbro’s visual identity.

A 4px base unit and a 16-column grid guide responsive layouts for cards, data tables, and charts.

I organized components, typography, colors, and icons into a Figma library to reduce repetitive design work.

I shared the documentation and assets with engineers, who implemented them as a reusable code library to streamline development.

Building the system deepened my understanding of how UI elements work in context. Shared standards helped the team resolve ambiguous decisions and avoid revisiting the same questions.