Match your brand

There are two ways to style the chat.

Option 1: Use your site’s tokens

The components use your Tailwind tokens (--primary, --background, --muted, …) from your global CSS. Change those and the chat changes with them. See Installation.

Option 2: Use a Nebulas brand profile

If your brand is already a brand profile in Nebulas, give its name to the server config:

src/lib/nebulas.ts

configureNebulasServer({
  nebulasApiUrl: process.env.NEBULAS_API_URL,
  nebulasBrandName: "Acme",
  // Optional: only search in this module
  nebulasBrandModuleId: process.env.NEBULAS_BRAND_MODULE_ID,
});

The config endpoint (/api/a2a/config) looks up the brand, exports its design system as CSS and returns it as brandCss. A2AChat applies it to its own root element only, so the chat is branded and the rest of your page isn’t affected.

How brand colors map to the chat

Brand variable	Chat variable
--color-background	--background
--color-surface	--muted
--color-text	--foreground
--color-text-muted	--muted-foreground
--color-primary	--primary, --ring (a readable --primary-foreground is computed)
--color-border	--border, --input
--font-body (or --font-heading)	font-family

Every other variable is passed through unchanged, so your own CSS can use var(--color-accent) inside the chat.

Note

• Only hex colors are mapped to chat tokens.
• Brand lookups are cached for about 10 minutes.
• If the brand can’t be found, the chat still opens with your default styles (brandCss: null), and the reason is logged on the server.
• The floating widget’s launcher button and header bar keep your app’s styles. Only the conversation uses the brand. Style the button with fabClassName.

Forms

NebulasSurface uses the brand set on the widget itself (theme="brand", the default). Pass theme="product" to use your page’s tokens instead.

Theming your own components

brandChatStyle() and parseBrandCssVariables() are exported from @gnomondigital/nebulas-kit-core/client (safe to use in the browser). resolveNebulasBrand() is exported for server code. Use them to apply the same brand to your own components.