Customizing Theme Colors & Fonts

Veltro uses Tailwind CSS 4 tokens in src/styles/theme.css and font definitions in src/config/fonts.json.

Colors

@theme inline {
  --color-primary: #c8f8a9;
  --color-primary-soft: #eef7fe;
  --color-accent: #0f3d3a;
  --color-body: #ffffff;
  --color-body-secondary: #fafafa;
  --color-body-dark: #10173d;
  --color-theme-dark: #040d43;
  --color-theme-light: #f5f6f7;
  --color-text-dark: #1e1e1e;
  --color-text-light: #ffffff;
  --color-border-primary: #adda90;
  --color-border-light: #eeeeee;
  --color-border-dark: #130d0d;
}

Update the --color-* tokens instead of replacing color classes across components. Review buttons, navigation, dark sections, form states, and footer contrast after a rebrand.

The same file also controls breakpoints, radii, line-height, aspect ratios, and the modular type scale through --text-base and --text-base-scale.

Fonts

Veltro ships with three configured families:

Inter: --font-primary, used for body text
Space Grotesk: --font-secondary, used for headings by default
Funnel Display: --font-ternary, available when Base.astro receives hasHeadingFontTernary={true}

Example font entry:

{
  "name": "Inter",
  "variants": [
    { "style": "normal", "weight": "400" },
    { "style": "normal", "weight": "500" },
    { "style": "normal", "weight": "600" },
    { "style": "normal", "weight": "700" }
  ],
  "preload": false,
  "display": "swap",
  "cssVariable": "--font-primary",
  "provider": "google",
  "subsets": ["latin"],
  "fallback": "sans-serif"
}

astro.config.mjs passes this file through generateAstroFontsConfig(), and Head.astro renders each configured font variable with Astro’s font component. Keep each cssVariable aligned with the classes generated by the theme.