It’s Clément again! Welcome to the 2nd edition of the CU Design newsletter – a curated set of learnings, inspiration, resources, and tips.

If you’re not familiar with CUxD (Cornell User Experience Design), we’re a centralized community for UI, UX, and product designers at Cornell. We learn and grow together both professionally and socially!

Today’s topic is about design systems! Specifically, we’re going to explore design tokens.

First, let’s briefly talk about what a design system is. A design system is a collection of reusable assets, components, and guidelines that help teams create cohesive and scalable designs. It includes typography, colors, UI components, and other design rules that ensure consistency across a product. Design systems can range from simple style guides to complex frameworks, and they often rely on design tokens – scalable variables that store design decisions – which we’ll be exploring here.

If you’re not familiar with design systems, start by reading Nielsen Norman Group’s article, and then take a look at Builder.io’s guide to build one!

Design tokens are the fundamental building blocks of design systems. They allow you to store and manage design-related values like colors, spacing, and typography as reusable variables. What makes them different than regular styles in a UI kit is that these tokens can be “abstracted”, meaning that they can be applied across different platforms and use cases. This includes not only code but also different UI themes like light and dark mode.

Although design systems may vary how they organize tokens, design tokens typically fall into three broad categories:

These are the core values that remain consistent throughout a design system. Examples include base colors, spacing units, and typography settings. In the example below, for color, the token is called color.blue.500 and its value is the HEX code #1E90FF. Similarly, the token space.md (md is a typical abbreviation for medium), holds the raw value of 24px.

Semantic tokens are linked to primitive tokens and are used in specific contexts. They’re named based on their purpose or meaning behind them.

Component tokens are specific to an individual component, such as buttons, cards, or inputs fields. They offer more detailed control over how these components look and behave.

Design tokens are crucial because they help create consistency across the entire design system. By centralizing design decisions in a single location, tokens ensure that all elements of a product look and behave uniformly, regardless of where they are used or which platform they’re on.

Tokens also make it easier to update the design system. Instead of manually adjusting each instance of a design element, you can modify a single token value, and the change will automatically propagate throughout the system.

For a more in-depth guide on building creating a design token system, check out this article by Contentful. Additionally, this Medium article gives a comprehensive exploration of naming your tokens in your system.

I’m really proud of one of my projects during my internship at Microsoft: midway through the summer, I was assigned a high-priority task to automate a solution for an internal communication system within Azure. I collaborated closely with developers, designers, and a PM to help accelerate the system's notification process by 50%, significantly improving the user experience and business operations for various stakeholders. I was especially proud to have navigated such a complex space and I learned a lot from the senior colleagues around me during the process. Feel free to contact me if you’d like to chat more about my internship experience!

Some cool designs to for your dopamine hit!

Have any feedback or want to see something on the newsletter next week? Email us at [email protected] or reply directly to this email.

See you soon,

Clément @ CUxD