One of the best things about this template is how easy it is to make it your own. No need to dig through dozens of files — all the important settings are centralised.
The One File That Matters Most
Open src/data/siteData.ts and you will find every piece of business information in one place:
- Business name and tagline
- Phone and email
- Business hours
- Services you offer (title and description for each)
- Team members (name, role, and photo URL)
- Navigation links (add, remove, or reorder pages)
- Trust bar items (the badges shown on the homepage)
- Social media links (set to empty string to hide any)
Changing Colours
Open src/styles/theme.css and edit the @theme block — this is the single source of truth for colours, border radius, type scale, and spacing. Tailwind v4 reads these values and auto-generates utility classes (bg-primary, text-accent, rounded-md, etc.).
For example, to change the primary colour from navy to teal, update --color-primary: #1B3A6B to your new hex value. No other file needs to change.
Changing Fonts
Fonts are loaded through Astro’s built-in font optimizer. To swap fonts:
- Update the font names in
src/config/brand.ts - Update the
fontsarray inastro.config.mjsto match
This site uses Atkinson Hyperlegible Next for headings and Inter for body text. You can use another Google Font by updating both the brand configuration and Astro’s font configuration.
Adding Pages
To add a new page, create a .astro file in src/pages/. For example, src/pages/faq.astro would be available at /faq. Then add it to the nav array in siteData.ts to include it in the navigation.
Writing Blog Posts
Add a new Markdown file to src/content/blog/. Each post needs frontmatter with title, description, date, and tags. The filename becomes the URL slug.
Make it yours and ship it!