"Light Blue" is a color. "Brand-Primary-Surface" is a command.


If your design system documentation uses names like Sky Blue, Light Gray, or Darker Navy, you haven't built a system. You’ve built a coloring book.

For a scaling B2B SaaS, naming a color based on how it looks rather than what it does is a recipe for manual overrides and broken layouts.


The Naming Trap

When your engineer sees color: #EBF5FF (Sky Blue) in Figma, they have no context.

  • Is this a button background?
  • Is it an alert banner for "Info" states?
  • Does it change when the user toggles Dark Mode?

If it’s hard-coded as "Sky Blue," and you decide to change your primary brand color to Green, your devs now have to find-and-replace "Sky Blue" across three different codebases. It’s tedious, error-prone, and expensive.


The Architect’s Approach: Semantic Tokens

We don't design with hex codes. We architect with Intent

By using a semantic token like brand-primary-surface, we create a logic layer that lives between the design and the code:

  • Logic-First: The name describes the function. The value is secondary.
  • Platform Agnostic: The Web sees a CSS Custom Property. Android sees a Kotlin Object. iOS sees a SwiftUI constant.
  • Future-Proof: Want to launch Dark Mode? You don't change the code. You simply map brand-primary-surface to a new hex value in the pipeline. The entire product updates across Web, iOS, and Android instantly.

Why this matters for Scale-Ups

In the "Post-MVP" phase, you can't afford to have your engineers playing "pixel detective." Every minute they spend manually syncing a color is a minute they aren't building the features that drive your MRR.


We build the pipeline so your team can stop talking about "shades of blue" and start talking about deployment velocity


One source. Three platforms. Zero ambiguity.


Ready to de-risk your UI? Submit our Design System Intake >> form

The left panel, labeled 'THE NAMING TRAP,' uses a red theme to show that hard-coding a literal color name like 'Sky Blue' creates tedious work. A Figma design showing a specific hex code is linked to three separate code snippets for Web, Android, and iOS, each hard-coding the color '#EBF5FF'. A concerned developer avatar highlights that changing the color to Green would require manual updates across all codebases. The right panel, labeled 'THE ARCHITECT’S APPROACH,' uses a green theme to demonstrate efficiency. A Figma design uses a single semantic token: 'brand-primary-surface.' This token is managed in a central 'Design Token Pipeline,' allowing a change to automatically update the mapping for both Light Mode and Dark Mode hex codes. This centralized token is instantly implemented as a variable across Web, Android, and iOS, resulting in efficient scaling and automated updates.