Design System theming — How and why it works
A good design system provides cost effective and consistent experiences across multiple platforms while providing a toolset to solve problems quickly.
One of the bigger challenges we faced while standing up our design system was creating a design language that:
- Designs for everyone, meet our accessibility standards
- Provides an elegant interface to the end user that makes sense
- Provides enough arrows in the designer’s quiver so that they can solve business challenges with the end user in mind
- Makes our design standards resilient when implemented
Solution: develop a theming system that works across all the individual UI pieces of the design system. Make sure those those pieces work together.
Theming System? What’s a Theming System?
Think of a theming system like a set of interchangeable color swatches that affects how things are colorized (think background color, text color or border color), but not the size, layout, content, hierarchy, etc.
Basic rule of thumb: if it affects color, it’s related to theming. Otherwise, it’s not.
The guts of our theming system
We currently have four working themes in Bolt: “xdark”, “dark”, light”, and “xlight”. Each theme essentially defines the canvas and paint brushes the UI will render with.
Our dark themes leverage our brand Indigo as a base line of the theme design, while our light themes leverage gray and white canvases.
Why don’t we call them dark blue or white themes? To keep the system evergreen, we keep our labels generic so that if there a global change in our visual language we don’t have to rewrite too much code. We can easily make a couple small tweaks in our global theme styles and not miss a beat or refactor code everywhere.
We should (and are actually now in the process of) generalizing further — instead of lights and darks, primaries, secondaries, brand, etc., but I digress.
Keep the design system jaron generic and scalable so you can grow into new scenarios without refactoring. Something like “Default > light > lighter > lightest” falls apart when you need to add something is lighter than lightest.
Each theme defines:
- background color
- text color (when used on the background color)
- primary color
- secondary color
- heading color
- link color
- border color
Implementing Accessibility standards
We use the internationally-accepted WCAG 2 AA standards to evaluate our sites (a standard now being used by Section 508, EN 301 549 and BITV). By user-testing the various ways a person interacts with our interfaces, we craft compliant, inclusive, usable designs to meet any impairment or disability head-on.
To ensure we meet AA contrast minimums, we test along the way as we design. I love this tool in particular as it has some presets provides a calculated equivalent foreground color. We additionally bake in Sass contrast mixins in the code to automatically make sure we use the highest contrast available.
Build in automagical checks right into the system to provide real-time feedback mechanisms. We run our entire color palette through the AA contrast guidelines automatically to provide an ongoing assessment.
How our themes come together
Even though each theme constricts around the seven parameters above, the system provides great flexibility. Starting with our band component, a full width section that goes to the edges of the display, we can quickly craft content.
Additionally, our band component allows us to add background images and gradients. Together, we can quickly deliver against our content strategy.
For pega.com, we use darker themes as book ends of our information architecture to create gravitas on the page. Lighter themes serve longer form content. As we redesign our community portal, we’re leaning on the lighter themes as the content is dense and needs to be more scannable.
Supporting designers
We want to ensure designers using Bolt have enough design tools to tackle the problem in front of them. The theming system has been integral to the design process, providing a framework to quickly piece together the page’s structure. Whether they’re designing in Sketch or in the CMS, the tools are there.
As more sites and designers adopt our design system, we’re constantly pressure testing if we have given them enough tools.
So far so good. Pega.com was the pilot adopter and we’re adding two more as I type. The sites hang together as siblings but are different enough to serve their audience.
On top of the visual language we’re creating, the design system tooling allows the designers to spend more time thinking about the business and user objectives. If our designer is using Sketch, they’re able to create a comp in as little as 20 minutes if they’re flowing in real content, down from two to three hours, which allows time to go wider sussing out different ideas.
Making the system resilient
By far my favorite piece of the theming system is the baked in resilience. When a content author is building a page, they only have to worry about selecting the weight of the button. Color and styles are automatically generated from the theming engine..
Work harder now so that the design system users don’t have to. The dev team injected some sort of wizardry that provides additional resilience that protects our users from going against standards — even dragging the button html element from one theme to another corrects to the right scheme, making it effortless to follow the rules and design guidelines.
Most components fall in line with the theme standards, text and colors behave the same way across each piece of the system, creating a larger brand experience that is consistent across each site and the entire ecosystem.
Conclusion
The theming engine systematically creates a uniform design language across all sites, unifying the ecosystem that is accessible for all users. It frees the designers up to tackle larger problems and prevents misuse of patterns.
Huge kudos to salem_ghoweri on architecting the **** out of the system!
