Glossary

This terminology is used throughout the Connected Design System development pipeline to ensure clarity and consistency. Note that some terms may have different meanings in other contexts (e.g., programming languages or frameworks), but are defined here specifically within the context of the Connected Design System.

Reference Guide

This very website is the Reference Guide. It’s used to document the styleguide, its various moving parts, as well as a comprehensive resource for developers to understand how to develop with React and for AEM.

Note

React and AEM are not part of the CDS itself—they are respectively software and a framework that build on top of it. The CDS provides the design foundations, while React and AEM consume and implement these foundations in their respective environments.

Connected Design System

a.k.a. CDS

The Connected Design System is the whole collection of Figma documentation, tokens, components, modules, and Reference Guide documentation that define the visual and functional aspects of our brands. It serves as a unified source of truth for designers and developers to create consistent user experiences across different applications.

Mode

A mode represents brand-specific theming, such as Toyota or Lexus. The term originates from Figma where modes allow switching between different token value sets while maintaining the same token names.

Foundation

Foundation encompasses the core building blocks of the CDS: tokens, typography, spacing, and layouts. These fundamentals ensure visual consistency across all brands and applications.

Token

a.k.a. Variable, CSS Custom Property

Tokens are the smallest unit of the CDS. They are managed in Figma and re-exported by the styleguide. They represent the basic building blocks of our design, such as colors, typography, spacing, and other design properties. Whether you’re working on components, modules, or any other part of the design system, it’s tokens all the way down. Technically tokens map one-on-one with CSS custom properties.

Module

A module is a group of related components that work together to provide a specific functionality or feature. Modules can include multiple components and may have their own styles and behaviors. Modules will by-and-large be out-of-scope for the styleguide but will be implemented in Foundation’s React codebase as part of the headless setup.

Note

The term “module” is overloaded in software development (e.g., JavaScript modules, CSS modules). In this documentation, module refers exclusively to a CDS module as defined above.

Component

A component is a low-level building block of the user interface, typically representing a single UI element or a group of related elements.

Variant

A component variant is a predefined version of a component that represents a specific state, style, or configuration while sharing the same base structure.

Styleguide

The styleguide is the collection of tokens (as CSS custom properties), styles, and documented guidelines that define the visual and semantic aspects of developing for the DXP design language. Its instructions give you a common look and feel that’s consistent for all TME brands.