The Element UI design system is a thoughtfully crafted framework that prioritizes consistency, usability, and aesthetic appeal. At its core, this system employs a precise approach to spacing and layout and by adhering to these standardized spacings, you can quickly create interfaces that feel cohesive and well-structured. This system also makes it easier to maintain consistency across different projects and team members.

Use this design system (or a variation of it) in your Elementor projects to boost your development workflow and start building professional websites faster than ever.

The 4pt System: Foundation of Spacing

One of the hallmarks of the Element UI Design System is its use of the 4pt system. This approach provides a consistent and scalable method for spacing elements within interfaces. The system uses multiples of 4 pixels to create a harmonious visual rhythm across all components and layouts. Common spacing values include:

  • 8px (2 * 4pt)
  • 12px (3 * 4pt)
  • 16px (4 * 4pt)
  • 24px (6 * 4pt)
  • 32px (8 * 4pt)

As an example, you will find patterns in most components where we have used the same spacing values between groups of widgets.

White Space: Breathing Room for Design

Element UI places a strong emphasis on the effective use of white space. Also known as negative space, white space is the empty area between design elements. In the Element UI Design System, white space is not just an afterthought but a crucial design element that:

  • Improves readability and comprehension
  • Creates visual hierarchy
  • Gives design elements room to "breathe"
  • Enhances the overall aesthetic appeal of the interface

The system encourages designers to be generous with white space, using larger spacing options when possible to create a clean, uncluttered look.

Containers and Padding

The Element UI Design System utilizes a thoughtful approach to containers and padding. Containers are used to group related elements, and padding is applied within these containers to create internal spacing. The system typically recommends:

  • Using small (12-20px) internal padding for components like cards.
  • Applying medium sized (20-40px) gaps between widgets inside a container group.
  • Large (40-60px) gaps between different container groups.
  • Implementing extra-large (80-120px) padding for larger columns or rows of container groups inside a parent (section) container.

This structured approach to padding ensures that content within containers is easy to read and visually distinct from other elements on the page.

Responsive Design and Flexibility

While the Element UI Design System provides a structured framework, there is also a need for flexibility in responsive design. As an example, these is our standard rules for design including responsive settings:

Desktop

Parent container

  • Boxed content width: This can depend on your design requirements, however for consistency we use a default of 1140px. In some cases a wider content width of 1280px or 1530px may be required.
  • Padding: Top 120px, Right 60px, Bottom 120px, Left 60px

Tablet

Parent container

  • Boxed content width: 85% - This ensures a nice padding left and right which scales when the browser width increases or decreases.
  • Padding: Top 80px, Right 0px, Bottom 80px, Left 0px - No need for left or right padding values here as the 85% boxed content width ensures good padding.

Mobile

Parent container

  • Boxed content width: 90% - This ensures a nice padding left and right which scales when the browser width increases or decreases.
  • Padding: Top 60px, Right 0px, Bottom 60px, Left 0px - No need for left or right padding in mobile as the 90% boxed content width ensures good padding.

On smaller screens (tablets and mobiles), the number of columns is reduced, and spacing is adjusted proportionally to maintain readability and usability. This flexibility ensures that interfaces remain visually appealing and functional across all devices.

 

Consistency and Efficiency

By establishing these clear guidelines for spacing, white space, and layout, the Element UI Design System promotes consistency across all of your website pages. This consistency not only creates a more professional look but also enhances user experience by making interfaces more intuitive and easier to navigate.

Moreover, the system's predefined spacing options and layout rules significantly speed up the design process. Designers can make quick, confident decisions about spacing and layout, reducing the time spent on trial-and-error adjustments.

 

Design Systems Are Guidelines, Not Rules

The Element UI Design System is here to guide you - not box you in. While we recommend these spacing values and layout principles, they’re not rigid rules. Feel free to adapt them based on the needs of your design or project. As long as you're working from a consistent system (even one that’s slightly modified) you’ll find it much easier to keep your designs cohesive, professional, and easy to maintain.