Change the look

The look of the demo is three things: theme tokens, per-region settings, and two layouts. Change the right one and the rest follows.

Theme tokens

frontend/src/styles.css holds every colour as a token:

Tokens	Colour
--color-cp-*	The ClaimPilot product chrome and panels
--color-chat*	The assistant: the panel, chips, bubbles
under [data-region="us"]	The US overrides of the ClaimPilot tokens

Components use the tokens through Tailwind utility classes (bg-cp-surface, text-chat), so changing a token recolours everything that uses it, in both products.

styles.css is shared with the embedded element, so a token change reaches the demo and every host. index.css holds the app's own page-level rules (html and body sizing, the canvas) and is never loaded inside the element.

The highlight marker (cp-highlight) is deliberately the same amber in both products, so it never blends into the UK greens or US oranges.

Palettes are approximations

The two ClaimPilot palettes were approximated from screenshots. Swap the tokens in styles.css and the marks in regions.ts when product brand guidance arrives.

Per-region chrome

frontend/src/region/regions.ts declares, for each product: the top-bar menu and which item opens the claims list, where the logo sits, the mark's colours and style (disc or ring), and the assistant glyph's colours. Change a value there; nothing else reads the region directly.

The assistant's names

frontend/src/brand/BrandContext.tsx sets the names shown on screen (Claimpilot Chat or Clonepilot Chat), and the same brand id is sent to the Worker so the assistant calls itself the same thing. The prompt side is applyBrand() in api/src/prompts/catalogue.ts.

The embedded element

The element renders into a shadow root with its own stylesheet (frontend/src/embed/embed.css, which imports the shared tokens). Two details matter when changing styles there:

• Tailwind implements some utilities through registered custom properties (@property). A shadow root ignores @property rules, so the element hoists those registrations to the host document and keeps every other rule scoped.
• The overlay panel uses z-index: 2147483000, because :host creates no stacking context and the host's own fixed header must not cover it.

Add a region

1. Add the id to RegionId and a Region to REGIONS in regions.ts: locale, currency, date format, nav, brand mark, glyph.
2. Add its token overrides to styles.css under [data-region="<id>"].
3. If the claim screen differs, add a layout over ClaimView and choose it in ClaimPage.tsx. Carry the same data-panel anchors.
4. If the language differs, add a Locale value in packages/shared/src/chat.ts and a system.locale_<id> prompt in the catalogue, and select it in assemblePrompt.
5. Add the flag to region/Flag.tsx.
6. Extend the region tests in frontend/src/region/region.test.tsx and the region switch in e2e/claims.spec.ts.