Hi guys, I think this is a very common problem, but following the official guide for adding relume to an existing project simply does not work. Firstt, the Style Guide was not being recognised by the webflow ↔ relume plugin. adding Relume Style Guide v3.0 to the metadata fixed this. However now when I try import from relume using the plugin i get relume unexpected error color scheme variables not found . Can anyone help? I’ve been trying to fix this for 5 hours. Thanks!
-
Make sure you’re using the official Relume Style Guide (not just renamed text):
-
Go to Relume’s documentation and copy the Style Guide V3 cloneable into your project.
-
Don’t just add the metadata — the plugin looks for a full Color System with variables like
--color-primary
,--color-secondary
, etc.
-
-
Check that color tokens are still intact:
-
Open your Style Guide page inside Webflow.
-
Scroll down to the Colors section.
-
Confirm that all Relume’s default swatches/variables exist (e.g.
Primary
,Secondary
,Gray 50–900
). -
If they’re missing, re-clone the Style Guide or re-import the colors.
-
-
Verify metadata setup:
-
In Page Settings → Custom Code → Inside
<head>
, you should have:<meta name="relume" content="Relume Style Guide v3.0">
-
Make sure there are no typos (e.g.
Relume
spelled correctly, spacing exact).
-
-
Check the Folders / Page Name:
-
Relume expects the Style Guide page to be named exactly
style-guide
(lowercase, hyphenated). -
If your page is
Style Guide
orStyleguide
, rename it tostyle-guide
.
-
-
Clear plugin cache & re-authenticate:
-
Log out of the Relume plugin in Webflow.
-
Log back in, re-select the correct project, and try the import again.1
-
Had this happen on a client site , the “unexpected error” usually means the color tokens didn’t carry over. Re-clone the official Style Guide v3, make sure the style-guide page name is exact, then re-authenticate the plugin. That fixes the missing variables issue.