Skip to main content

Rebranding via tokens

Swap colors, fonts, and spacing by editing design tokens in global.css.

Cosmo uses Tailwind CSS v4, where every variable declared under @theme in src/styles/global.css becomes a Tailwind utility automatically.

How it works

Add or change a token under @theme:

@theme {
  --color-brand-primary: oklch(0.62 0.19 250);
  --font-display: "Inter", sans-serif;
}

Then use it as a utility anywhere:

<h1 class="bg-brand-primary font-display">Hello</h1>

Where to start

  1. Open src/styles/global.css
  2. Replace the placeholder color tokens with your brand palette
  3. Swap fonts in two places: the fonts array in astro.config.mjs (provider, name, and cssVariable), and the matching <Font cssVariable="..." preload /> tags in src/layouts/BaseLayout.astro