Documentação

Configuração

branding.json, product.json, pricing.json e features.json.

Everything that changes between one product and another lives in config/. Nothing in config/ is code: it is data the apps read at build time, so rebranding is an edit, not a refactor.

The files

File Controls
branding.json primaryColor/secondaryColor (drive the CSS theme of all three apps), logoText, optional fonts and themeModes
product.json slug and name, the tagline, the locales/defaultLocale the apps ship with, and demoMode
pricing.json Plans, intervals and what each tier includes
features.json Feature flags that switch whole sections of the apps on or off
seo.json Titles, descriptions and Open Graph defaults
links.json External destinations (social, support) plus navigation: the header, footer, sitemap and the entries each app shell hides

Product name and support email reach the apps as mirrored env vars (.env) — run npm run bootstrap after editing product.json/links.json, or update .env by hand and run npm run validate-config to confirm they still match. Theme, typography and navigation are read from config/*.json at build time instead, so changing them needs no environment variable. The logo mark itself (public/brand-*.svg) is a static asset and is not generated from config; replacing it is a manual step.

Changing the look without touching core files

// config/branding.json
{
  "fonts": { "sans": "Mulish:wght@400;600", "display": "Playfair Display:wght@500" },
  "themeModes": ["light"]
}

Anything the tokens do not cover belongs in apps/<app>/src/product/theme.css. That file is yours, it is imported after the core stylesheet, and core updates never touch it.

Validating a change

npm run validate-config

Each file has a schema, and the validator runs in CI as well as in the pre-commit hook. A value that fails the schema fails the build rather than rendering an empty section.

Secrets do not go here

config/ is committed. Anything secret (database URLs, provider keys, tokens) belongs in environment variables. npm run validate:frontend-env reports which variables each frontend expects and which are missing.

← Primeiros passosFrontends →