Components

Just like your color scale, working from a defined spacing system allows you to work faster and more consistently. Consistent and scalable spacing helps you eliminate guesswork whilst designing and developing because you're designing with a limited set of options..

Introduction

Spacing throughout our design system utilizes "Grid Units" to inform spacing, including margins and padding for both horizontal and vertical rhythms. By default, Nova includes a generous and comprehensive numeric spacing scale. One spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

By default the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins.

Name	Rem (16px base)	Px
1	0.25rem	4px
2	0.5rem	8px
3	0.75rem	12px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
7	1.75rem	28px
8	2rem	32px
9	2.25rem	36px
10	2.5rem	40px
12	3rem	48px
16	4rem	64px
20	5rem	80px
24	6rem	96px
32	8rem	128px
40	10rem	160px
48	12rem	192px
56	14rem	224px
64	16rem	256px

Margin / Padding

Utilities for controlling an element's margin and padding.

Margin

Utilities for controlling an element's margin.

Control the margin on one side of an element using the m{t|r|b|l|x}-{size} utilities. For example, mx-6 would add 1.5rem of margin to the left and to the right of an element as shown below.

mx-6

Padding

Utilities for controlling an element's padding.

Control the margin on one side of an element using the p{t|r|b|l}-{size} utilities. For example, py-6 would add 1.5rem of margin to the top and to the bottom of an element as shown below.

py-6

Child / Grand child

Utilities for controlling an element's margin and padding to any child or grand child items.

Electron has the ability to control both margin and padding to any child or grand child items by using {c|gc}{p|m}{t|r|b|l}-{size} utilities. For example, cmy-3 would add 0.75rem of margin to the top and to the bottom of all child elements as shown below.