the new color system in webflow and relume

I know you’re all busy but I wanted to put in a vote to update the very 1st initial onboarding videos to quickly show the latest and greatest so newbs like me don’t get so lost just starting out.

For instance, with the new focus on the AI site builder, the UX/UI for finding components and selecting them on the Relume site to copy/paste into Webflow is actually more steps and harder to do than in Adam’s earlier videos.

Anyway, I also wanted to offer a comment on your explanation of why color managing buttons is different than the rest of the color system. I also provided this on Loom but thought you might find it here more easily:

@kaleb - I think of Button styling as a very separate task than standard color system work. It is more akin to styling table row cells, cards, tiles, etc. So much more of a component system concern. So having the colors used in buttons and other components cataloged in your color system is likely required. But that styling happens elsewhere and should be documented separately. Relume already does this wonderfully by documenting colors and shadows (i.e. things used for styling) separate from where it documents buttons. To take this further, I wish that Relume also pre-cataloged the system-level corner radius used throughout the system. I also wish you pulled out some standard elements like cards that we could style and then those automatically updated throughout as well.

Anyway, thanks again and keep up the great work team!

WRT Button States Styling
BTW, given that buttons specifically have so many states, I do wish that the Relume style guide already had all of them shown so I could style them there instead of it being in the ‘hidden’ properties of buttons. It means I have to design within the context of the website I am building instead of beside it.

Dave! thanks so much for that feedback dude! That’s so helpful hey. You’ll hopefully be super happy to hear that we are liiiiterally planning out all new videos as we speak. For the exact reasons you just pointed out.

Would you be open to early user feedback for some of the videos and docs we’ll be creating?

Also, curious to better understand your thoughts on the color variables and buttons etc. In our explorations we built out a prototype with all button variables including all states. It ended up being quite a huge thing to manage (80+ variables) and our conclusion was that we’d prefer to give people the basic foundation and not over complicate it for the majority of people who don’t need that much power essentially.

However, in the future this may change with new updates coming and more editing power etc.

Cheers Dave! Stoked to have you here 🙌

Cc

WRT Dark Mode Color Systems
Also, not that you asked… but I also wish that Relume had the color system preset in a way to have a full light mode and full dark mode system. This might be a massive undertaking though if it meant rebuilding ALL of the component library as well. But hopefully Webflow gives enough tooling (IDK yet since I am on like day 2 of learning it) that I could make an easily page-level switch or even have the user’s browser / system setting tell my site which version it wants to view.

Button styling can become a whole insane endeavor on its own as you said.

I often prefer to use the colors as predefined by the color system (which you did). Although you’ll find that most designers use something like the Google Material tint / shade scales by only mixing white / black via opacity instead of using natural lighting / shadowing semantics to alter hues too. Interesting but I find those 0-900 scales useful for infographics because they are so harmonious (if unnatural). So sometimes the color system may not be enough for styling UI components like buttons, tiles, cards, etc.

But then I make another page (like Style Guide but call it Components / Buttons) and then show each button type (Primary, Secondary, Tertiary, Text Only, Destructive Action) by button state (Disabled, Enabled, Focused, Hovered, Pressed, Loading) by mode (Light / Dark).

If you made a separate page that could be a separate cloneable so most Relume users would do things the existing simpler way but lunatics like me would have a space to manage button states visually 😄

Sadly, I haven’t updated this for my app since the last time Figma updated color variable so the actual buttons in this image are incorrect, but the structure of the page it still correct IMHO:

Note that affirmative is on the left, destructive on the right, light on top, and dark on bottom.

YES, I would be happy to preview any of the new work and videos!!!

Sorry if I am being dense, but can I still utilize the Color Palettes copy / paste into Webflow feature with the new Variable method? It seems I have to recreate your palettes by hand now. Is that right?

Also FYI, your Color Samples > Teal > teal200 looks like it is swapped with teal300 assuming your Background Colors are correct.

Hey dude!

• Dark/light mode ~ We've explored and there's no clear/scalable way of approaching just yet. Pending Webflow's variables light/dark modes 💪
• Totally agree that it would be cool to have an option for "lunatics" lol. We had the same thought of creating a way where you can simply import your additional styling system which includes buttons etc. For now we have set the foundation and are working our way towards people being able to customize and set it up as they wish with templates etc. I think this would solve it for you 🙌 We partnered with Finsweet to define our approach and they've done an excellent job of explaining how you can go about naming conventions and colors etc here > https://finsweet.com/client-first/docs/variables
• You can still paste in the Relume color palettes if you want to yes 👍 Although we opted to remove them from the style guide as it then creates x2 places to manage colors.
• Good to note re teal200 thank you! Good eye 🙂 Will pass on to the team

Hey how do you paste in the color palettes now that the landing spot for them in the style page is removed?

Do you just paste them into another page and then turn them into swatches from there?

Do we have to do the same thing for the text and background colors or do those automatically come in as classes when pasted?

Hey ! We had a few messages flying around and I must have missed this one.

Simply copy and paste them anywhere in the Style guide that works for you. We haven't created a space for them as we are moving away from using these in projects but they should work perfectly after you paste them in and create your swatches from there 🙂

Does that help!?

kinda, I think they aren’t arriving as classes automatically (at least as I understand them) so I can’t just assign them on text or a button or whatever and have it apply as I expected. I’m sure I am missing something obvious

https://www.loom.com/share/cf9e7097ab00419a89efb255f62f4474?sid=65d7b504-5b7a-432d-b1a6-49b2800dc05b