Brands
The styleguide supports three brands — Toyota, Lexus, and Kinto. Each brand has its own set of token values (colors, typography, spacing accents) that resolve at runtime depending on which brand is active.
Setting the active brand
Section titled “Setting the active brand”The active brand is selected by setting a data-brand attribute on the <html> element:
<html data-brand="lexus"> ...</html>Every token resolves against the value matching data-brand. Switching brands is a matter of changing the attribute — nothing in your markup or CSS needs to change.
In AEM the attribute is set for you by the page template. When installing the styleguide as an npm package, you set it once on the host element of your app, Storybook preview, or sandbox.
In Figma, the equivalent concept is a mode. A mode is a brand-specific theming layer that switches between token value sets while keeping the same token names. The runtime data-brand attribute is the web equivalent — same idea, different surface.
See the Mode entry in the glossary for how the term is used across Figma and the styleguide.