# Design Sync — the Designer's plane

> Persona: the **Designer**. (CRM Sync = the **Business User**.) A forward-deploy app, kept separate from CRM Sync.

## Summary
A handful of brand inputs become **one framework-agnostic theme** that paints the PWA, the Webflow
site, every embed, and any UIkit storefront from a single source. No framework runtime in the output:
pure CSS + tokens, consumed identically by Webflow, Vue, React, Svelte, or a Shopify theme. One primary
keys the whole surface.

## Challenge → Solution (forward-deploy of known issues)
| Challenge | Solution |
|---|---|
| Brand look re-implemented per surface, drifts | One `theme.css` + `tokens.json` from the brands registry; every surface links the same source |
| Theming a UIkit/Shopify build means editing compiled CSS by hand | `uikit.scss` overrides one global (`$global-primary-background`) → whole primary surface cascades |
| Precompiled/CDN UIkit can't be re-var'd at runtime | Runtime `.uk-*` class bridge in `theme.css` recolors buttons/text/labels/alerts |
| Tailwind's utility/naming explosion at scale | UIkit BEM `uk-*` — conflict-free by construction; semantic components |
| Unstructured utility CSS → weak AEO + a11y | Wildcard-overlay BEM on top of Webflow/Tailwind; core JS/SASS untouched |
| Legacy Bootstrap themes (Ella, Wokiee) → naming conflicts | Wrap in BEM framing to reinforce — same fix as Angular/Bootstrap |

## "Set the Globals, everything follows"
The full UIkit Global registry (named to the Webflow "SASS Overrides" collection) drives buttons,
sections (default/muted/primary/secondary), inverse (uk-light/uk-dark), status colors, and uk-svg icons:
`global-primary-background`, `global-secondary-background`, `global-background`, `global-muted-background`,
`global-color`, `global-emphasis-color`, `global-muted-color`, `global-inverse-color`, `global-border`,
`global-link-color`, `global-link-hover-color`, `global-success-background`, `global-warning-background`,
`global-danger-background`, `global-font-size`, `border-rounded-border-radius`.

## Reference (per brand <slug>)
- Live page: https://crm-sync.dev/design-sync
- Theme: https://crm-sync.dev/brand/<slug>/theme.css · Tokens: /brand/<slug>/tokens.json
- UIkit Sass: /brand/<slug>/uikit.scss?full=1 (compile: sass site.scss > site.css)
- Studio: /brand/<slug>/studio · Kitchen sink: /brand/<slug>/kitchen-sink · Home: /brand/<slug>
- Build target: Shopify **Horizon** (not Dawn).