Improving the Design system's colors to reduce visual fatigue for users working long hours.
Jibit-Pixel
The JIBit Merchant Panel, a core platform for merchants and internal teams, originally lacked dark mode and had an outdated, rigid design system. This project introduced dark theme support while overhauling the design system to include scalable color tokens, variables, and foundational components—enabling theming across the entire JIBit product ecosystem.
Problem Statement
- The lack of dark mode led to eye strain for users in low-light environments.
- The legacy design system had no color tokens, variables, or modular components—making theming nearly impossible.
Compared to competitors, JIBit’s UI lacked modern visual flexibility.
Goals
- User Comfort: Reduce visual fatigue for users working long hours.
- System Readiness: Build a token-based, scalable design system starting with dark mode.
- Consistency: Align visual tone across both themes while preserving brand integrity.
Research & Audit
We conducted a full design audit of the current Merchant Panel:
Identified gaps: Components were inconsistently defined and lacked semantic styling.
Reviewed implementations from modern fintech platforms (e.g., Stripe or Revolut) and top design systems or UI libraries (e.g., Material Design 3, Ant Design System or ShadCN) to benchmark design tone and UX best practices.
Mapped out all UI layers requiring dark-mode adaptation: tables, buttons, forms, modals, etc.
Key Considerations
- Avoid pure black: Used deep neutrals and layered tones for more visual depth. (neutral, slate, gray & stone)
- Preserve clarity: Ensured focus states, hover interactions, and elevation cues remained clear in dark mode.
Design
1. Rebuilding the Color System
We created a full dark color palette based on deep neutrals and brand accents. Instead of hardcoded colors, we shifted to semantic tokens such as:
bg-secondary-solid , text-quinary_on-brand, border-quaternary_hover, fg-brand_secondary
These tokens became the foundation for theme switching and allowed developers to implement consistent visual logic across themes.
2. System Component Cleanup
The previous design system lacked clear definitions for basic components like inputs, buttons, and tables. We did:
Standardized component anatomy
Created (or updated in some cases) light variants and documented a dark mode token for each one
Used token-driven styling for backgrounds, borders, and text
Ensured reusability across JIBit’s products and other projects
3. UI Improvements for Dark Mode
We optimized dense UI components for dark environments:
- Alternating row shading in tables for better scannability
- Layered modals and tooltips with proper background contrast
- Accessible forms with clear focus and error states
Collaboration & Handoff
Throughout the project, we worked closely with the front-end team:
- Shared updated Figma library with tokenized components
- Provided implementation documentation including contrast ratios and color logic
- QA’d early builds and flagged edge cases
- Hosted walkthroughs to ensure proper design-to-dev alignment
Outcomes
Dark mode launched successfully across the Merchant Panel
✅ No major visual regressions post-release
✅ Reduced user fatigue for long-hour workflows
✅ New token-based design system adopted by teams
✅ More efficient collaboration between design and front-end
Learnings
Starting with semantic tokens made the theming effort scalable and maintainable
The smallest visual details—like elevation and border tone—had a large impact on perceived polish
Testing in real use environments helped surface edge cases missed in Figma or staging
Final Thoughts
This project was more than a visual feature—it marked a fundamental upgrade to JIBit’s design system and product infrastructure. By introducing semantic tokens, improving core components, and delivering dark mode in a dense B2B product, we created a foundation for better accessibility, brand flexibility, and long-term maintainability.