Context - Shared Variables Dilemma

The Problem

Design Systems often live within design tools as component libraries.

Maybe there is a code component library so developers can work with components as well.

Components are

  • often badly documented (why add docs, you can just copy and paste the component)
  • hard to understand and reason about (e.g. why is the padding 4px? Why is the button blue?)
  • work-intense to keep up to date when the design system changes

Define the design tokens as global entities but develop the components operating within their own semantic context.

From this...
From this...
...to this! 😁
...to this! 😁

Renaming Approach


Create consistent variable names for design tokens without introducing new mental models.

Code Example 🤖
import { colors } from './tokens.js';

// { colors } is a const where we declare 'neutral--900': '#000000', etc...

const form = {
  'border': colors['neutral--700'],
  'border--active': colors['primary'],
  'border--disabled': colors['neutral--400'],

  'content': colors['transparent'],
  'content--active': colors['neutral--100'],
  'content--disbaled': colors['neutral--400'],

  'background': colors['transparent'],
  'background--active': colors['primary'],
  'background--disabled': colors['neutral--400'],

const StyledCheckbox = styled.div`
  // ...
  background: ${props => props.disabled ? form['background--disabled'] : form['background']};
  // …