Citibanamex BlueBox

A design language system created to unify Citibanamex visual identity across channels, teams, and digital product platforms.

Role: UI Designer and design system lead contributor
Focus: Multichannel identity, components, documentation, adoption
Skills: Visual design, component validation, team coordination, UI consistency

Citibanamex BlueBox design language system cover with component specifications

Context

A living design system for faster, more consistent digital products.

BlueBox was created as the design system for Citibanamex, giving digital product teams a shared foundation to create and ship interfaces faster, more consistently, and with clearer brand alignment.

My work focused on building the system from its early stages: defining atomic components, designing the documentation website, validating use cases, and helping teams understand how to apply the system across web, app, marketing, email, and communication touchpoints.

Contribution

From system foundation to cross-team adoption.

System foundation

Created the base of a design system planned to unify Citibanamex visual identity across channels, products, and teams.

Use-case validation

Validated component behavior against real product needs so patterns could work beyond isolated interface examples.

Documentation website

Designed the BlueBox website as a source of truth for designers, developers, and teams using brand and interface elements.

Team coordination

Coordinated app, web, marketing, email, and communication teams through joint sessions to define components and support adoption.

System evidence

Documentation and component maps that turned brand rules into usable product guidance.

Documentation website direction for designers and developers, organizing brand rules, navigation, header behavior, illustration guidance, and logo specifications.

Citibanamex BlueBox component map with colors, logos, buttons, cards, progress bars, headers, and footer specifications — Component map created to align colors, logos, buttons, cards, progress indicators, headers, and footer patterns across multiple digital product teams.

Outcome

A shared reference for consistent digital product delivery.

The work helped move repeated UI decisions into a shared system, making visual and interaction patterns easier to reuse across products and teams.

Beyond the interface artifacts, the project required alignment, guidance, and adoption support so BlueBox could behave as a living design system rather than a static brand document.

Next project Interbanking Transferencias 2.0 Transactional UI, transfer states, authorization details, and design-system based screens. Like what you see? Let’s work together Reach out for UI, product, or enterprise web opportunities.