🏫
Obvious University
Website
  • 👋Welcome to Obvious University!
  • Strategy
    • Sprints
      • 1️⃣Map
      • 2️⃣Sketch
      • 3️⃣Decide
      • 4️⃣Prototype
      • 5️⃣Test
    • Benchmarking
    • Research
      • 1️⃣Research guide
      • 2️⃣How to recruit users
      • 3️⃣How to conduct an interview well
      • 4️⃣How to take notes
      • 5️⃣How to prep for remote research
      • 6️⃣How to throw a watch party
      • 7️⃣How to create artefacts
  • Working with Features
    • Building with AI
      • 1️⃣Understand the tech
      • 2️⃣Map your product
      • 3️⃣Build a proof of concept
      • 4️⃣LLM Inputs
      • 5️⃣LLM Responses
    • Building Help and Support
      • 1️⃣How to scope a support experience
      • 2️⃣How to design discovery for support
      • 3️⃣How to design a support centre
      • 4️⃣How to write good support articles
  • Product Design
    • Microcopy
      • 1️⃣How to write well
      • 2️⃣How to write phrases
      • 3️⃣How to write messages
      • 4️⃣How to create a voice
    • Typography
      • 1️⃣How to compose type
      • 2️⃣How to create a type scale
      • 3️⃣How to pick typefaces
      • 4️⃣How to pair typefaces
    • Design System
      • 1️⃣Introduction to design systems
      • 2️⃣How to audit a design system
      • 3️⃣How to run a design system pilot
      • 4️⃣How to set up a design foundation
      • 5️⃣How to build components
      • 6️⃣How to document a design system
      • 7️⃣How to enable adoption and govern a design system
    • Mobile Engineering
      • 1️⃣Trunk based development
      • 2️⃣Agile development terminology
      • 3️⃣Git commit messages
      • 4️⃣Code review and pull requests
      • 5️⃣Readings
  • Delivery
    • Project Management
    • Collaboration
  • Hiring and Growth
    • Growth
      • 1️⃣Design growth framework
      • 2️⃣How to give ongoing feedback
      • 3️⃣How to check-in every quarter
      • 4️⃣How to address underperformance
      • 5️⃣FAQs
    • Hiring and careers
      • 1️⃣The Hiring Process
      • 2️⃣Diverse and Inclusive Hiring
  • PEOPLE EXPERIENCE
    • Benefits and Perks
      • 1️⃣Paid time off
      • 2️⃣Insurance and healthcare
      • 3️⃣Continuing education
      • 4️⃣Speaking at conferences
    • Starting at Obvious
      • 1️⃣Introducing Obvious
      • 2️⃣Set up your workspace
      • 3️⃣Onboarding
      • 4️⃣Finances
      • 5️⃣Code of Conduct
    • Employment policies
      • 1️⃣Equal opportunity employment
      • 2️⃣At-will employment
      • 3️⃣Employee records and privacy
      • 4️⃣Prevention of sexual harassment
      • 5️⃣Drugs and alcohol
      • 6️⃣Fraternisation
      • 7️⃣Non-compete and non-solicitation
      • 8️⃣Non-disclosure
Powered by GitBook
On this page
  • 👋 Introduction
  • 1️⃣ Design Tokens
  • How to name design tokens
  • Supporting themes and brands
  • 2️⃣ Colour system
  • 3️⃣ Typography
  • 4️⃣ Elevation
  • 5️⃣ Spacing & corner radius
  1. Product Design
  2. Design System

How to set up a design foundation

PreviousHow to run a design system pilotNextHow to build components

Last updated 1 year ago

👋 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.

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:

  1. Start with the context, the usage and then go into more specific detail.

  2. 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:

  1. Brand colours (primary, secondary, accent etc.)

  2. 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:

  1. Choose a colour as a starting point. Ideally, this should be your x-500 value or midpoint in the ramp.

  2. Use one of the many tools to generate the 10-step ramp –

  3. 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.

  4. 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.

  5. 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:

  1. Display

  2. Headlines

  3. Body

  4. 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.

References

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

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 .

Use a plugin called (Fastest)

For more control, use

is also good, albeit with less control. But it generates an 8-step ramp with the Figma colour styles.

For more details on how to set up typography, refer to the .

4️⃣
Variables
Design tokens – Material Design 3
Color scale generator
Lyft Colorbox
Tailwind colour generator
Figma template ↗
Figma template ↗️
typography module
Typography - Material Design 3
Typography
Figma template ↗️
Elevation - Material Design 3
Figma template ↗️
Spacing tokens - Shopify Polaris