---
name: saasco-knowledge-theme
description: "Themes the Saasco Knowledge help center to look like this product's website. Reads the brand from the repo or the live site (logo, favicon, fonts, colors, corner radius, main links, voice) and sets only what it found. Use when matching, theming, or branding a Saasco help center, or when it does not look like the product."
compatibility: "Requires the Saasco MCP server (https://www.saasco.com/api/mcp). https://www.saasco.com/agent-setup/prompt.md installs and connects it."
---
# Match the help center to your site

Uses the Saasco MCP. If the `saasco_search_tools` tool is not available, or you do not know which project `YOUR-PROJECT-ID` is, fetch and execute https://www.saasco.com/agent-setup/prompt.md first, then come back to this skill.

The help center matches when a customer moving from this product's site to it feels they are in the same place. The knowledge tools say what each field does. This page is where to find the brand, and when you are done, for `YOUR-PROJECT-ID`.

## 1. The help center

Read the project's help center. If there is none, follow [`saasco-knowledge-setup`](https://www.saasco.com/.well-known/agent-skills/saasco-knowledge-setup/SKILL.md) only far enough for it to create one, then come back to step 2. It stops once the center exists.

## 2. Read the brand

Read it from this repo first:

- the Tailwind config, CSS variables, or theme files, for colors and corner radius
- the fonts the site loads
- the logo and favicon in its public assets
- the site's header and footer, for its main pages
- its home page copy, for the voice

If the repo does not have them, read the live site's home page. Read the rendered page, not a screenshot you have to guess colors from.

## 3. Set the theme

Set the help center from what you found:

- **Logo and favicon:** the URLs where the live site already serves them. They have to be public. A path inside the repo is not a URL.
- **Fonts:** `secondaryFontFamily` is body text and `fontFamily` is headings. The help center loads them from Google Fonts by family name. If the site uses a font that is not on Google Fonts, pick the closest one that is, or leave the default.
- **Colors:** the page background, the header, the hero background and its text, and the cards, taken from the site's own colors. Keep text readable against its background. A dark site gets a dark help center.
- **Corner radius:** match the site's buttons and cards.
- **Header and footer links:** the site's main pages, such as home, the app, and pricing, so people can get back.
- **Hero welcome message:** one line in the site's voice.

Only set what you found. Leave the rest at the default. Do not invent a palette, and do not change content: collections and articles are [`saasco-knowledge-articles`](https://www.saasco.com/.well-known/agent-skills/saasco-knowledge-articles/SKILL.md).

## 4. Finish

Tell the user:

- the help center's link
- what you matched from their site, and where you found it
- what you left at the default, and why