Design Sync
The Designer's plane — brand tokens + UIkit theming. A forward-deploy app, kept separate from CRM Sync.
Summary
A handful of brand inputs — logo, primary/secondary color, link/button/hover preset, radius — 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 color keys the whole surface.
Challenge → Solution (forward-deploy of known Shopify issues)
| Challenge | Solution | |
|---|---|---|
| 1 | Brand look re-implemented per surface (Webflow / PWA / Shopify / embeds) and drifts | One theme.css + tokens.json from the brands registry; every surface links the same source |
| 2 | Theming a UIkit/Shopify build means editing compiled CSS by hand | uikit.scss/.less override one global ($global-primary-background) → whole primary surface cascades |
| 3 | Precompiled / CDN UIkit (hardcoded hex) can't be re-var'd at runtime | Runtime .uk-* class bridge in theme.css recolors buttons/text/labels/alerts |
| 4 | Tailwind's utility/naming explosion + specificity pain at scale | UIkit BEM uk-* — conflict-free with vanilla/Webflow by construction; semantic components |
| 5 | Dropping UIkit onto a themed store clobbers the theme's base styles | .uk-scope containment + the uikit-loader.js data-scope option |
| 6 | Configurator means a full-page nav / separate tool | Headless Brand Studio modal (window.crmBrand, iframe-isolated) opens in-place |
| 7 | Localizing a UIkit UI = hand-translating each component's strings | Planned uikit-i18n.js?locale= from the edge-translate / kb_i18n stack (UIkit.mixin) |
| 8 | Unstructured utility CSS (Tailwind) has no semantic class names → weak AEO + accessibility | Wildcard-overlay BEM (uk-*) CSS on top of Webflow/Tailwind — core JS/SASS untouched — adds semantic structure non-destructively |
| 9 | Legacy Shopify themes (Ella, Wokiee) on Bootstrap → naming conflicts + structural gaps | Wrap in BEM framing (UIkit) to reinforce — same technique that fixed Angular/Bootstrap naming conflicts; Tailwind + GraphQL will hit the same fate |
Reference links
Per-brand endpoints · brand = test-brand (set via ?brand=):
- Kitchen sink — brand-themed UIkit (live)
/brand/test-brand/kitchen-sink - theme.css — the generated theme
/brand/test-brand/theme.css - tokens.json — the raw tokens
/brand/test-brand/tokens.json - uikit.scss — native UIkit variable override
/brand/test-brand/uikit.scss - Brand Studio — the configurator
/brand/test-brand/studio - uikit-loader.js — one-line UIkit + brand embed
/embed/uikit-loader.js - brand-studio-loader.js — headless modal
/embed/brand-studio-loader.js
FAQs & content
FAQs are the Business User's plane (CRM Sync), not Design Sync's — Design Sync links to them.
Open the FAQ feed →Build target
Shopify Horizon (not Dawn). Full design doc: docs/DESIGN-SYNC.md · split plan: docs/DESIGN-SYNC-SPLIT.md.