Design tokens
Design tokens are the visual atoms of a design system—they are the named entities that store visual properties like colors, typography, and spacing. They abstract and formalize design decisions into reusable data that can be shared across platforms and technologies, ensuring consistency and efficiency.
Color
Color, in a design system, is more than just a palette of hues. It's a structured, standardized, and purposeful set of color variables that ensures visual consistency across an entire product or brand. Rather than using arbitrary hex codes, a design system defines a limited set of colors with clear names and functions
Typography
Typography is a fundamental aspect of design that involves the art and technique of arranging type to make written language legible, readable, and visually appealing. It plays a crucial role in user interface design by guiding users through content, establishing a visual hierarchy, and enhancing the overall user experience.
Iconography
Icons are visual symbols that communicate meaning at a glance. They represent objects, actions, or states.
Depth
Depth refers to the layers, hierarchy, and spatial relationships within a digital interface. Setting up proper depth helps us create a more intuitive experience by mimicking the physical world. In Watson, we use z-index, surfaces, and shadows to generate this depth.
Size
Size in a design system defines a consistent scale for all physical dimensions of a product's UI elements, from spacing and padding to the height of a button. It ensures visual rhythm, alignment, and a predictable user experience across all devices.
Spacing
Spacing is a fundamental aspect of design that ensures clarity and organization within an interface. Proper spacing enhances readability, guides user flow, and creates a visually appealing layout by defining the relationships between elements.