Package

For React apps, Storybook setups, sandboxes, and any project with its own build pipeline outside AEM, install the styleguide as an npm package.

Install

npm

npm install --save-dev @tmedxp/styleguide

pnpm

pnpm add --save-dev @tmedxp/styleguide

Import

Pick the entry that matches your needs. The branded entries bundle a brand’s tokens with the full styleguide — the simplest setup. The brand-neutral styles.css ships every component without tokens, for hosts that apply brand tokens at runtime (it’s what the multi-brand setup below uses).

import '@tmedxp/styleguide/toyota/styles.css'; // full styleguide + Toyota tokens
import '@tmedxp/styleguide/lexus/styles.css'; // full styleguide + Lexus tokens
import '@tmedxp/styleguide/styles.css'; // full styleguide, no tokens

The package also exposes brand namespaces from its JS entry:

import { Toyota } from '@tmedxp/styleguide';
import * as Toyota from '@tmedxp/styleguide/toyota';

Toyota.ICONS; // Toyota.Icon[]

All exports

Entry	Contents
@tmedxp/styleguide	Global consts and brand namespaces
@tmedxp/styleguide/assets.css	Styleguide assets
@tmedxp/styleguide/styles.css	Full styleguide, all components, no brand tokens
@tmedxp/styleguide/lexus	Lexus namespace
@tmedxp/styleguide/lexus/assets.css	Styleguide and Lexus brand assets
@tmedxp/styleguide/lexus/theme.css	Branded foundation + Lexus tokens, no components
@tmedxp/styleguide/lexus/styles.css	Full styleguide with Lexus tokens
@tmedxp/styleguide/lexus/components/*.css	One self-contained Lexus component, e.g. lexus/components/button.css
@tmedxp/styleguide/lexus/forms/*.css	One self-contained Lexus form component, e.g. lexus/forms/stepper.css
@tmedxp/styleguide/lexus/cards/*.css	One self-contained Lexus card component, e.g. lexus/cards/model-card.css
@tmedxp/styleguide/toyota	Toyota namespace
@tmedxp/styleguide/toyota/assets.css	Styleguide and Toyota brand assets
@tmedxp/styleguide/toyota/theme.css	Branded foundation + Toyota tokens, no components
@tmedxp/styleguide/toyota/styles.css	Full styleguide with Toyota tokens
@tmedxp/styleguide/toyota/components/*.css	One self-contained Toyota component, e.g. toyota/components/button.css
@tmedxp/styleguide/toyota/forms/*.css	One self-contained Toyota form component, e.g. toyota/forms/stepper.css
@tmedxp/styleguide/toyota/cards/*.css	One self-contained Toyota card component, e.g. toyota/cards/model-card.css

Load only what a page renders

The full {brand}/styles.css bundle carries every component on every page. A consumer that can tie CSS loading to component rendering — an SSR server emitting <link>s, or a bundler that code-splits CSS per component — can instead load a brand theme plus only the per-component entries a page actually uses. A page rendering a handful of components ships markedly less CSS this way.

Two pieces make up a chunked page:

1. {brand}/theme.css — the branded foundation: reset, foundations, layouts, utilities, plus the brand’s semantic + primitive tokens. No component CSS, no component tokens. Load once per page.
2. {brand}/components/{name}.css (and {brand}/forms/, {brand}/cards/) — one self-contained component each, mirroring the styleguide source dirs. Each entry already has that brand’s component tokens inlined, so it works the moment it’s loaded next to the theme — no separate token chunks, no @tmedxp/figma-tokens dependency.

Single-brand SSR

A server that knows the brand per route emits the theme and the component entries the page renders. Nothing else — each component entry carries its own brand tokens:

<link rel="stylesheet" href="@tmedxp/styleguide/toyota/theme.css" />
<link rel="stylesheet" href="@tmedxp/styleguide/toyota/components/button.css" />
<link rel="stylesheet" href="@tmedxp/styleguide/toyota/components/alert.css" />

Each entry only ever carries its own brand’s tokens, so a Toyota build never ships Lexus tokens (and vice versa). Components compose freely: an alert that renders a link picks up the link’s colours from toyota/components/link.css when that entry is present.

Multi-brand

Hosts that render both brands on one page — kept apart by data-brand — load the brand-neutral aggregate once, then both brands’ tokens side by side. This is what the DX Playbook and the visual-test harness do: they render every component, so chunking buys them nothing, and they stay on the aggregate.

@import url('@tmedxp/styleguide/styles.css'); /* base + ALL components, no tokens */
@import url('@tmedxp/styleguide/lexus/assets.css');
@import url('@tmedxp/styleguide/toyota/assets.css');
@import url('@tmedxp/figma-tokens/lexus.css') layer(tng.foundations);
@import url('@tmedxp/figma-tokens/toyota.css') layer(tng.foundations);

Load order

Cascade layers keep load order robust. The theme declares the layer order; component entries (and the brand tokens they inline) import under tng.components, while the theme’s semantic + primitive tokens resolve under tng.foundations. Order the tags theme → components for readability, but the layers — not source order — fix the cascade. Override styleguide rules from the unlayered tng.userstyles layer.

A component entry loaded without {brand}/theme.css renders unstyled — its semantic tokens are undefined. Always pair component entries with a theme.

Set the active brand

The active brand is selected via a data-brand attribute on the <html> element. Set it once at the host level — your app, your Storybook preview, your sandbox — and every token resolves accordingly.

<html data-brand="lexus">
  ...
</html>

See Brands for how the attribute drives token resolution.

Fonts

The brand fonts ship with the package. For a quick drop-in, reference the font-face stylesheet the styleguide exposes; the Storybook section below shows where to load it.

Storybook

Update your previewHead with the assets and styles for the brand you’re showing:

preview-head.html

<link
  rel="stylesheet"
  href="/node_modules/@tmedxp/styleguide/toyota/assets.css"
/>
<link
  rel="stylesheet"
  href="/node_modules/@tmedxp/styleguide/toyota/styles.css"
/>

React component library

If you’re using React, you may also want the headless component library that consumes the styleguide.

npm

npm install --save-dev @tmdxp/dxp-headless-components

pnpm

pnpm add --save-dev @tmdxp/dxp-headless-components

import { Overlay } from '@tmdxp/dxp-headless-components';

export const Component = () => <Overlay />;

What else to know

The runtime concepts in Architecture — CSS layers, the root reset, brand switching, and how drafts work — apply once the styleguide is loaded, regardless of how you installed it.