There was a discussion on Github about a Standardized Design System I really enjoyed reading. Now I have a good amount of questions and suggestions about building a robust and scalable design system.

Where should I post it? On Github discussion? Here in Suggestions? I really like discord for it's thread functionality (which I miss on Github). Does it makes sense that we create a new forum/section here on Discord for the design system, thinking about naming conventions etc?

@Webstudio Team

Story: When I duplicate the Craft Clonable I feel as a starter in Webstudio extremely overwhelmed.

I come from Webflow and built complex websites so I am in luck, but I am imagining someone beginning their journey just giving up just here. Don't get me wrong. Craft in itself is genius. Relying on Open Props, Open Colors, Modern Font Stacks, Radix Components is great.

And at the same time: I need to build the navbar, footer and the base sections all on my own. I don't see the best practices in action.

In Webflow I've built a starter package.

I am thinking of bringing it into Webstudio, re-building it with Craft and Open Props logic and to share it with everyone. More of a key-turn solution with which you can build extremely fast to get the page published. I love the idea of building one concise styleguide and design system around Webstudio. In Webflow it was always messy with Finsweet's Client First, Lumos, etc. Working from one central "language" of design and development excites me.

It contained

• Basics like Navbar and Footer (also Mini Versions for Landing Pages)
• Base Layouts for Heroes, Normal Sections, Testimonials etc
• Color, Type and Button System
• GDPR pages (Legal Notice and Privacy Policy with pre-filled texts for the normal website)
• Blog system (overview and article page)
• Newsletter (opt-in and thank you)
• In a later version I also brought in home page, landing pages and funnels (but this can be optional)

What are your thoughts? What would be great to have as a starter package to get going immediately? Thoughts, ideas and feedback are always appreciated. It would be great to have this starter kit build both for pros and starters alike. Starters can just go with what's there. Pros can modify it fast thanks to copy/pasting CSS Variables into the root.

There was also a discussion here in the community about building a Figma starter kit – it would be definitely useful.

After spending a month or so living in Webstudio I can see it's great potential. It's definitely the best Webflow alternative out there. Clean tokens instead of class chaos, Airtable CMS, lifetime version, better nested CMS, a fast responding and super competent community… I love it all.

Since I committed to Webstudio for the next years and projects, I started building a design system with all components needed to build websites:
1) faster
2) more consistent
3) changing and adopting over time - while being incredible consistent and on brand

The first thing I really missed from Webflow is it's Variable Panel (see screenshot 01).
You can define easily all global variables; later they are available in the designer to attach them to classes.

It goes even beyond that. You can create different modes as columns:

• Base Mode
• For Type and Sizes: Breakpoints
• For Colors: Hover State and more
• For Colors: Dark Mode

Also it's possible to categorize them in groups and folders.

So I wanted to see all Open Props in one view. I built a little workaround tool in Google Sheet, so I could see all Open Props and more in one place, categorized (see screenshot 02). If you want, you can duplicate it here.

If you want to link one variable to another like shown in the screenshot (e.g. --foreground-primary to the color --gray-3), then just get a checked checkbox in the colum Var, so the formula in CSS Property will automatically wrap var(…) around it. This tells Webstudio to link the variable for use --foreground-primary to the system color --gray-3.

After you defined variable and value, the CSS Property get's concatenated in the the formula. You can just copy/paste the full css property into Webstudio (as mentioned in this video by @John Siciliano).

I just wanted to double check with you guys if when I hide components in Webstudio if they will appear on the live code (so slowing down the page speed / web vitals without any use).

In Webstudio it says under "Show" (where you set visibility of a component):

"Removes the instance from the DOM."

So it sounds like it should work well. But I want to double-check to know if I can rely on this method for scaling.

The case:
Let's say I have this landing page here (s. screenshot).
In it there is a logo bar with the clients worked before. And I hide it in Webstudio. Will it be in the code? Will it affect page speed for the user even while it's hidden?

My idea is to build landing pages rapidly with an Airtable database and a Webstudio template that gets filled by this Airtable data (think a blog CMS but for landing pages). A/B Splittesting would be so easy from there on in Webstudio (at least with paid ads).

The landing page template is a long page with all possible sections and components – and we would hide the things we don't need with checkboxes in Airtable and conditional visibility in Webstudio.

This idea resonated with quite some clients so far because they can launch landing pages extremely fast with it and even a/b splittest what works best to max out results.

The question again: Does Webstudio loads components in code of users that are hidden? Do hidden components affect page load speed and web vitals?

In Webflow I had a system that catched automatically the UTM marketing parameters from the URL (source, medium, campaign, term, content) when a user submitted a form.

The UTM parameters look like this as a tracking string:
?utm_source=linkedin&utm_medium=organic&utm_campaign=spring-2025&utm_term=keyword&utm_content=conversion-element

This string get attached to the base URL:
https://example.com?utm_source=linkedin&utm_medium=organic………

These parameters were automatically synced to Airtable/Google Sheet/CRM to see from which marketing campaign/channel/etc a new lead/client came from. Later in-depth analysis, statistics, calculations happened to see how profitable campaigns where and how to maximize conversions top to bottom of the funnel. Without this feature a real full funnel analysis is not possible.

How can this be implemented in Webstudio? I tried a bit, but couldn't bring it to work. I guess you guys are pros at it and it's a simple thing. Development is normally not my profession, more design and strategy and to make marketing profitable… so excuse me the noob question from a dev perspective.

I researched and found one thread "Get UTM parameters in the URL" but it was a dead end. The documention of Data Variables looked also promising, but didn't give an exact answer.

I know it should look something like this in the form field with an embed HTML in the form box
<input type="hidden" name="Source" value="utm_source">
(each hidden input for each utm param)

It would probably also need a JS in the head

If we find an answer I think it makes sense to create a tutorial for it. Marketing analytics is for some performance marketers important (and I am building landing pages with Webstudio super fast now after working two weeks non-stop with it – so I will definitely recommend it to all my colleagues and clients).

As mentioned by @Oleg Isonen on Github I created the workaround for a redirect of a webhook form.

→ So I added an HTML embed inside the webhook form's success box with this code (and changing it to my path).

<script> location.href = '/whatever' </script>

This worked great for a static link/slug/redirect.

Now I wanted to make it dynamic based on the Slug in AirTable (think redirection based on a specific product for example).

In the Webstudio University its documented how to create dynamic links for the filtering of the Airtable data by the slug (which worked perfectly).

https://example.com?filterByFormula={YOUR_COLUMN_NAME}="${system.params.YOUR_DYNAMIC_PATH}"


Now I wanted to do the same (creating a dynamic URL with the slug) and add it into Oleg's workaround code mentioned above (inside of an HTML embed in the success box of the webhook form).

It always says: "Unexpected token".

I guess it doesn't work the same way because the Airtable integration in the Variables panel is based on JSON and the embed on HTML?
I tried every method that came to mind (and from ChatGPT)… still doesn't work.

Does anyone has an idea? Any solution is much appreciated since this is a core part of my next project I am working on right now.