Baseline grid, swatch library & "Style guide"?

Hi there,
have been using Webflow for a couple of days now and this looks very good! Thanks guys.

I have a couple of wishes:
As a designer it would be great to set a visual baseline grid. Maybe customizable grid?

A swatch library for colors would also be great.

How about a style “mode” where you can see and adjust all the design elements of the components like buttons, menu,form elements, colors, typography and so on.

What do you think?

Best regards
Per Kristian

Some examples:

1 Like

I like @perkristian’s ideas, and especially the style mode & colour swatch library - where did you get the first picture from?

And in addition to the colour swatch library, a built-in colour palette generator like colllor which suggests other colours to use from the colour(s) you have already chosen would be awesome!

Hope this feedback helps,

These are great ideas @perkristian and @bertie! We will definitely be upgrading the color picker UI to include swatches, HSB color picker, and color suggestions (like colllor).

There’s still some things we are working on before we get to this but it’s totally on our roadmap. :slight_smile:

Thank you for the reply @thesergie, looking forward to see how Webflow evolves. Have some more ideas lurking but guess you have your hands pretty full allready. :smile:

The first styleguide is from Jordan Egstad on Dribbble: @bertie

Did anything ever come of this? I would love to be able to work off a Styleguide that I develop for my clients

it´s been a while since I wrote this. :slight_smile:

There is still no built in style guide but you can still make a style guide manually by adding a new page call it «styleguide» or whatever suitable. Then add the elements you need and style them as you like. Then make a symbol of each element so that you can drag them into your various pages when building the site.

When the element is dragged on to your page unlink the symbol before adding content. For elements used several places on the site as the menu, footer and so on just add the element as a new symbol.

The only thing missing is editable global swatches. Don´t know when it´s coming but they are working on it: Color Swapping Feature: Global Swatches

You can also reuse the style guide by duplicating the site before adding content and by duplicating it once again you can use it as a starting point for each new site you make. Or you can save it as a template if you are on the team plan.

If anyone have improvements or a better way of doing this. I would love to hear about it :slight_smile:

1 Like