Theme Manager shapes the visual identity of the current client's storefront through shared visual values that storefront components inherit. Changing one of these values propagates the change across the storefront instead of requiring edits to individual components.

The navigation menu provides six destinations for configuring different categories of storefront visual values. Palette controls the storefront's colour system. Palette values are organised into Background, Text, AppBar, Footer, Primary, Secondary, Warning, Info, Success, and Error groups. Changing Primary updates each element that draws from that colour role. Typography controls the type scale used by the storefront. The Font Family setting lets you choose a font family. Typography arranges scale slots by the roles Display, Headline, Title, Label, and Body, with Large, Medium, and Small sizes where supported. This arrangement provides fine-grained control over text hierarchy. Box shadow controls shadow-depth values used across interface surfaces. The Box shadows screen provides shadows.0, shadows.1, shadows.2, shadows.3, shadows.4, and shadows.6 slots. Spacing controls the base unit from which the storefront's layout grid derives gap and padding values. A single slider sets the base spacing value, and relative spacing scales from it. Border radius controls the global corner-rounding value represented by --shape-borderRadius. The Border radii screen provides a radius slider and a Copy to clipboard control for the CSS variable name. Templates provides ready-made visual presets. Applying either the Dark or light preset replaces the current token values with the preset's complete set. Templates provide a consistent starting point without manual value-by-value configuration.

Each editor includes a live preview of sample storefront components, including product cards, buttons, a navigation bar, a footer, and state indicators such as toasters. The preview renders with the current values so you can assess their visual impact before saving. The preview uses illustrative sample data that you cannot edit in Theme Manager. Selecting a token slot opens its per-token editor for detailed changes such as setting a colour, adjusting a shadow definition, or entering an exact spacing number.

Save commits changes in the editor and remains unavailable until at least one change is made. Cancel discards unsaved edits. Palette and Border radius also provide Reset to return their values to defaults. After saving, Sync pushes the compiled build to the storefront. Theme packages belong with site and page definitions within the presentation and composition boundary. The presentation and composition boundary does not own business rules, identity policy, data authority, integration, localization truth, or production activation.

Use the Palette screen reference for its colour controls and the Typography screen reference for its type controls. Use the Box shadow, Spacing, and Border radius screen references for the remaining token controls.