3.1 Design System and Design Tokens
Understanding design systems and design tokens is essential for this research because they form the foundation of the workflow Kolibri Sync is expected to improve.
Design System
A design system can be understood as an organized framework that defines standards, guidelines, and reusable building blocks to manage design consistently at scale. It acts as a single source of truth for teams, ensuring that visual and functional elements remain coherent across products and platforms (Supernova.io, 2024).
Such systems typically include the following key elements:
UI Components and Patterns: These are reusable interface elements such as buttons, forms, or modal windows that are applied repeatedly in different contexts.
Design Tokens: Design tokens are the variables that store key design properties.
Brand Guidelines: These guidelines describe the brand's visual and voice identity. They cover aspects such as logos, color palettes, typography, and tone of voice.
Documentation: It provides detailed instructions on how to use and maintain the design system, making it easier for new team members to adopt it effectively.
Design Tokens
Design tokens are considered the atomic elements of a brand’s design language. As described by Supernova.io (2024), they represent a named value for an agreed-upon visual property that both designers and developers can use to ensure consistent experiences. A design token reflects a shared decision about how a visual property is paired with the code that implements it, packaged in a way that can be used across platforms.
Tokens replace static values with self-explanatory names (Material Design 3, n.d.) and can store a wide range of design attributes, including colors, dimensions, spacing, padding, animation timings, and interaction rules. For example, instead of hardcoding a button’s hover color as #F55DAF, a corresponding design token could be defined as pink/400 = #F55DAF (Supernova.io, 2024). See Figure 1 for an example token workflow betwwen design and code.
Last updated