A unified design system built for Elnusa Group to support multiple enterprise-level applications across web and mobile platforms. This system standardizes UI components, reduces inconsistencies, and accelerates development by combining customized shadcn components with a tailored design token system.

Project Overview

Elnusa Group was initiating a major tech evolution: migrating from Vue 2 to Vue 3 across a suite of enterprise web and mobile applications. During early audits, we found UI inconsistencies and redundant patterns that hindered both design clarity and development speed. The existing component implementation was fragmented across multiple products, slowing down UI cohesion and future scalability.

To address this, I designed a unified system built on shadcn components and enhanced with custom design tokens — clean, scalable, and ready for long-term adoption across subsidiaries.

This system was created to:

• Support the Vue 3 migration with a consistent UI foundation

• Standardize UI patterns for enterprise use

• Enable faster design-to-development flow

• Provide both Light and Dark mode themes for flexible usage

Design Principles (Just Like the Best Systems Do)

1 — Scalable Foundations

We defined a semantic color system, typography scales, spacing, and layout rules that are usable across web and mobile enterprise UIs.

2 — Token-Driven Theme Architecture

Design tokens allow effortless theme switching (light ↔ dark) while preserving visual hierarchy and accessibility standards. Light and dark palettes were crafted to maintain contrast and readability in every mode.

3 — Reusable Component Library

Over 48+ reusable UI components were built using shadcn as the base, fully customized for the Elnusa Group’s brand and enterprise UX needs. Each component includes multiple states, responsive behavior, and theme adaptability.

Light & Dark Mode

A key feature of the system is built-in theming. Just like modern professional design systems, ours delivers consistent visual logic across both light and dark mode contexts.

• Light Mode: crisp, corporate-friendly contrast for productivity

• Dark Mode: high legibility & comfort for dashboard-heavy workflows

Both themes share a unified token structure so switching modes does not break visual hierarchy or component behavior — a hallmark of robust design systems.

Color System & Tokens

Rather than endless brand shade variations, the color system uses semantic and intent-based tokens that are easy to apply and scale for complex interfaces. This makes the system intuitive for designers and developers alike.

Tokens were named based on their usage context (not just hue), ensuring consistency and clarity across screens.

Component Logic & Interaction States

Every major component — from buttons to dropdowns — includes interaction states (hover, focus, active), enabling seamless prototyping and real-user simulations.

Rather than creating separate color variants for each state, we used overlay-based state layers for consistent behavior across themes.

Implementation & Collaboration

Working closely with UI/UX designers and front-end developers, the system was:

• Built to integrate with Vue 3 + shadcn stack

• Documented for clear usage and implementation

• Structured to support multi-product adoption across the entire Elnusa Group

This collaboration ensured that design decisions were technically feasible and easily consumed by engineering teams.