Customizing Text Colors in Webflow: Headings vs. Body Copy

Camilo G. · 2025-07-12 00:53:45.109282+00

Hey guys, I'm trying to figure out how to style headings and body copy with a different colour using the style guide and colour schemes in Webflow. For example, I want my headings to be either full black or full white depending on the background colour of the scheme but I'd like the body copy to be at 60% transparency. At the moment, the text colour variable in the scheme is applied to all text including headings and body copy, so how can I achieve that? Thanks!

Join the Community

Customizing Text Colors in Webflow: Headings vs. Body Copy | Relume Community

14 comments

Matt J.
·
·
Camilo G. Heyo! 👋 One way you could do this is to change the body text variable to your 60% color, and then change the headings on the style guide page to the black color. The issue with this approach is when want to flip the colors. If you create a blank div and give it a class of is-alternate and then change the font color to be straight white, then you can just simply add this class to headings inside those alternate sections and you should be good to go!
Matt J.
·
·
Here's a guide on how to customize the style guide: https://www.relume.io/resources/docs/customizing-the-relume-style-guide-for-webflow
Camilo G.
·
·
Thanks Matt J. the issue here is that the text variable within the scheme is applied to all text not just body text and overrides the heading styling in the style guide. The only work around I've found is to add a is-heading class to the heading inside the colour scheme div and add is-alternate as a combo class for the dark backgrounds. Not sure if that's the best way to do it but that's the only way I can think of to make this work.
Matt J.
·
·
Yeah, the path I mentioned above, I actually did it before I suggested it and it seems to work - its one less combo class than what you were suggesting.
Camilo G.
·
·
hmmm ok, not sure what I was doing wrong but wasn't working for me. Let me go back and see what's happening.
Matt J.
·
·
ah you would also need to do this for at least two color schemes I think....because just changing the text variable to the neutral 60% for one of them, wont account for the other scheme, if that makes sense....whys this gotta be so complicated, amirite Camilo??
Camilo G.
·
·
Yeah, I had to change the color-scheme-2 text variable to 60% black and the color-scheme-4 text variable to 60% white
Matt J.
·
·
1.
Navigate to the style guide
2.
Follow the doc above to edit the heading styles and assign a custom color variable (In your example, I would just assign it to the #000 color you wanted)
3.
Navigate to the variables panel (V on your keyboard)
4.
Change the text variable value to the neutral darkest 60% for color scheme 1
5.
Change the text variable value to the white 60 for color scheme 2 (or vice versa depending on what the color schemes are...)
6.
Create an empty div and give it the class is-alternate
7.
Change the font color value to be #FFF
So now, you should only have to add is-alternate to a heading within a section
Camilo G.
·
·
Ok will try that now 😊
Matt J.
·
·
okay, let me know if I'm still delusional with this solution - it feels like it should work but maybe I am just not grounded in reality here
Camilo G.
·
·
That indeed worked! and I figured out what I was missing. I hadn't added any colour styling to the headings! so it was just inheriting the body (all pages) colour value! 🤦‍♂️
Camilo G.
·
·
Thank you!
Matt J.
·
·
ah yeah cool
Matt J.
·
·
yeah no worries - glad it all worked out!