4️⃣How to set up a design foundation
👋 Introduction
Setting up a design system's foundation involves defining elements like typography, colors, spacing, and effects tokens strategically. While an exhaustive foundation isn’t required upfront, it's important to provide initial guidelines for immediate use.
1️⃣ Design Tokens
Design tokens represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour, with self-explanatory names, for example.
Tokens allow design decisions to be documented in a platform-agnostic and shareable format to maintain a single source of truth. Figma also now supports design tokens using Variables.
How to name design tokens
There are various approaches to name design tokens but aim for something that the team can agree on quickly rather finding the perfect structure. The idea is to create a shared vocabulary and have self-explanatory names.
To get started:
Start with the context, the usage and then go into more specific detail.
Use the following structure as a starting point to name your tokens
Supporting themes and brands
Tokens can reference various values based on specific conditions. This flexibility enables scalable design token structures, simplifying theme and brand support.
Once you've established a token structure for your product, future redesigns become more straightforward, and introducing new verticals with a different visual language becomes easier.
2️⃣ Colour system
To set up a base colour palette, you need two kinds of colours:
Brand colours (primary, secondary, accent etc.)
Utility colours (For showing success, failure status).
How to create a colour scale
Following are the steps to create a single colour ramp or scale:
Choose a colour as a starting point. Ideally, this should be your x-500 value or midpoint in the ramp.
Use one of the many tools to generate the 10-step ramp –
Use a plugin called Color scale generator (Fastest)
For more control, use Lyft Colorbox
Tailwind colour generator is also good, albeit with less control. But it generates an 8-step ramp with the Figma colour styles.
Add the new colour styles to Figma. Use this structure while naming – Global/Name/Name-500. This structure is a suggestion and can be adjusted to optimise for consumption.
A ten-scale ramp goes from x-50 to x-900. You may add more shades/tints if more granular shifts are needed. Generally true in the case of greys.
Create colour swatches and add the ramp to the Global colours sheet.
Repeat the steps for all the colours.
This set of colours will be our base or reference tokens. We use these as a basis to create application-specific tokens (backgrounds, button colours, etc.) or in some cases, use them directly in your designs (although creating specific tokens is recommended).
3️⃣ Typography
Based on your audit, prepare a typography scale. Here are the broad categories of fonts sizes and weights you need:
Display
Headlines
Body
Labels
Add a few sizes in each category like Small, Medium, Large.
Don’t add too many options here to avoid choice paralysis. Strike a balance between having flexibility and ease of use.
Add all relevant details like line-height, size, weight.
You might have to create styled/decorated versions of body fonts for bold, underlined and other styles. Do this only if use cases exist.
For more details on how to set up typography, refer to the typography module.
References
Typography - Material Design 3
4️⃣ Elevation
Set up an elevation system based on your use cases. Generally, a 4-5 level system is enough. Add a scale and usage examples for ease of use.
Some technical considerations:
Try to use only one drop shadow layer in Figma. Additional layers can have a performance impact.
Use greyscale shadows. Android has issues rendering coloured shadows.
Shadows on Android will never be 1:1 fidelity with Figma because of how it’s rendered. It might need some tweaks in code to get it close to designs. Use Figma values as a starting point.
References
5️⃣ Spacing & corner radius
Similar to the type-scale, set up a scale with some common spacing values.
Use multiples of 4px and 8px. You can use 2px as a starting point.
For a mobile app, 10-12 spacing tokens are enough.
Only use these tokens while building your UI. Use these for setting margins, paddings and spacing between UI elements. Do not use these for component dimensions.
Repeat this to set up common corner radius values.
References
Spacing tokens - Shopify Polaris
Last updated
