What are primitive variables?

Primitive variables are the values of the most basic, foundational elements that we’ve selected to agree to use.

Advantages of primitive variables

Fast Design Decisions:
You can make design decisions within the selected values without considering all other values.

Best Practices for Engineering Performance
Any pixel sizes like 1px, 2px, or 3px can be used, but using multiples of 8 or 16 (e.g., 2px, 4px, 8px, 16px) is recommended for optimal performance.

Reusable Asset for Consistent Design System
For instance, by setting Red45 (#CC0000) as a primitive value, it can be reusable as a warning sign colour, discount colour, or even for hearts, ensuring a consistent design system.

Maintainable primitive token names

Naming tokens was the hardest part for me when building a design system. It should be flexible, adaptable, and scalable. Through this project, I found that numeric token names are maintainable. Let me explain in more detail.

⚠️Bad examples: Not scaleable token names

You might be very familiar with the following token names

• xsmall, small, medium, large, xlarge
• darkest, dark, medium, light, lightest
• tightest, tight, compact, loose, spacious

I found that these token names made it difficult to add new values later.

For example, if a 24px border-radius needs to be added, we must find an appropriate term that fits between ‘large’ and ‘xlarge,’ which can be a hassle.

✅ Best practice for border-radius

I found it worked well with the border-radius token names to be numerical pixel values instead of abstract token names like those listed below the image.

✅ Best practice for colours

Most design systems utilise colour palettes in the following method: blue 100, blue 200, blue 300, and so on. However, I’ve always wondered if I need all those colours? What if I need a colour between blue 100 and blue 200?