Branding

This page explains only two things:

• How to change the main color of the site
• How to change the logo image

You will only edit simple values in two files:

• config/branding.ts
• config/header.ts

Change the main color

1. Open the file config/branding.ts.
2. You will see something like:

Copyexport const colorsConfig = {
  primary: "#19D773",
  "primary-foreground": "#000000",
};

3. Replace "#19D773" with your brand color (for example "#FF3B6A").
4. If your color is dark, set "primary-foreground" to "#FFFFFF" (white).
   If your color is light, keep it "#000000" (black).
5. Save the file and look at your browser. Buttons and highlights will use the new color.

You can get color codes (like #FF3B6A) from any online color picker.

Change the logo

1. Put your logo image inside the public folder.
   For example: public/my-logo.png.
2. Open the file config/header.ts.
3. Find this part at the top:

Copylogo: {
  src: "/logo.svg",
  altKey: "Sifo",
  width: 32,
  height: 32,
},

4. Change the src to your file path, for example:

Copysrc: "/my-logo.png",

5. Update width and height so the logo looks good (for example 48 and 48).
6. Save the file and refresh the page. The new logo will appear in the top bar.

Logo text in each language

The small text description of the logo (used for accessibility) comes from the translation files:

• English: config/messages/en.json
• Spanish: config/messages/es.json

Inside those files, look for the "Header" section and the "logoAlt" value.
Change the text there in both files to describe your own brand.