| 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
@import "@ouds/web-common/scss/config";
@import "@ouds/web-common/scss/functions";
@import "@ouds/web-<brand>/scss/tokens";
@import "@ouds/web-common/scss/variables";
@import "@ouds/web-common/scss/variables-dark";
@import "@ouds/web-common/scss/maps";
@import "@ouds/web-common/scss/mixins";
Testing cross-brand
npm run dist
npm run start
For each brand check: light/dark mode, RTL, affected variants.
