Konfío Design System

The Konfío DS reduced visual inconsistencies across the ecosystem and accelerated time to market for new products. By adopting Material UI as a base framework and structuring the foundations into Brand basics and Layout basics, any visual adjustment propagated transparently across all components. The reusable web and app templates eliminated redundancy and streamlined the integration of new companies and brands into the Konfío ecosystem.

Konfío lacked a unified design language. Each product team built UI independently, creating inconsistency across touchpoints and slowing down design and development cycles.

We started with an organize-and-evaluate exercise: catalogued every visual element across the ecosystem — colors, typography, icons, components — capturing examples across platforms and devices. Reviewing the full inventory made it clear the products were disconnected, with no visible patterns and significant inconsistencies. To define the system's principles, we benchmarked reference systems like Google's Material Design and IBM's Carbon, and ran co-creation workshops with cross-functional teams (designers, developers, PMs) using design thinking and dot voting to align on the system's core values.

Built a design system from scratch: brand foundations, design principles, a token system, and a component library covering foundations, patterns, and templates. Material Design was used as a reference baseline.