Setup
The styleguide can be consumed in three ways depending on where you’re working. Pick the path that matches your context.
- AEM — for headless architects integrating the main TME site, and NMSC developers shipping HTML5 components into AEM pages. Styles are already there: no install, no import.
- Package — for React apps, Storybook, sandboxes, and anything with a build pipeline outside AEM. Install
@tmedxp/styleguidefrom npm. - Static download — for prototypes, slides, or fresh repos that don’t have the package registry wired up. Grab the fonts, logos, and favicon as a single zip.
Whichever path you take, the runtime concepts in Architecture — CSS layers, the root reset, brand switching, draft features — apply the same way.
AEM
Zero-install path — consume the auto-injected styles correctly inside AEM.
Package
Install the styleguide via npm for React apps, Storybook, or any host outside AEM.
Static
Standalone fonts, logos, and favicon for prototypes, slides, or repos without registry access.
Root font size
Section titled “Root font size”Every path needs a root font size of 62.5%, so 1rem is 10px. The legacy AEM platform is built on that root and every token dimension is sized against it (--tng-spacing-24: 2.4rem is 24px). It is a platform constraint, not a setting you can change.
The styleguide sets html { font-size: 62.5% } for you, as the lowest-priority rule on the page. Don’t set a font-size on html or :root in your own CSS. Any rule you write there wins over the styleguide’s, and on any other root every CDS dimension renders at the wrong size. At the browser default of 100%, everything is 1.6× too large.