ePlanet Design System

The Problem

ePlanet Brokers was scaling across a trading platform, mobile surfaces, CRM workflows, marketing pages, and AI-powered internal tools. Each surface had grown with its own visual decisions, which made shipping slower and made product quality harder to protect.

The goal was not to create a pretty Figma library. The goal was to create a shared product language: tokens, interaction patterns, dashboard components, financial states, and documentation that engineering could actually use.

What I Built

I audited the existing product surfaces, grouped recurring interface patterns, and rebuilt the system around reusable foundations: color roles, type scale, spacing, status language, cards, tables, forms, navigation, empty states, loading states, and AI response patterns.

The system was designed for financial workflows where trust matters. That meant clear hierarchy, visible source states, predictable actions, and components that could carry dense data without becoming visually noisy.

Design Decisions

• Tokens were named by product role, not by visual taste, so teams could adapt the system without guessing.
• Dashboard components were built around scanning, comparison, and repeated action rather than decorative layouts.
• AI-specific patterns included citations, uncertainty states, human escalation, and review queues.
• Documentation stayed close to the components so designers and engineers could make the same decision twice.

Outcome

The system gave product, marketing, and engineering a shared base for shipping faster without visual drift. It also created a stronger foundation for the AI products around ePlanet: the assistant, content workflows, onboarding automation, and internal operations tools could all feel like one coherent platform.