Webflow Styleguide
By Workshore

Why we need this

We follow webflow standards and some strict implementation best practices. Having a predefined design system and guidelines allows us to balance both. It helps keep things organized and in adherence with our high-quality standards. It also lets our clients scale their websites with ease.
Development services

Benefits of this system

Easier and faster for anyone to scale projects

Using a pre-defined system allows anyone (not just developers) to scale a project and add more pages at
any time.

Easy integration with custom code solutions

Our design system is based on ATOMIC, but tailored to Webflow's environment nuances to allow easy coding on
top of it.

Maintains our high engineering standards

Quality is our top priority, and we do everything we can to ensure that our high benchmarks are consistently met.

How we implement this

Fundamentals

This represents a website’s core style sheet, where a component’s background, text colors, and typography lies. Simply put, it’s a webflow style guide.

Our color system consists of: primary color, secondary color and neutral colors with any tints and shades, which are going to be used across during the Webflow development as styles classes.

Our typography system follows core principles of accessibility and readability. The font size gets automatically resized based on device width, so as to deliver an efficient and beautiful web experience.
Graphic depicting Fundamentals of Design System

Atoms

Using fundamentals, they form a basic building block for a website. Think buttons, inputs, links and more.

We start with different base variants for buttons, inputs and links with respective style classes. Base variants can be used to craft new variants - for example, a base button can be used to create a primary button, outline button, text-only button, and so on.
Graphic depicting Atoms of Design System

Molecules

Now things get really interesting. Molecules use atoms to form meaningful website components, which could be headers, menu, forms, sections and more. We identify unique components from designed pages, which are frequently recurring across the website like headers, footers, testimonials and FAQ items.
Graphic depicting Molecules of Design System

Organisms

As you might have guessed, these are groups of molecules joined together to form a relatively complex, distinct section of web pages. This is where website sections are getting shaped - such as a hero section, product grid and more.
Graphic depicting the organisms of Design System

Templates

These are groups of organisms stitched together to form web pages. Now we start to see the design coming together, and see the layout in action. This approach helps anyone (again, not just developers) to create new layouts quickly and add anything on top of it.
Graphic depicting template of Design System

Pages

The page stage is essential because here we test the effectiveness of the whole design system. Viewing everything in context allows us to go back to modify our molecules, organisms, and templates to better address the real-life behavior of the design.

Pages are also where we test variations in templates. For example, we can articulate what a 30-character headline looks like, while demonstrating what a 340-character one looks like. We can see how one item looks like in the shopping cart versus ten items with a discount code applied. These specific, contextual instances influence how we loop back through and construct our system.
pages concept graphics

Want to discuss a project?

Let's talk

Want to work
with us?

Join the team
Workshore Brand Icon