Challenge
Spiderrock's trading applications lacked a unified design, leading to inconsistencies, inefficiencies, and higher development costs. Without a centralized way to manage UI elements, updates were difficult, and maintaining a cohesive experience across platforms was a challenge.
Solution
I built a scalable design system using design tokens to ensure consistency across all applications. By integrating components into Storybook for documentation and using JIRA for structured collaboration, we streamlined development, reduced inconsistencies, and improved cross-team efficiency.
Context Token Structure
Context tokens are the specific design decisions defined for color, measures and font throughout the applications Our context tokens follow the structure below(but not necesssarily all tokens will display a value for all fields):
Scheme Example
Modes
Mode can assume two values: light or dark, and is the application of a same palette in a different contrast disposition. In our current and only SR theme, we can create a light mode like in the example below:
Themes
Themes are simply different palletes that will assume the values we are used to such as backgrounds, positive, negative and accent contexts.
Design System
