Why we’re using a 4-point grid in Webflow

Implementing a 4pt grid system in design is more complex than it appears, requiring careful adaptation across teams and a balance between precision and collaboration, especially when new features are also being developed. While the popular 8pt grid is often used in modern web design, a 4pt grid offers greater granularity necessary for denser interfaces, such as those in Webflow. This approach allows for a more flexible, less error-prone design process by ensuring that all elements, including margins, paddings, and line heights, are divisible by 4, thereby maintaining consistency without the need for pixel-perfect precision. The shared grid system enhances collaboration between designers and developers, enabling faster feature shipping and reducing design system complexity at its core. The 4pt grid also aligns well with modern display resolutions, which are typically divisible by 4 or 8, contributing to a consistent vertical rhythm across the entire box model.