--- title: "Spacing | GoodBarber's Design System" description: "We use 2 types of measure units for spacing inside and between components: **Pixels**, and the gutters size (**G**)." canonical_url: "https://www.goodbarber.com/uxdesign/spacing/" lang: nl --- # Spacing | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://nl.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) # Spacing Foundations Spacing is the art of setting a distance between the elements that compose the page or screen of an app. It contributes to a pleasing and functional layout. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/spacing.64a1c1c72162.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/spacing.64a1c1c72162.mp4) ## Introduction We use 2 types of measure units for spacing inside and between components: **Pixels**, and the gutters size (**G**). Pixels and gutters are used to create consistent and visually pleasing spacing between and inside components. **Pixels (px)** are a **fixed, absolute unit** that stays the same regardless of screen size or resolution. Using pixels as a unit of measurement can be useful for setting precise and consistent spacing between elements, especially when working with smaller, detailed elements. **Gutters (G)** are a unit of measurement that refers to the space between columns in a the grid. A gutter size is typically defined in pixels and it is used to create consistent spacing between columns, it helps to create a structured layout and improve readability. It is a **relative unit** that can be scaled depending on the screen size and device. By using a combination of both units, we create a visually pleasing and easy-to-use layout that is consistent across different screen sizes and devices. Pixels can be used for precise spacing of smaller elements, while gutters can be used to create consistent spacing between larger elements like columns. This allows for a balance between precision and flexibility when working with spacing, and it can help to ensure that the design is visually pleasing and easy to use on different devices. ## Spacing based on gutter value **G** is used to space components within a group and between groups. As this value depends on the device used, it allows the layout to be responsive and to adapt to the screen size. As a reminder, the [gutter value](/uxdesign/grid/) is: **16px** for mobile, **20px** for tablet, **20px** for laptop and **20px** for desktop. ![A group as a list item](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Spacing-Gutter-1.d777d9c3abb4.png) *A group as a list item* The gutter value is also used for **padding**: ![Section article List Grid & Highlight Padding on mobile phones](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Spacing-Gutter-2.8bc180227505.png) *Section article List Grid & Highlight Padding on mobile phones* ![Modal windows use the gutter values as padding](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Spacing-Gutter-3.d7ff640e4d4d.png) *Modal windows use the gutter values as padding* ## Spacing based on pixels Pixels are used for small components as below, when space is limited: ![Top Navigation made of icons (Template Article, detail section)](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Spacing-Pixels-1.6040c2c1ff6d.png) *Top Navigation made of icons (Template Article, detail section)* ![Info block with avatar and icons](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Spacing-Pixels-2.01367a769737.png) *Info block with avatar and icons* We also use pixels for some components that will have the same organization on all platforms. For example: ![Text Field (title up) Mobile Medium](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Spacing-Pixels-3.622ed40fffa9.png) *Text Field (title up) Mobile Medium* ![Icon button Medium](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Spacing-Pixels-4.33a3ba463161.png) *Icon button Medium* ## The vertical spacing option Users can choose between 3 options for the spacing of the blocks, depending on how they want the page to look, more airy or more compact : **1G** — Small Spacing **2G** — Medium Spacing **3G** — Large Spacing This concerns **list items** and **widgets** ![Gutters for vertical spacing](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Spacing-Vertical-Spacing.ad53c424fc1a.gif) *Gutters for vertical spacing* ## The divider option If the divider option is activated, **the space between the elements is applied twice**. Like the vertical spacing option, this concerns list items and widgets. ![The divider for vertical spacing](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Spacing-Divider-Option.f29b108cf0c2.gif) *The divider for vertical spacing*