- Thanks for the video on the new color system! Sadly it took me quite a while to discover it. I am new to Webflow and Relume and most of the intro videos for both use the old preview button (with an eye icon instead of the new play icon) so I didn’t know how to preview the Relume Style Guide and therefore couldn’t get to the new video on colors. And sadly Adam’s older videos on the style guide uses the old Webflow and color system.
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.
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.
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!
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