Designing, testing, and implementing a cross-platform token system from the ground up, enabling themeability, accessibility, and consistency across our entire cybersecurity suite.
I am actively writing and designing out this case study for you to get a full view into the rigorous research, testing, testing, more testing, failure and success of designing a token library from the ground up. Stay tuned or just reach out to me directly and I will share with you the whole story.
Role
Design Lead
Company
Bitsight
Project Type
Design & Usability Testing
The Problem
Check out this side by side light mode and dark mode rendering of our application with tokens applied to components using Figma.
Categories
Our design tokens are organized into four categories: foundation, utility, semantic, and contextual. Each category serves a distinct purpose within the design system. These categories help structure the tokens, but they do not influence how tokens are named.
Foundation tokens originate from core values defined at the system’s base level. They are not applied directly but act as the source for all other tokens. Utility, semantic, and contextual tokens reference foundation tokens and increase in specificity in that order.
Utility tokens provide general-purpose styling options. Semantic tokens map design decisions to meaningful roles, such as indicating success or error states. Contextual tokens offer the highest level of specificity, used to override semantics for specific components or patterns where needed. This structure supports consistency while allowing for precise, context-driven customization.
Data Visualization Tokens
These guidelines define the proper use of color tokens in charts and data visualizations. All chart types and classification in these guidelines follow Nick Desbarats’ Practical Charts for standardization and best practices.
We categorize data into three general types: sequential, categorical and divergent (or scale).
A color sequence helps colorblind users distinguish data visualization content. With 8 hues in the palette, we can alternate both the hue and steps to create sequences with color and contrast differences.
Data type summary:
Sequential data uses steps within a single hue to present a single data range.
Categorical data uses hues to differentiate categories, and like sequential data, steps within each hue to present a data range.
Divergent data uses hue transitions to present data ranges on either side of a common central point.
Conclusion
Design for change, not perfection
The system that survives is the one that can absorb new themes, products, and opinions without structural rewrites.
Abstraction is a maintenance tool
Extra layers only exist where they reduce the number of future edits.
Specificity has a price
Pixel-level control is valuable, but unchecked specificity multiplies tokens and slows global updates.
Adopt ideas, not structures
Mature systems provide insight, not blueprints.
Keep Going
There is more to explore, rummage through more of my recent design work.
Cyber Risk Quantification
Turning complex threat data into clear, financial insights.
Design System
Unified, scalable design system for a product suite.
Still Not Enough? Time to Raid the Archives
Check my older work, that I have not had the heart to retire yet.
Hope to hear from you
Please, take a moment and send a message and lets connect.
