Detail Presentation

project

Details

Design Systme With CRM Dashboard and Website

SeloreX Design System

A scalable UI/UX design system unifying three products Website, App, and CRM Dashboard under one shared, accessible source of truth.

Senior UI/UX & Product Designer | Website · App · CRM Dashboard

Overview

SeloraX is an end-to-end UI/UX design system built to unify three connected products a marketing Website, a customer-facing App, and an internal CRM Dashboard under one shared, accessible source of truth for interface design.

It covers the full stack of a production design system: semantic color and contrast tokens, typography and logo usage, a custom icon set, and a component library buttons, inputs, dropdowns, badges, avatars, tooltips, modals, and data-visualization metric cards each built with variants, interaction states, and spacing annotations so the same components could be composed consistently across all three surfaces rather than redesigned per-product.

The problem

The Website, App, and CRM Dashboard had grown as three separate surfaces each maintaining its own buttons, inputs, and modals, built independently by whoever touched that product last.

That independence created visible drift: the same "primary button" looked and behaved differently depending on which product you were in. It slowed down shipping, made the brand feel inconsistent across touchpoints, and made accessibility hard to guarantee contrast ratios and focus states were decided ad hoc, product by product, rather than checked once at the source. SeloraX was built to fix this at the foundation level: one system, checked once, reused across all three.

Design principles

Accessible by default: Contrast-checked color pairings and clear focus/error states are built into components, not bolted on after.

Consistency at scale: Every component shares the same spacing, radius, and elevation logic, so new screens compose predictably.

Dark-mode-first: Designed natively for a dark UI surface with a violet accent system, rather than adapted after the fact.

Dev-ready, not just designer-ready: Annotated specs and named variants reduce handoff friction between design and engineering.

Foundations

Before designing a single component, I established the tokens everything else would inherit from.

Figma Source File Link

Reduce booking friction

Build visual trust

User Interface Design

CRM Design

Typography & iconography

A standardized type scale and logo lockup keep brand expression consistent across surfaces, paired with a custom icon set (plus a secondary "misc icons" set) aligned to a single grid so icons drop into components without manual resizing.

Component library

Every component was built with variants and interaction states in mind not a single static frame, but a matrix that could be dropped into the Website, App, or CRM Dashboard and still feel like the same product.

Modals: A structured header / content / footer system shown here as an invite-and-share flow with copy-link, email invite, and role-based actions built for reuse across multiple product flows rather than one screen.

Metric cards: Reusable stat components combining a headline number, trend indicator, and inline sparkline designed to drop directly into dashboard layouts.

Dev annotations: A dedicated documentation layer with spacing measurements, redlines, and interaction notes attached to each component, so engineering could implement from Figma without back-and-forth.

Outcomes & reflection

SeloraX became the single design source of truth across the Website, App, and CRM Dashboard replacing three independently-maintained UI patterns with one shared system.

How do you handle website maintenance and updates?

What strategies do you use for digital marketing?

What payment methods do you accept?!

Meeting project deadlines is a top priority. We understand the importance of timely delivery and have established a comprehensive approach to ensure that all projects.