But the Editor theme replaces the core variables with 6px, so the whole interface becomes larger and more spacious while maintaining the same relative values and relationship between components. In certain parts of the Editor, for instance, we’re reusing components from the Designer. Having a design system that’s entirely based on the core unit allows for seamless scaling of the whole interface through theming. Aiming for consistent vertical rhythm across the whole box modelĪt the heart of every layout grid is the core unit, used to calculate everything else. Instead, we’re reducing the complexity of our design system at the root level, leading to more consistent interfaces shipped without extra effort.

This allows us to ship new features faster, without compromising consistency. In the case of the 4pt grid, it provides a better experience for our designers and developers, but also dramatically speeds things up at the intersection of those disciplines, bringing them closer together via a shared grid and scale. Every attempt to improve our internal experience must map directly to improvements for you. The goal for all of us at Webflow is to ship stellar tools without sacrificing polish, consistency, or speed. Good designer experience + Good developer experience = Good UX We would have to use values like 7, 15, or 23, which is the opposite of intuitive. If we had to account for 1px calculations everywhere we use borders to maintain optical consistency between mediums, the 4pt grid would no longer be an actual 4pt grid. Going back to the original reason we decided to use a layout grid, our main goal has always been to establish a more flexible, less error-prone process for designing and building interfaces. Do we calculate a 1px border as being within the 8px padding or not? Would the computed height be a multiple of 4? What ultimately matters for us is that both designers and developers use multiples of 4 in their respective tools and that everything looks good - without having to overlay production screenshots on top of the design team’s projects. While we at Webflow value visual precision, we tend to pick our battles, favoring efficient collaboration over precision.īorders and line height are two good examples of design elements that work differently between mediums. The first type aims to make their Sketch/Figma projects and the resulting front-end implementation be pixel-perfect duplicates. This tends to boil down to two types of teams, defined by what they value more: pixel perfection or seamless cross-team collaboration. Choosing between pixel perfection and seamless cross-team workĭifferent teams implement layout grids in different ways. Building denser interfaces requires the high level of fidelity provided by a more granular grid. We do use all values in the progression from 4 to 36, so our grid is definitely on the more granular end of the scale, especially compared to the 8pt grid you might see in many modern marketing websites, for example. With such a dense interface, an 8pt scale simply doesn’t provide enough granularity: even 4 is a value we use fairly often in the inspector. Why 4pt? Spacing scales in the context of a design toolĪs a designer working on websites and/or products, you’re probably familiar with the popular 8pt grid, so you might be asking: why 4?ĭesktop design tools have fairly dense interfaces optimized for productivity and speed of use, and this is just as true for Webflow.

In practice, adapting existing components is a complex, cross-team effort that takes planning and is anything but simple - especially when you’re also shipping new features.

At first glance, the 4pt grid sounds like a simple concept to implement: let’s just use values that can be divided by 4 everywhere!

4 pt grid type sizes