Colors, fonts and images

Accent color

Set accent in src/site.config.ts. The buttons’ hover state, the header badge, the round hero badge, the underline, the dots in the toolbox and the testimonial backgrounds all follow it, in both light and dark mode.

Text in the accent color is darkened (or lightened in dark mode) automatically so it stays readable. Bright, saturated colors work best, such as #ff5a36, #2f7cff or #16a34a.

The full palette

The other colors are tokens at the top of src/styles/global.css:

Token	Used for
--bg	Page background
--surface	Cards, the theme button, the toolbox
--ink	Text and dark buttons
--muted	Secondary text
--line	Borders and dividers
--inverse-bg, --inverse-ink, --inverse-muted	The contact panel, which uses the opposite colors

Each token is set twice: once for light mode in :root, and once for dark mode in the two dark-mode blocks below it. Change both to keep the modes in step. Keep enough contrast between --ink, --muted and --bg; the default palette meets the WCAG AA standard.

Fonts

Headings use Bricolage Grotesque, loaded with Astro’s built-in Fonts API. It is self-hosted (no requests to Google), preloaded, and paired with a fallback font whose size is matched to it, so text doesn’t jump when the font arrives. Body text uses each device’s system font, which costs nothing to load.

Use a different heading font

1. Install the font from Fontsource. Variable fonts are the best choice:

npm install @fontsource-variable/inter

2. In astro.config.mjs, change the font’s name and src:

fonts: [
  {
    provider: fontProviders.local(),
    name: 'Inter',
    cssVariable: '--font-display',
    fallbacks: ['sans-serif'],
    options: {
      variants: [{ src: ['@fontsource-variable/inter/files/inter-latin-wght-normal.woff2'], weight: '100 900', style: 'normal' }],
    },
  },
],

The exact file name is in node_modules/@fontsource-variable/<font>/files/. Pick the latin-wght-normal file.

3. Remove the old package with npm uninstall @fontsource-variable/bricolage-grotesque.

Use a different body font

Body text uses the --body token in global.css. Set it to the heading font with --body: var(--display);, or add a second font in astro.config.mjs with its own cssVariable and add a matching <Font> tag to src/layouts/Base.astro.

Images

Image	Where	Best size
Portrait	src/assets/, imported in site.config.ts	900×1125 or larger, 4:5
Project covers	src/assets/work/	1200×900 or larger, 4:3
Post covers	src/assets/posts/	1600×900
Share image	public/share.png	Exactly 1200×630
Favicon	public/favicon.svg	Square SVG

Images in src/assets are resized and converted to AVIF and WebP when you build, and visitors only download the size their screen needs. Images in public/ are copied exactly as they are.

Export photos as high-quality JPGs; there is no need to compress them yourself.

Rounded corners and width

--radius sets the corner radius of cards and images, and --wrap sets the maximum width of the page. Both are near the top of global.css.