Brand Studio· test-brandread-only

How to use — Webflow Variables & embed

1 · Webflow Variables (SASS Overrides). In your Webflow site make a SASS Overrides Variable collection and name variables exactly like UIkit's Sass globals — no uk- prefix: global-primary-background, global-secondary-background, global-link-color, global-link-hover-color, global-inverse-color (Color) and border-rounded-border-radius (Size). Edit a Variable → UIkit recolors live. Full set + values: Design overview →

2 · Embed (runtime — live, no recompile). Add to your site <head>:

<link rel="stylesheet" href="https://crm-sync.dev/brand/test-brand/theme.css">
<script src="https://cdn.jsdelivr.net/npm/uikit@3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3/dist/js/uikit-icons.min.js"></script>

3 · Build (authoritative compile). /brand/test-brand/uikit.scss?full=1 → sass site.scss > site.css → your branded UIkit CSS.

Endpoints: theme.css · tokens.json · uikit.scss · kitchen-sink · brand home

Docs: uikit.md (BEM naming) · design-sync.md · Async Data summary →

Logo URL

Primary

Secondary

Accent

Radius (rem)

Status colors

Success

Warning

Danger

Default (muted)

Button style

Hover state

Link style

Fonts — CDN export

—

Heading font

Body font

Fonts are licensed — registering exports the font to the CDN so your brand's type travels with theme.css to any destination. Set Heading/Body to a registered family to apply it (scoped to UIkit components; Webflow type untouched).

Preview is free — configure and see it live. Saving publishes theme.css across every surface and is part of CRM Sync.

Heading in your brand

Body copy with a sample link inside it. Pick presets on the left and this updates live.

PREVIEW = live UIkit components, re-themed as you edit. MARKUP = the live uk-* source (Copy to paste into your build). Source: /brand/test-brand/kitchen-sink.