Grid

Overview
Specs
Guidelines

The grid serves as the foundation for positioning elements in the view. Designing on the grid helps to create straightforward and easy-to-follow experiences.

Consistent use of a grid provides the groundwork for harmonious and uniform positioning of elements in the view. Designing with the grid aids in creating an experience that enhances understanding and brings order.

Baseline Grid

The grid specifies 14px for the base font size, which produces an x-height of eight pixels. The x-height is halved to produce a four pixels baseline. All text flows vertically along this baseline, creating a consistent rhythm across all views. This rhythm is established by the line height between each text line and the margin between elements.

Best Practices:

Use multiples of eight pixels to define measurements, spacing, and positioning elements;
When necessary, use four pixels for finer adjustments;
Ensure objects align both vertically and horizontally whenever possible;
Align the bounding box with the grid, not with the text baseline.

Grid Anatomy

All grids consist of three elements: columns, gutters, and margins.

Columns

Columns are the fundamental elements of a grid. A 12-column framework is
common for its adaptability and straightforward division, making it highly versatile for layouts that can adjust responsively according to screen size.

Gutter

Gutters, the space between columns, are 16 pixels at all standard breakpoints.

Margins

Margins encompass the area surrounding grid columns and rows.

Content Layout

The product layouts generally have a 12-column configuration.

The ideal use in simpler layouts is always eight columns. However, if it is necessary to add primary and secondary information, in more complex layouts, they can be extended to use the remaining four columns, making a total of 12 columns.

Content Distribution

Align content to the columns on the grid. Any cells that do not fit on a single row will wrap to a new row.

Content Wrapping

If there aren’t enough columns to accommodate the span, it will wrap to the next row.

Grid Behavior

The layout grid can be configured to function in various ways.

Fluid

By default, the layout grid will take the container’s full width.

Fixed

You can give the layout grid a fixed size, which will place it either centered or left/right aligned to the container.

Responsive Design

Responsive design is an approach that facilitates seamless design across different devices such as mobile, tablet, and desktop. It emphasizes tailoring design elements to users’ behavior, considering factors like screen size, platform, and orientation. By employing responsive layout techniques, designs can efficiently adapt to various window or device sizes, ensuring equal access to information and delivering an effective user experience.

Breakpoints

Breakpoints are fundamental to responsive design, shaping the way layouts adapt to different device or viewport sizes. They represent specific dimensions commonly found across devices, establishing a reliable foundation for responsiveness. While they don’t cover every scenario, the defined ranges offer a solid framework for accommodating virtually any device.

Size Class	Class Infx	Breakpoint Range	Nº of Collumns	Margin	Gutter
Extra Small	–	567 px or less	6	8 px	16 px
Small	sm	567 px and larger	6	8 px	16 px
Medium	md	768 px and larger	6	8 px	16 px
Large	lg	992 px and larger	8	16 px	16 px
Extra Large	xl	1200 px and larger	12	16 px	16 px
Extra Extra Large	xxl	1400 px and larger	12	16 px	16 px
Extended	xxxl	2000 px and larger	12	16 px	16 px

Company Configuration

The company configuration pattern in accounting software streamlines setup by managing company details and preferences …

Responsive design

Breakpoints

Breakpoints are fundamental to responsive design, shaping how layouts adapt to different device or viewport sizes. They represent specific dimensions commonly found across devices, establishing a reliable foundation for responsiveness. While they don’t cover every scenario, defined ranges offer a solid framework for accommodating nearly any device.

Size Class	Class infx	Breakpoint range	Nº of colluns	Margin	Gutter
Extra Small	–	576 px or less	6	8 px	16 px
Small	sm	576 px and larger	6	8 px	16 px
Medium	md	768 px and larger	6	8 px	16 px
Large	lg	992 px and larger	8	16 px	16 px
Extra Large	xl	1200 px and larger	12	16 px	16 px
Extra Extra Large	xxl	1400 px and larger	12	16 px	16 px
Extended	xxxl	2000 px and larger	12	16 px	16 px

Useful links

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Behavior

Extended

With the increasing popularity of ultrawide screens, introducing an extended breakpoint that begins at 2000 pixels wide allows web designers to maximize the potential of these expansive displays.

By leveraging this breakpoint, the layout can be restructured to enhance the user experience, presenting content in a more immersive and organized manner. This approach enables designers to break free from traditional constraints, utilizing the extra screen real estate to display multiple columns of content, side-by-side comparisons, or larger visual elements that capture the user’s attention.

This new breakpoint would use the usual grids to define different layouts that can be retrieved in different products. These are the following types of layouts with 3 panels and their size (for 3440px screens).