YAVACADO turned our technical equipment catalog into a clear, professional website that our team can manage. The CMS and CRM integration make it easier to present products, process enquiries, and support clinics from the first contact.
4
min to read
Webflow Variable Modes: Create a Theme You Can Maintain
Educational
About tools
Web design
Explore all
January 15, 2025
Build a small theme system with semantic variables, test its scope and distinguish visual themes from responsive layout rules.
Updated 12 September 2026.
In this guide
- Use semantic names that describe the role of a value.
- Test one section before applying a theme widely.
- Keep alignment decisions separate from colour and size variables.
Define the theme before opening the panel
A theme needs a clear purpose. You might want a dark promotional section within a light website, or a related product area that uses the same layout with different colours. Start with that requirement rather than creating dozens of tokens.
List the roles the section needs: background, primary text, muted text, border and action colour. Give each a name that describes its use. A semantic name remains meaningful when the colour changes; a name based only on the current colour may not.
Build a small base set
Webflow variables store typed values such as colours and sizes. Modes provide alternative values, applied manually to classes or through responsive modes. Follow the current variables documentation for the interface and supported types.
Use the table below as an illustrative token plan, not a mandatory palette. Apply the variables to one real section containing a heading, paragraph, link and border. Check the resulting contrast and focus appearance before extending the system.
Illustrative semantic colour tokensRoleLight exampleDark examplesurface-primary#FFFFFF#121212text-primary#121212#F5F5F5text-muted#4B5563#C7CDD4border-default#D1D5DB#515761action-background#D9FF7A#D9FF7Aaction-text#121212#121212
Create one alternative theme
Define the alternate values for the same roles. Keep the section’s structure unchanged so you can see whether the colour system is coherent. A theme that requires manual edits to every child element is not yet doing the work you intended.
Test elements that are easy to miss: muted text, inline links, icons and input borders. Check the section next to both light and dark neighbours. The transition between sections is part of the design, particularly where borders or shadows imply a surface boundary.
Practical takeaway: Name the role once, then test every place that role appears.
Inspect scope and inheritance
If a text element does not adopt the expected theme, inspect where its style is defined. A hardcoded value or a style inherited from another element can prevent the intended result. Link the relevant style deliberately rather than adding a sequence of overrides.
Keep a test page containing every supported text and interface pattern. After a theme change, review it as well as the production section. One successful heading does not prove that buttons, forms and captions are all using the same rules.
Separate themes from layout behaviour
A theme changes a coordinated set of style values. Flex and Grid settings still need clear layout rules. Do not assume that words such as “left”, “center” and “stretch” can be created as a native string-variable system: the documented native variable types do not establish that workflow.
Use normal layout controls and clearly scoped classes for alignment. If custom CSS is part of the project, document it as custom CSS. Keep the theme small enough that another contributor can identify the intended owner of each visual decision.
A related YAVACADO project
AppStudioPro needed an expandable Webflow site with new service pages, CMS collections and integrations. YAVACADO used Client-First conventions to organise the build. A small, documented theme system is a complementary approach for teams managing similar recurring visual decisions.
Your next check
Mark each item as you check it. Ticks last for this page visit.
Name values by purpose.Apply the theme to a representative section.Check text, links, borders and focus states.Trace unexpected inheritance before adding overrides.
Put it into practice
Find a hardcoded colour
Switch the example section to the alternate theme. If one item stays unchanged, inspect its actual style source and replace the isolated value only if it belongs to the shared token system.
Continue with a related guide
- Build a Webflow Design System: Tokens, Components and Real Content
- Webflow Alignment Explained: Text, Flexbox and Responsive Layouts
Official references
Discuss your website
Create a Webflow style system that stays coherent across pages and themes.
WordPress to Webflow Migration: Build the URL Map Before Launch
12/29/25
4
min to read
B2B Website Navigation: Help Buyers Find the Right Next Page
11/17/25
4
min to read
Website Enquiry Forms: Ask Better Questions and Reduce Friction
12/15/25
4
min to read
Client-First in Webflow: Build a Page the Next Person Can Understand
8/23/24
4
min to read
Relevant project
Corporate Website Redesign for an App Development Studio
Tech
Create the future of virtual presence. Helping businesses go online and grow bigger with high-tech website & mobile apps.
AppStudioPro
FAQ
Are variable modes the same as component variants?
Why does one child keep the old colour?
Can I use native string variables for alignment?
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
Testimonials
What our clients say
A web design agency that cares about you and your brand, no matter the size or what industry your business is in.
YAVACADO turned a complex booking process into one clear platform. Our team can manage tours and content in Webflow, while parents can book and pay securely through WayForPay. The result is easy to operate and built around the needs of the Ukrainian market.
The website captures the premium feel of our brand perfectly. From the design to the multilingual functionality and payment integration, every detail was delivered to a very high standard.
Excellent implementation of our Figma design in Webflow. The final website feels fast, polished, and exactly aligned with the premium fintech experience we wanted.
.png)
The funnel feels significantly more polished than the original concepts and was delivered in a format our internal team could immediately continue working with. Smooth process and excellent execution.
Working with YAVACADO was a fantastic experience. They understood both the technical requirements and the business goals, delivering a fast, polished website that's easy to manage and built to generate qualified leads.
Impressive speed and quality. The landing page was delivered in just hours and looks clean, professional, and ready to use.
The turnaround was incredibly fast, and the result looks clean and professional. The site reflects our firm perfectly and was delivered exactly on time.
The YAVACADO team helped us present FromLab2Jab’s complex services in a clear and professional way. The structure, CMS, and filtering system make it easy for our team to manage and scale the content.
The final website matched the Figma design with impressive accuracy. The animations, sticky sections, and overall Webflow execution made the project feel polished and high-end.
%2520(1).png)
YAVACADO delivered a powerful, scalable platform that fully supports our operations. The CMS structure, CRM integrations, and automation tools significantly improved how we manage inquiries and camp programs.
The phased design and development approach made everything clear and efficient. The team delivered a professional SaaS website on time, and the training support helped us manage content confidently
The platform works exactly as we envisioned — secure, structured, and scalable. Subscription management and report access are fully automated, and everything runs smoothly.
The Webflow build perfectly matches the AI design and feels even better in motion. Everything from CMS to animations works smoothly—great work!
The redesign gave our website a completely new look. The layouts feel modern, the services are presented much clearer, and the site works perfectly on mobile.
The redesign elevated our corporate presence and made content much easier to manage. The Feensweet filtering and CRM integration streamlined our user experience and lead flow — great implementation!
%25201.png)
.svg)
YAVACADO team's redesign transformed our landing page—stylish, clear, and extremely on‑brand. The site now feels modern, fast, and more engaging than ever.
Working with YAVACADO digital agency was exceptional. They handled everything—from competitor analysis and UI/UX design to Webflow development, CMS setup, and a custom calculator. The result is a stunning, easy-to-manage site that truly represents my brand and engages my clients.
Working with YAVACADO was a fantastic experience from start to finish. They brought our complex vision to life inside Webflow with accuracy, care, and speed. Our project involved a unique design language, symbolic layouts, and layered CMS content, and YAVACADO team handled all of it with remarkable professionalism.
YAVACADO team is really good with their work. Their designers are very skilled and professional. We didn't have much idea about UI UX, but the project manager asked the right questions to understand our preferences, gave us few design options, and we really loved whatever was finally delivered.He is very proactive, accommodating of our requirements and he delivered all developer ready assets to us in Figma. We definitely want to work with YAVACADO again down the line. Definitely recommended.
YAVACADO delivered exactly what we needed—clean design, seamless Memberstack integration, and custom features that work flawlessly. Fast, reliable, and professional.
"Excellent work. Looking forward to working with YAVACADO again."
.svg){kind=logo}
Working with the YAVACADO web development team was an exceptional experience. Their ability to deliver a fully functional, SEO-optimized real estate website exceeded our expectations.
Working with YAVACADO digital agency was an exceptional experience. Their ability to deliver a fully functional, SEO-optimized corporate website within just 3 days exceeded our expectations. The team's attention to detail, professionalism, and commitment to excellence resulted in a platform that has significantly enhanced our online presence.
His expertise in Webflow design and development resulted in a dedicated banking solutions page that effectively communicates our offerings
Working with YAVACADO agency was incredible. They turned my vision into a high-converting, beautifully designed landing page that captures exactly what my program is about.
Collaborating with YAVACADO agency was an exceptional experience.
Working with YAVACADO agency was a transformative experience for Boath House. Their meticulous attention to detail and expertise in Webflow resulted in a stunning, user-friendly website that seamlessly integrates our booking engine. The site's optimization across all devices has significantly enhanced our online presence.
From intricate integrations to design finesse, you've tackled each challenge with precision and passion.
Thanks to the new website, we've seen a significant boost in inquiries and client interactions. The design perfectly reflects our brand, and the site's functionality is exactly what we needed!
Thanks to the new system, our processes became more transparent and efficient, saving us valuable time and effort.
A super Webflow agency, they can pixel-perfect develop figma designs into Webflow. Really good quality work and speed.
The professional team that can manage any of your requests
We hired YAVACADO to design our company's website, and the entire process went exceptionally well. They worked at a record pace and delivered outstanding results. The YAVACADO understood our vision perfectly and was quick to make any adjustments we needed, ensuring the final product met all our expectations. Professionalism of YAVACADO's team, speed, and ability to grasp our requirements made the experience seamless. Highly recommended!
.svg)
Very helpful in getting our website up to spec, very patient in helping us with compromises etc. Would recommend to anyone!
Thank you for being so helpful in designing and developing the site! Now it looks great. I see that now we are much more prestigious and attract more clients.
You've done a great job! I am grateful to you for such fast and high-quality work. We were able to launch the booking system several weeks earlier than expected.
Thank you very much.
YAVACO is an extremely professional agency. They moved quickly, had great communication, and were always helpful throughout the project. I highly, highly recommend!
Great work by YAVACADO they worked non stop and really quickly completing the work. They will definitely be first in my list when I have future CSS HTML projects.
YAVACADO Agency is very responsive and I appreciate their commitment to work - team's very skilled and responsible. The quality is also great, would work with them again in the future.
YAVACADO's expertise in Webflow resulted in a flawless website with captivating animations that truly brought it to life. We will build future cooperation.
The website was set up and ready in the timeline we discussed, and according to the specification, not only, YAVACADO team did it fully responsive, with creative and cool animations!
I'm more then happy with the outcomeIf you are looking for a true talnet here on Upwork - YAVACADO is your team. Thanks again! And will surely used your services again
YAVACADO team did a fantastic job building out my Webflow project. The team is friendly and attentive and there are knowledgeable professionals who I highly recommend and look forward to working with again.
Incredible outcome. Fast , reliable and exactly what I wanted to impress the audience for my presentation.
You did a great job! We have acquired a stable and reliable partner to manage our website.
It was comfortable working with the team. The assigned task of developing a webflow site was completed on time and with the expected result. I'm glad I was able to start the business as planned.
Great provider and easy to work with! Professional, dependable, flexible, and delivered all that was needed! Would work with you for future project!
YAVACADO turned our technical equipment catalog into a clear, professional website that our team can manage. The CMS and CRM integration make it easier to present products, process enquiries, and support clinics from the first contact.
YAVACADO turned a complex booking process into one clear platform. Our team can manage tours and content in Webflow, while parents can book and pay securely through WayForPay. The result is easy to operate and built around the needs of the Ukrainian market.
The website captures the premium feel of our brand perfectly. From the design to the multilingual functionality and payment integration, every detail was delivered to a very high standard.
Excellent implementation of our Figma design in Webflow. The final website feels fast, polished, and exactly aligned with the premium fintech experience we wanted.
The funnel feels significantly more polished than the original concepts and was delivered in a format our internal team could immediately continue working with. Smooth process and excellent execution.
Working with YAVACADO was a fantastic experience. They understood both the technical requirements and the business goals, delivering a fast, polished website that's easy to manage and built to generate qualified leads.
Impressive speed and quality. The landing page was delivered in just hours and looks clean, professional, and ready to use.
The turnaround was incredibly fast, and the result looks clean and professional. The site reflects our firm perfectly and was delivered exactly on time.
The YAVACADO team helped us present FromLab2Jab’s complex services in a clear and professional way. The structure, CMS, and filtering system make it easy for our team to manage and scale the content.
The final website matched the Figma design with impressive accuracy. The animations, sticky sections, and overall Webflow execution made the project feel polished and high-end.
YAVACADO delivered a powerful, scalable platform that fully supports our operations. The CMS structure, CRM integrations, and automation tools significantly improved how we manage inquiries and camp programs.
The phased design and development approach made everything clear and efficient. The team delivered a professional SaaS website on time, and the training support helped us manage content confidently
The platform works exactly as we envisioned — secure, structured, and scalable. Subscription management and report access are fully automated, and everything runs smoothly.
The Webflow build perfectly matches the AI design and feels even better in motion. Everything from CMS to animations works smoothly—great work!
The redesign gave our website a completely new look. The layouts feel modern, the services are presented much clearer, and the site works perfectly on mobile.
The redesign elevated our corporate presence and made content much easier to manage. The Feensweet filtering and CRM integration streamlined our user experience and lead flow — great implementation!
YAVACADO team's redesign transformed our landing page—stylish, clear, and extremely on‑brand. The site now feels modern, fast, and more engaging than ever.
Working with YAVACADO digital agency was exceptional. They handled everything—from competitor analysis and UI/UX design to Webflow development, CMS setup, and a custom calculator. The result is a stunning, easy-to-manage site that truly represents my brand and engages my clients.
Working with YAVACADO was a fantastic experience from start to finish. They brought our complex vision to life inside Webflow with accuracy, care, and speed. Our project involved a unique design language, symbolic layouts, and layered CMS content, and YAVACADO team handled all of it with remarkable professionalism.
YAVACADO team is really good with their work. Their designers are very skilled and professional. We didn't have much idea about UI UX, but the project manager asked the right questions to understand our preferences, gave us few design options, and we really loved whatever was finally delivered.He is very proactive, accommodating of our requirements and he delivered all developer ready assets to us in Figma. We definitely want to work with YAVACADO again down the line. Definitely recommended.
YAVACADO delivered exactly what we needed—clean design, seamless Memberstack integration, and custom features that work flawlessly. Fast, reliable, and professional.
"Excellent work. Looking forward to working with YAVACADO again."
Working with the YAVACADO web development team was an exceptional experience. Their ability to deliver a fully functional, SEO-optimized real estate website exceeded our expectations.
Working with YAVACADO digital agency was an exceptional experience. Their ability to deliver a fully functional, SEO-optimized corporate website within just 3 days exceeded our expectations. The team's attention to detail, professionalism, and commitment to excellence resulted in a platform that has significantly enhanced our online presence.
His expertise in Webflow design and development resulted in a dedicated banking solutions page that effectively communicates our offerings
Working with YAVACADO agency was incredible. They turned my vision into a high-converting, beautifully designed landing page that captures exactly what my program is about.
Collaborating with YAVACADO agency was an exceptional experience.
Working with YAVACADO agency was a transformative experience for Boath House. Their meticulous attention to detail and expertise in Webflow resulted in a stunning, user-friendly website that seamlessly integrates our booking engine. The site's optimization across all devices has significantly enhanced our online presence.
From intricate integrations to design finesse, you've tackled each challenge with precision and passion.
Thanks to the new website, we've seen a significant boost in inquiries and client interactions. The design perfectly reflects our brand, and the site's functionality is exactly what we needed!
Thanks to the new system, our processes became more transparent and efficient, saving us valuable time and effort.
A super Webflow agency, they can pixel-perfect develop figma designs into Webflow. Really good quality work and speed.
The professional team that can manage any of your requests
We hired YAVACADO to design our company's website, and the entire process went exceptionally well. They worked at a record pace and delivered outstanding results. The YAVACADO understood our vision perfectly and was quick to make any adjustments we needed, ensuring the final product met all our expectations. Professionalism of YAVACADO's team, speed, and ability to grasp our requirements made the experience seamless. Highly recommended!
Very helpful in getting our website up to spec, very patient in helping us with compromises etc. Would recommend to anyone!
Thank you for being so helpful in designing and developing the site! Now it looks great. I see that now we are much more prestigious and attract more clients.
You've done a great job! I am grateful to you for such fast and high-quality work. We were able to launch the booking system several weeks earlier than expected.
Thank you very much.
YAVACO is an extremely professional agency. They moved quickly, had great communication, and were always helpful throughout the project. I highly, highly recommend!
Great work by YAVACADO they worked non stop and really quickly completing the work. They will definitely be first in my list when I have future CSS HTML projects.
YAVACADO Agency is very responsive and I appreciate their commitment to work - team's very skilled and responsible. The quality is also great, would work with them again in the future.
YAVACADO's expertise in Webflow resulted in a flawless website with captivating animations that truly brought it to life. We will build future cooperation.
The website was set up and ready in the timeline we discussed, and according to the specification, not only, YAVACADO team did it fully responsive, with creative and cool animations!
I'm more then happy with the outcomeIf you are looking for a true talnet here on Upwork - YAVACADO is your team. Thanks again! And will surely used your services again
YAVACADO team did a fantastic job building out my Webflow project. The team is friendly and attentive and there are knowledgeable professionals who I highly recommend and look forward to working with again.
Incredible outcome. Fast , reliable and exactly what I wanted to impress the audience for my presentation.
You did a great job! We have acquired a stable and reliable partner to manage our website.
It was comfortable working with the team. The assigned task of developing a webflow site was completed on time and with the expected result. I'm glad I was able to start the business as planned.
Great provider and easy to work with! Professional, dependable, flexible, and delivered all that was needed! Would work with you for future project!