Colours, fonts and photos

Colours

CarrGo’s colours start in scripts/palette.mjs. Each colour family is a hue and a strength, and the script turns them into eleven shades from 50 (lightest) to 950 (darkest):

Family	Used for
taxi	The brand yellow: Book buttons, highlights, star ratings
asphalt	Text, lines, surfaces and the black second button
route	Info notes and focus outlines
go	Success messages and “drivers nearby”
red	Form errors

To change a colour:

1. Change its hue (0–360) or chroma (strength) in scripts/palette.mjs.
2. Run npm run palette.
3. Paste the printed CSS over the contents of :root in src/styles/tokens/colors.css.
4. Open /style-guide/ and check the contrast table. Every pair should say Pass.

The yellow’s middle shades sit lighter than the others (the at setting) so they stay vivid. Keep that if your brand colour is a yellow or lime.

Blocks never use the shades directly. They use names such as --brand, --ink and --surface, set in src/styles/tokens/theme.css with a light and a dark value each. Edit that file to decide, for example, which shade the Book button uses.

Dark mode

The site follows the visitor’s system setting, and the switch in the header lets them choose. The taxi tone stays yellow and the night tone stays dark in both modes. To keep a section the same in both modes, give it one of those tones.

Fonts

Headings use Archivo, loaded from the @fontsource-variable/archivo package in astro.config.mjs. Body text uses the visitor’s system font, so it costs nothing to load.

To change the heading font:

1. Install a Fontsource variable font, for example npm install @fontsource-variable/sora.
2. In astro.config.mjs, change name and the src path to that package’s Latin file, for example @fontsource-variable/sora/files/sora-latin-wght-normal.woff2.

Photos

Your photos go in src/assets/images/. Pages refer to them by file name (image: my-photo.jpg). Astro resizes them and makes modern AVIF and WebP versions when you build, so upload them as large as you have; 2000 pixels wide is plenty.

• Replace a demo photo: save your photo over it with the same name, and every page that uses it updates.
• Cropped photos: where a photo is cropped into a strip, imagePosition chooses which part to keep: top, center, bottom or a value like "50% 80%".
• Alt text: describe what the photo shows in imageAlt. Screen readers read it out.
• Missing photos: if a page asks for a photo that isn’t there, scripts/placeholders.mjs draws a stand-in with that name the next time you run the site, so nothing breaks. Your own photos are never overwritten.

The demo photos were made for CarrGo with AI image generation and are yours to use. You’ll want your own cars and drivers in the end, though: riders trust real photos.

Logo

The logo is in src/components/ui/Logo.astro: a taxi icon on a yellow square, followed by your company name. Replace the icon with your own SVG or an image there.