Skip to content

AEM

If you’re building inside AEM — whether you’re a headless architect integrating the main TME site, or an NMSC developer adding HTML5 components to a page — the styleguide is already there.

No install step

Section titled “No install step”

The styles are wired into the page globally as part of the DXP Headless build. You do not import CSS, install a package, or add anything to your team’s build pipeline. Doing so would double-load the styleguide and conflict with the global version.

<!-- Already on the page. Just use the classes. -->
<button class="tng-button">Buy now</button>

What you still need to know

Section titled “What you still need to know”

Even with zero install, four runtime concepts shape how your markup behaves:

  • CSS layers — the styleguide loads inside @layer rules. If you add styles in an HTML5 Component without thinking about layers, they may quietly lose to the styleguide. Read this before writing CSS that overlaps with a CDS component.
  • Root reset — CDS components live inside a .tng-root container which resets default element styles. Legacy components nested inside a tng-root need .tng-legacy-apply to recover their original styling.
  • Brand switching — the active brand is set via data-brand on the <html> element. AEM sets this for you, but it’s worth knowing it exists when debugging brand-specific token values.
  • Drafts — components marked Draft may change without a major version bump. Check the badge before shipping a Draft component into a production page.