Nobitex: Design System Version 1

Building Order from Chaos: The Nobitex Design System Story

At first glance, Nobitex's design challenge seemed straightforward: Iran's leading crypto exchange, serving over 5 million users, needed a design system. But beneath this simple request lay a complex web of challenges that had evolved with the platform's rapid growth.

The State of Design:

When I joined, I found a design environment that reflected the platform's rapid scaling:

Seven designers working independently
Inconsistent design languages across platforms
No unified design direction
Legacy features with outdated styling
Scattered, unorganized design files

Key Challenges:

Design Fragmentation
- Multiple designers creating divergent styles
- Inconsistency between web and mobile platforms
- No shared component library
- Different approaches to similar problems
File Management Chaos
- No standardized file organization
- Difficult feature location
- Missing historical design files
- Scattered documentation
Legacy System Issues
- Outdated design patterns
- Missing source files
- Inconsistent user experiences
- Unknown design decisions
Previous Attempts The existing style guide was:
- Limited in scope
- Missing modern Figma features
- Not aligned with current needs
- Inadequately documented

The Director's mandate was clear: bring order to this design chaos while maintaining the platform's momentum serving its rapidly growing user base.

Here's a clear example of design inconsistency within the product: Input fields lacked standardization, with heights varying between 48px, 44px, and 40px. Input titles followed different design languages, mixing Google Material Design 2 and Apple HIG styles. Additionally, color usage varied by designer with no consistent system in place.

Design System Discovery: Untangling the Product

When I first stepped into Nobitex's design ecosystem, it felt like exploring a rapidly growing city built by different architects, each with their own vision. As Iran's leading crypto exchange serving millions of users, the platform had grown exponentially, but its design infrastructure struggled to keep up.

The Starting Point:

Fortunately, we had a foundation - a basic brand book that provided essential guidelines. Like having the original city plans, it offered:

Core brand colors
Basic visual guidelines
Marketing-approved elements
Initial design direction

The Product Archaeology:

Next came what I call the 'product archaeology' phase. I needed to understand:

Previous design system attempts
Abandoned documentation efforts
Scattered component libraries
Historical design decisions

The Team Connection:

The most illuminating part was meeting with the seven designers who had been building this digital city. Each conversation revealed:

Individual design approaches
Daily challenges
Feature ownership
Custom solutions
System needs

The Feature Expedition:

For a full month, I conducted a comprehensive product audit, examining:

Existing features across platforms
Historical design files
Component variations
Pattern inconsistencies
Legacy systems

This discovery phase wasn't just about documenting issues - it was about understanding how a rapidly growing product had evolved and how we could bring consistency while respecting its history.

Color System: Simplifying for Clarity

The color audit revealed a crucial insight: our brand book's secondary colors were adding unnecessary complexity to an already intricate crypto exchange interface. This led to a streamlined approach:

Primary Color Architecture:

10 core shades
Highlight background variations
Strategic gradient applications
1:1 dark/light theme mapping

Semantic Color System:

5 shades for each state (error, success, warning, info)
Single background variant per state
Consistent across themes

Neutral Foundation:

4 surface colors
5 text hierarchy levels
10 grey scale variations
2 static colors (black/white) theme-independent

Accessibility Focus:

Utilized Stark plugin for rigorous contrast testing:

WCAG compliance checks
Cross-theme verification
Readability optimization
Universal usability assurance

Typography Evolution: Adapting for Persian Text

When examining typography, I discovered that Google Material Design 2's type scale wasn't serving our Persian users effectively. This led to a comprehensive typography redesign:

The Persian Text Challenge:

Standard type scales struggled with Persian text, particularly in:

Paragraph legibility
Character overlap
Line height issues

Custom Solutions:

Persian-Optimized Paragraph Scale:
- Height = 2× font size rule
- Example: 16px font → 32px height
- Enhanced readability for long text
Button Typography: Created dedicated button scale with:
- Medium weight specification
- Distinct from Subtitle (bold)
- Separate from Body (regular)
Modernized Approach: Inspired by Material Design 3:
- Three sizes per category (L/M/S)
- Consistent scale progression
- Modern typography principles

This system provided designers with clear, consistent typography choices while ensuring optimal readability for Persian text.

Iterative Refinement: Collaborative System Building

The color and typography systems evolved through numerous iterations, each shaped by practical application and team feedback. Regular catch-up sessions with designers became crucial touchpoints where we could discuss:

System usability in real projects
Pain points and limitations
Improvement suggestions
Implementation challenges

These collaborative sessions helped ensure the system wasn't just my vision, but a practical tool that served the entire team's needs. Each designer's unique perspective and use case helped refine the system into something truly useful for everyone.

Component Architecture: Building the Foundation

After establishing our core design elements, I created a structured Figma organization to ensure scalability and ease of use:

File Structure:

Core Elements File:

Color systems
Divider styles
Spacing guidelines
Typography scales
Brand guidelines
Icon library

Component Library File: Basic Interface Elements:

Alerts & Toasts
Avatars
Buttons
Chips
Dropdowns
Text Inputs
Steppers
Tabs
Tooltips
Pagination
Upload interfaces

This separation brought clarity to our system:

Core file served as our design source of truth
Component file provided ready-to-use building blocks
Clear organization improved designer workflow
Easier maintenance and updates

Button System: Building with Nested Efficiency

Here's an example of systematic button architecture using Figma's nested instances. The system includes text buttons, icon buttons, and links with the following specifications:

Size Variations:

Super Small (28px height)
Small (34px height)
Medium (40px height)
Large (46px height)
Super Large (53px height)

Color Variants:

Primary
Gradient
Success
Error
Warning
Info
Neutral
Inherent

Style Types:

Fill
Outline
Text

Efficient Component Structure: By using nested instances, text styles were created first as components, then referenced in button components, significantly reducing design effort and maintenance overhead while ensuring consistency across variations.

Text Input System: Mastering Complex States

Here's how we built a comprehensive text input system handling multiple states and languages:

Component Handlers (Boolean):

Field title
Leading icon
Prefix text
Inner label
Trailing icon
Caption text
Action link

Size Variations:

Small (34px height)
Medium (40px height)
Large (46px height)

Direction Support:

RTL (Persian)
LTR (English)

Implementation Efficiency: Leveraged nested instances in Figma to manage complexity while maintaining consistency across all variations. This approach allowed for easy updates and reduced design overhead.

Lantern Design System: Impact and Implementation

Created Lantern, a comprehensive design system that transformed Nobitex's design workflow and product consistency. Named for its role in illuminating the path forward, Lantern significantly impacted product development:

Key Features Designed with Lantern 1:

KYC verification flow
Staking platform
Loan services
Debit service
Social trading interface
Lite application
Homepage redesign
Crypto wallet app
Dashboard of application

Business Impact:

Increased design efficiency
Established visual consistency
Accelerated feature development
Improved team collaboration

While legacy features remained in their original design, Lantern established a new standard for all new feature development, creating a clear path toward product-wide consistency.

Lantern's Evolution: From System to Team

After a successful first year, Lantern evolved into its second iteration with a dedicated design system team:

Lantern 2 Development:

Expanded component library
Enhanced foundation elements
Deeper documentation
Broader implementation scope

My Continued Involvement:

Mentorship Role:
- Guided new design system team
- Shared implementation insights
- Provided strategic direction
Input System Contribution: Developed comprehensive input components:
- Default text inputs
- Search functionality
- PIN code interfaces
- Text selection tools
- Dropdown menus
Documentation: Created detailed guidelines for:
- Designer implementation
- Developer integration
- Component usage
- Best practices