Glossary
These terminology is used throughout the styleguide documentation to ensure clarity and consistency.
Component
Section titled “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.
Design System
Section titled “Design System”The 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 single source of truth for designers and developers to create consistent user experiences across different applications.
Element
Section titled “Element”An element always refers to an HTML element, such as a <div>, <span>, or any other HTML tag. It is the basic unit of structure in a web page.
If possible we will always use semantic HTML elements like <header>, <nav>, <main>, <section>, and so on, to ensure better accessibility and SEO.
Many components map one-on-one to elements.
Module
Section titled “Module”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.
Reference Guide
Section titled “Reference Guide”This very website is the Reference Guide. It’s used to document the styleguide and its various moving parts as well as a comprehensive resource for developers to understand how to developer with and for DXP and AEM.
Styleguide
Section titled “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.
Tokens
Section titled “Tokens”Tokens are the smallest unit of a design system. They are managed in Figma and exported to the styleguide through automation. They represent the basic building blocks of the 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’ll be tokens all the way down.