Theming a cloned site
The shared floor, and the two files where your site’s look actually lives.
Abstract illustration of angular panels stacking into a page
A cloned site inherits a shared visual floor. Your own look is a small set of token and component overrides in two files.

A cloned site already looks finished because it inherits a shared visual floor. Your site's own look is a small set of deltas on top of that floor.

The floor

The shared styles package defines the default tokens — colours, type scale, spacing — and the structural rules for the header, the main column and the footer. Every site gets this for free. On this template, the floor is the design: there are no overrides.

Where your overrides go

Each app owns a src/styles/ directory with two files that matter:

  • custom-variables.css — override the design tokens. A new brand colour, a different heading font, a wider content column: these are one-line changes here.
  • custom.css — component-level rules that only your site needs.

The import order is fixed: variables first, then the shared base, then your component overrides. Variables must be declared before the base consumes them.

Fonts

Fonts are loaded in the app and referenced by token. Change the token in custom-variables.css and the whole site follows.

A good rule

If you are fighting the floor with long, specific selectors, stop. Either the token you want already exists and you should set it, or the floor is missing something and that belongs in the shared package, not in your app.