How to Customize the AstroWind Template to Match Your Brand

When I built this site, I started from AstroWind — a free template that combines Astro with Tailwind CSS. It is fast, well structured, and full of ready-made widgets. It also ships with demo content, stock photos, and a generic look that thousands of other sites share.

Making a template feel like your site is mostly a matter of knowing which files to touch. After doing it for this portfolio, here is the checklist I would hand to anyone starting from AstroWind.

1. Start with src/config.yaml

Everything global lives here: the site name, canonical URL, SEO metadata, Open Graph defaults, and blog settings. This is the first file to edit, because it feeds the <title> template, social sharing cards, and the sitemap.

site:
  name: Teddy Kipchirchir
  site: 'https://teddynova.com'
  base: '/'

metadata:
  title:
    default: Teddy Kipchirchir
    template: '%s — Teddy Kipchirchir'
  description: 'Software development projects, technical blog posts, and practical solutions.'

Two details people miss: set site to your real domain (Astro uses it to build canonical URLs and the sitemap), and update the title.template so every page inherits your name instead of the template’s.

2. Typography: src/components/CustomStyles.astro

AstroWind wires fonts and colors through CSS custom properties, so you only change them in one place. Fonts are loaded with Fontsource packages and assigned to three variables: --aw-font-sans, --aw-font-serif, and --aw-font-heading.

A cheap trick that instantly de-templates a site: use a different face for headings than for body text. I kept Inter for body copy and switched headings to Space Grotesk:

---
import '@fontsource-variable/inter';
import '@fontsource-variable/space-grotesk';
---

:root {
  --aw-font-sans: 'Inter Variable';
  --aw-font-heading: 'Space Grotesk Variable';
}

Install the font first (npm install @fontsource-variable/space-grotesk) and remember to change the variable in both the :root block and the .dark block — the theme defines them separately for light and dark mode.

3. Colors: same file, both modes

Brand colors live right next to the fonts as --aw-color-primary, --aw-color-secondary, and --aw-color-accent. Tailwind picks these up through tailwind.config.js, so utilities like bg-primary and text-accent follow automatically — no need to hunt through components.

Pick your primary color, then derive a slightly darker secondary for hover states. Do it twice: dark mode usually needs a lighter, more saturated version of the same hue to stay readable on a dark background. My green is rgb(26 137 23) in light mode but rgb(107 218 102) in dark mode.

4. Navigation and footer: src/navigation.ts

The header links, call-to-action button, footer columns, and social icons are all plain data in one file. This is where templates betray you: AstroWind’s default footer is a clone of GitHub’s, with columns like “Enterprise” and “Customer stories” pointing at #.

For a personal site, delete all of it and write a footer that reflects what you actually have — mine is two columns, “Explore” (sections of the homepage) and “Connect” (GitHub, LinkedIn, Upwork). Fewer real links beat many fake ones.

5. Logo and favicons

• src/components/Logo.astro — the text or image in the header.
• src/assets/favicons/ + src/components/Favicons.astro — replace every size, not just favicon.ico. A leftover template favicon in a browser tab is surprisingly noticeable.
• src/assets/images/default.png — the fallback Open Graph image used when a page has no specific one. This is what shows up when someone shares your link on LinkedIn or X, so it is worth making a real one.

6. Replace the demo content — all of it

The template ships with lorem-ipsum blog posts in src/data/post/, placeholder pages (pricing, services, several homepage variants in src/pages/homes/), and Unsplash stock photos everywhere. Search the project for unsplash.com and lorem and treat every hit as a to-do.

This matters beyond aesthetics. The demo posts include canonical URLs in their frontmatter pointing at the template author’s demo site — if you leave them, you are telling search engines that your pages are copies of someone else’s. Delete the demo posts or rewrite them (this very article used to be one of them).

The order that works

If I did it again: config first, then fonts and colors, then navigation, then content. The first three take under an hour and make the site recognizably yours; the content is the part that never really ends.

The template gives you structure and performance for free. The brand is still your job.