Skip to content
VortexNext.js
Get Vortex

Make it yours

Colors & fonts

Change the color palette and typefaces to match your brand.

Colors

Each template has a small, named color palette. The Spa template uses these colors (yours will have different names and values, but works the same way):

plum #482638Headings, dark backgrounds, main buttons
berry #78435BLinks, highlights, button hover
rose #B86F83Decorative lines and large text only
blush #F2DDE2Soft background panels
petal #FAF0F1Very light background sections
ivory #FFFCF7Main page background
ink #30272BBody text
muted #796B70Secondary text
line #E9DDE0Thin borders and dividers
olive #777B5ABotanical accents

Change a color

  1. Open the styles file

    Open src/styles/globals.css. Near the top you will find the palette:

    src/styles/globals.css
    @theme {  --color-plum: #482638;  --color-berry: #78435b;  --color-rose: #b86f83;  --color-blush: #f2dde2;  --color-ivory: #fffcf7;  /* … */}

  2. Replace the color code

    Change the value after the colon, for example --color-plum: #1f3a5f; for a deep navy. Keep the name exactly the same. The whole website updates when you save.

  3. Update theme.ts to match

    Open src/config/theme.ts and change the same color in the palette list. The website reads its colors from globals.css; theme.ts is the readable reference copy, so keep the two matching.

Fonts

The Spa template uses two fonts: Bodoni Moda for headings and Jost for body text. Both are free (SIL Open Font License) and included in public/fonts, so your site never depends on an outside font service.

Fonts are loaded in src/app/layout.tsx. There are two ways to change them.

Option A: Use a Google Font (easiest)

Pick fonts on fonts.google.com. Next.js downloads them when you build, and serves them from your own website.

  1. Change the import line

    At the top of src/app/layout.tsx, replace import localFont from "next/font/local"; with the fonts you chose. Spaces in names become underscores:

    src/app/layout.tsx
    import { Inter, Playfair_Display } from "next/font/google";

  2. Replace the two font blocks

    Find the two blocks that start with const bodoni = localFont( and const jost = localFont(. Replace both blocks with:

    src/app/layout.tsx
    const bodoni = Playfair_Display({ subsets: ["latin"], variable: "--font-bodoni", display: "swap" });const jost = Inter({ subsets: ["latin"], variable: "--font-jost", display: "swap" });

    Keep the names bodoni, jost, --font-bodoni and --font-jost exactly as they are, even though the fonts are different. The rest of the template looks for these names. The first font is used for headings, the second for body text.

  3. Update theme.ts (optional)

    In src/config/theme.ts, update the font names under typography so your notes stay accurate.

Option B: Use your own font files

Copy your .woff2 font files into public/fonts. In src/app/layout.tsx, change the path values inside the existing font blocks to your file names:

src/app/layout.tsx
const bodoni = localFont({  src: [    { path: "../../public/fonts/YourHeadingFont.woff2", weight: "400 900", style: "normal" },  ],  variable: "--font-bodoni",  display: "swap",});

Animation speed

Prefer calmer or snappier motion? Open src/config/theme.ts and find motionTokens. Bigger numbers are slower (they are seconds):

src/config/theme.ts
duration: {  fast: 0.35,  base: 0.7,  slow: 1.1,  draw: 2.4,},

Visitors who have “reduce motion” turned on in their device settings see no animations at all.