Theme First UI Development

Published ....
Last modified ....

Share this post on BlueskySee discussion on Bluesky

A recent trend within the Frontend development space has been around enabling something I have been calling Theme First UI Development. Tools like Emotion, Styled-System, Theme-UI, React, and concepts like Design Systems, and Design Tokens have really driven the push for building applications based on a finite set of scale-based tokens.This approach to building features and applications isn’t entirely new, however new tools have pushed it to the forefront of web development.

The core benefits of doing Theme First UI Development are:

• Consistency by Default
• Separation of Theme and Implementation
• Rapid Development

Consistency By Default

Describing a set of Design Tokens, as the core fundamental pillars of a larger theme, as a scale applied to default values enables consistent UI to be the default. If your development team is only describing the UI using a collection of Design Tokens then you can be sure that styles like spacing, font styling, and colors will align across the application.

Separation of Theme and Implementation

By developing theme first, changes made to the design system by tweaking the design tokens will apply everywhere across the application and lead to consistency during thematic evolution, as well as limited impact to changing feature code. Making a change to the primary color within an application only needs to happen once within the design tokens, and it trickles everywhere through the application.

Rapid Development

By leveraging Theme First UI Development, designers and developers don't need to spend time picking out stylistic elements of the feature, and instead can focus on developing a better customer experience. When you don't design or develop against a set theme or collection of design tokens you can end up spending a majority of the time finding the right color, or font size for your feature, instead of spending that time iterating on the value you are delivering to the user.