Nael Maali - Product Designer

Nael maali

Schoox

b2b saas

design system

SDS Tokens

To solve inconsistent styling and enable flexible theming, I led the creation of a cross-platform design token system for Schoox. This system unified visual language across web and mobile, laying the foundation for a scalable, accessible, and fully brandable experience.

Responsibilities

Visual design

Token architecture
Accessibility testing
Token exploration

Deliverables

Token Studio build

Token JSON
CSS Framework
Figma Variables

Team

Me - Product Designer

Cliff M. - Manager

Michalis T - Frontend Lead

Me - Product Designer

Cliff M. - Manager

Michalis T - Frontend Lead

Problem

An audit of the legacy product revealed widespread styling inconsistencies and a fragmented implementation of theming and white-labeling. The Schoox brand itself wasn’t consistently applied, and customers struggled to adapt the product to their own branding. Worse, there was no mechanism to ensure accessibility when custom colors were applied — putting both usability and compliance at risk.

These issues weren’t just aesthetic, they impacted sales and retention, as customers increasingly demanded better control over how their platform looked and felt.

Target Goals

Build a robust, scalable token system based on Amazon’s Style Dictionary

Ensure consistent styling across all platforms and components
Support full theming without sacrificing accessibility

Sample of our design token mapping

Tokens implemented as Figma variables

Token naming & alias layers

I developed a token structure based on Style Dictionary conventions, with clear naming and alias layers. Tokens remained consistent across platforms — meaning no remapping between web and mobile, and no confusion about what token to use where. This clarity dramatically improved design-dev handoff and reduced duplication when scaling components across platforms.

Token layering featuring five levels of abstraction

Token naming based on Amazon Style Dictionary

Accessibility

Every component alias was accessibility-tested to meet AA or AAA WCAG standards, even under custom brand configurations. This baseline ensured we could offer flexibility without compromising usability.

Theming

The token framework gave us full control over customer theming — including colors, spacing, fonts, and border radii. For the first time, Schoox could deeply integrate with customer brands while preserving system integrity.

Standard Schoox 'Electric Fade' light and dark modes

White-labeled themes

Admin Theming Settings

In collaboration with the Experience Design team, I also designed the Academy Admin Theming Panel, a customer-facing interface built on top of the token system. It gave admins granular control over UI elements, enabling self-service branding without breaking design standards. This was a major leap from previous theming tools, aligning our product more closely with customer identity needs.