Maia docs
Colors, fonts and images
Match Maia to your brand, change the heading font, and replace the illustrations with your own photos.
Accent color
Set accent in src/site.config.ts. Buttons on hover, the step numbers, the italic headline words, star ratings and links all follow it. Text in the accent color is automatically darkened so it stays easy to read.
Warm, medium-bright colors work best: terracotta #e2725b, sage #6e9f7a, berry #c2477a or citrus #f0a03c.
The palette
The other colors are tokens at the top of src/styles/global.css:
| Token | Used for |
|---|---|
--bg |
Page background |
--surface |
Cards and form fields |
--ink |
Text, dark buttons and the footer |
--muted |
Secondary text |
--line |
Borders |
--sage, --peach, --butter, --sky |
The four card tints |
--forest |
The footer and closing band |
Keep enough contrast between --ink, --muted and --bg. The defaults meet the WCAG AA standard.
Heading font
Headings use Fraunces, a warm serif, through Astro’s built-in Fonts API. It’s self-hosted (no Google requests), and a fallback font sized to match prevents text from jumping while it loads. Body text uses each device’s system font, which costs nothing to load.
To use a different font, install it from Fontsource:
npm install @fontsource-variable/playfair-displayThen change the font in astro.config.mjs: set name, and point the src of each variant at the font’s files in node_modules/@fontsource-variable/<font>/files/, using the latin-wght-normal and latin-wght-italic files.
Replacing the illustrations
The demo uses illustrations so it loads instantly and has no licensing worries. Your own photos will make the site feel like yours.
| Image | Where it’s set | Best size |
|---|---|---|
| Hero image | hero.image in site.config.ts |
1100×1100, square |
| Portrait | about.portrait in site.config.ts |
900×1125, portrait (4:5) |
| Recipe covers | cover in each recipe |
1600×1200 (4:3) |
| Program and post covers | cover (optional) |
1600×900 |
| Share image | public/share.png |
Exactly 1200×630 |
| Favicon | public/favicon.svg |
Square SVG |
Put your photos in src/assets/ and update the imports or cover paths, for example:
import portrait from './assets/lena.jpg';Photos are resized and converted to AVIF and WebP when you build, and each visitor downloads only the size their screen needs. Export them as good-quality JPGs; there’s no need to compress them yourself.
The hero image sits on a soft green shape. A photo with a plain or transparent background, such as a PNG cut-out of a bowl or yourself, looks best there.
Corners and width
--radius sets how rounded cards and images are, and --wrap sets the maximum page width. Both are near the top of global.css.