multi-brand

name	multi-brand
description	Multi-brand architecture for OUDS Web (Orange, Sosh, Orange Compact). Use this skill when working on files in packages/, when adding new tokens that need cross-brand sync, when you need to understand what is shared vs brand-specific, or when testing changes across brands. Covers the 3-brand structure, brand entry point import order, what to update in all brands, and how to test cross-brand.

Multi-Brand Architecture

The 3 brands

Brand	Package	Server	Visual trait
Orange	@ouds/web-orange	:9001	Sharp corners, HelvNeueOrange
Sosh	@ouds/web-sosh	:9002	Rounded corners, Sosh font, Magenta
Orange Compact	@ouds/web-orange-compact	:9003	Compact spacing, same as Orange

Key principle: JavaScript is shared. Only CSS tokens differ per brand.

---

Shared vs brand-specific

Shared (modify once)

scss/_*.scss, scss/mixins/, scss/_variables.scss, js/src/, js/tests/, site/, build/

Brand-specific (in each packages/<brand>/)

File	Editable?
scss/tokens/_raw.scss	Never
scss/tokens/_semantic.scss	Never
scss/tokens/_component.scss	Never
scss/tokens/_*-custom-props.scss	Never
scss/tokens/_composite.scss	Yes
scss/ouds-web.scss	Yes

---

Do I update all brands?

Change	All brands?
Edit shared scss/_*.scss with existing tokens	No ✓
Add new token variable used in SCSS	Yes — all 3
Edit js/src/	No (shared) ✓
Edit one _composite.scss	Only if same change needed elsewhere

---

Brand entry point order

// packages/<brand>/scss/ouds-web.scss
@import "@ouds/web-common/scss/config";
@import "@ouds/web-common/scss/functions";
@import "@ouds/web-<brand>/scss/tokens";      // ← Brand tokens HERE
@import "@ouds/web-common/scss/variables";    // Maps OUDS → Bootstrap
@import "@ouds/web-common/scss/variables-dark";
@import "@ouds/web-common/scss/maps";
@import "@ouds/web-common/scss/mixins";
// ... component imports

---

Testing cross-brand

npm run dist    # Builds all brand CSS
npm run start   # Starts 3 servers

For each brand check: light/dark mode, RTL, affected variants.