Change the website's colors, fonts and logo

This guide is for whoever maintains the marketing website (the site/ folder in the repository). Every color on the site is defined once, as a design token, and every page reads from those tokens. Change a token and the whole site changes with it, in light mode, dark mode and the always-dark hero sections.

Where the colors live

Open site/src/styles/global.css. At the top there are three blocks:

Block	What it controls
:root	Light theme, the default
html.dark	Dark theme, used when the visitor picks Dark or their device is in dark mode
.band-dark	The always-dark sections: header, hero, reporting band, call-to-action band and footer

Each token is written as three numbers, red, green and blue, separated by spaces. For example --c-brand: 11 116 246; is the blue #0B74F6. This format lets the site use the same color at different strengths, for example a 10 percent tint behind a badge.

What each token does

Token	Used for
--c-bg	Page background
--c-surface	Alternate sections and subtle panels
--c-elevated	Cards
--c-text	Main text and headings
--c-muted	Secondary text
--c-border	Lines and card borders
--c-brand	Buttons, links, highlights
--c-brand-hover	Button hover
--c-call	Green, only for answered or live states
--c-warn	Amber, only for warnings such as the early-access pricing note
--c-err	Red, only for missed calls or spam risk

Change the brand color

1. Pick your new color and convert it to RGB. For example, a teal #0E9F8E is 14 159 142.
2. In :root, set --c-brand: 14 159 142; and pick a darker shade for --c-brand-hover.
3. In html.dark and .band-dark, set a lighter shade of the same color, so buttons and links stay readable on dark backgrounds. For example --c-brand: 45 212 191;.
4. Save, then run npm run dev inside site/ and check the home page in both themes with the theme button in the header.

Before and after, for the brand token only:

/* before */
--c-brand: 11 116 246;      /* blue #0B74F6 */
/* after */
--c-brand: 14 159 142;      /* teal #0E9F8E */

Warning: check contrast after any change. White text on the new brand color must stay easy to read. A quick check: run Lighthouse on the home page and look at the Accessibility score. It should stay at 95 or above.

Make the whole site darker or lighter

Change --c-bg, --c-surface and --c-elevated together in the block you want to change. Keep them close to each other: the surface should be only slightly different from the background, and cards only slightly lighter than the surface in dark mode.

Change the fonts

Fonts load in site/src/layouts/Layout.astro from Google Fonts, and are applied in global.css: headings use Geist, body text uses Inter. To switch, change the Google Fonts link in the layout, then update the font-family on body and on h1, h2, h3, h4 in global.css, and the fontFamily entries in site/tailwind.config.mjs.

Change the product name and logo

• The product name appears everywhere through one value: PRODUCT_NAME in site/src/config.ts.
• The logo mark is a small inline image in site/src/components/Header.astro. Replace the svg element with your own svg or an img tag.
• The browser tab icons are site/public/favicon.ico, favicon-32.png and apple-touch-icon.png. The full logo kit is in docs/brand/final/ (see docs/brand/README.md).

Change prices

Prices live in site/src/config.ts in PLANS, AGENCY_EXTRA and the AI_NOTES_* values. While PRICING_STATUS is 'placeholder', every price shows an “Early-access pricing” note. Set it to 'final' when the prices are confirmed.

Publish the change

From the site/ folder run npm run build, check the result with npm run preview, then deploy with npx wrangler deploy.