Spacing

Our spacing system ensures consistent layout and component spacing throughout the application.

Our spacing system is based on a 4px grid. Each spacing unit (1) equals 4px, providing a consistent rhythm throughout the interface.

Spacing Scale

Based on a 4px grid system

0(0px)

1(4px)

2(8px)

3(12px)

4(16px)

5(20px)

6(24px)

8(32px)

10(40px)

12(48px)

16(64px)

20(80px)

24(96px)

Spacing Categories

How spacing is applied in different contexts

Spacing within components, such as padding between a button's text and its border.

xs (p-2)

sm (p-3)

md (p-4)

lg (p-6)

Spacing between components and sections, such as margins between cards or sections.

Elements with gap-4 (16px) between them

Spacing at the page level, such as padding around the main content area.

Header

Main content with p-6 (24px) padding

Footer