Skip to content
UT Studio
Search products
DocumentationCustomisationDesign systems

Customisation

Where to change colour, type, spacing and copy so that the change holds across the whole template.

UT Studio7 min read

Every template is built the same way underneath: a token layer, primitives that read only from tokens, and page compositions that read only from primitives. Customising one is a matter of finding which of those three layers your change belongs to.

Change the tokens, not the components

Colour, radius, spacing and the type scale are defined once as CSS custom properties. Every component reads them. Changing the accent colour is one value; hunting the hex code through forty components is what happens when somebody skips this page.

app/globals.css
:root {
  --color-primary: oklch(0.55 0.19 258);
  --color-primary-hover: oklch(0.49 0.19 258);
  --radius-panel: 0.75rem;
}

Themes are token sets, not stylesheets

Light and dark are two values for the same token names. If a change looks right in one theme and wrong in the other, the change went into a component instead of a token.

Change copy in the content layer

No template keeps copy inside a component. Every string, link and list lives in a typed module under `content/`, which is what makes a template translatable, reviewable in a pull request, and ready to move to a CMS without touching the UI.

content/home.ts
export const HOME_HERO = {
  eyebrow: 'Production-ready templates',
  heading: 'Build faster with templates made for real products.',
  body: 'Complete applications rather than landing pages.',
} as const;

Adding a page

  1. Create the route. App Router, so a folder and a `page.tsx`.
  2. Add its content module beside the others in `content/`.
  3. Compose it from existing sections before writing new ones. Most new pages are a reordering.
  4. Add it to the route manifest so it reaches the sitemap.

Removing what you do not need

Templates ship complete, which means they ship more than you want. Deleting is safer early: remove the route, remove its content module, then run a type-check. Anything still referencing what you deleted fails to compile rather than failing in production.

Terminal
pnpm typecheck

Keeping upgrades cheap

  • Keep your edits in the content and token layers where you can. Those merge cleanly.
  • When you must edit a component, prefer adding a new one beside it over rewriting it in place.
  • Read the release notes before upgrading. Breaking changes are marked as such, per release.

Templates built on an explicit system

Both expose the token and primitive layers as the product, which makes them the clearest reference for how the rest are put together.

Templates mentioned here

Everything above is written against real products. These are the ones this page draws on.

Read next