Lauren Spence Presents The Color System

Our most recent Lunch Meet – a SoCreate team-led learning series – may have been the most colorful yet! UX Developer Lauren Spence took the floor to teach the team about cutting edge practices being used on the UX side of SoCreate projects. While the rest of us satisfied our appetites with catered lunch, Lauren satisfied our visual senses with her presentation on the SoCreate Color System.  

The Color System is an innovative approach that controls and themes the colors in all of the apps we build. The system adds layers and rules on top of plain CSS, giving us a system that is easy to use, easy to document, and easy to theme. It’s built on a library of global CSS Custom Properties, each with a unique name for its intended use.  

“With this library of unique color names, we can easily select the right color for any purpose and confidently change colors without unintended effects,” Lauren explained. “We have a comprehensive catalog of colors with the app, a sort of “style guide” built into the code. 

Also, through the power of Custom Properties, Lauren explained that we could set themes in the app with almost no additional developer effort. A win-win!  

The main benefit of the color system is tri-fold since the colors system was created to solve several problems many UX developers face:  

  • Easy decision making, achieved through our catalog of global colors. Any two developers creating a new component can now easily make the same decision about which color to use.  
  • Effortless theming. Where before we needed to manually create a theme for each component in the app, now we get themes for free with the power of CSS Custom Properties.  
  • Unbreakable text. The text will never become unreadable (and therefore your app unusable), due to lack of color contrast. We achieve this through tightly controlling background colors in the app, and through documentation of colors on top of every background so that when we introduce a new color, it's easy to see if it would break at any level.  

Lauren said the SoCreate UX team is excited to explore CSS Custom Properties more. It’s a fairly new approach. Developers who need to worry about supporting older browsers haven’t been able to use and experiment with CSS Custom Properties for very long. “This means we're on the cutting edge of exploring the power of this technology, and we believe we came up with a really cool way to harness their power. 

On the cutting edge … yep, that sounds like SoCreate!  I’m continually impressed with our team’s furious curiosity: how can we do this better, faster, or different?  

These are questions we should all ask ourselves in our quest to keep learning. 

Go, team, go! 

Courtney Meznarich , Director of Community Outreach

@Courtonthecoast