Spacing

Spacing makes content easier to read and shows which elements belong together. All values come from tokens — no custom numbers.

Spacing scale

Based on a 4px base unit. Components and layouts use only values from this scale.

Token	Value
`space-0`	0
`space-1`	0.25rem (4px)
`space-2`	0.5rem (8px)
`space-3`	0.75rem (12px)
`space-4`	1rem (16px)
`space-5`	1.5rem (24px)
`space-6`	2rem (32px)
`space-7`	2.5rem (40px)
`space-8`	3rem (48px)
`space-9`	4rem (64px)
`space-10`	6rem (96px)

Do / Don't

Send request

Cancel

12px gap between stacked buttons. Each action is visually distinct.

Don't

Send request

Cancel

0px gap merges buttons together. Hard to distinguish separate actions.

Spacing scale

space-1

4px / 0.25rem

space-2

8px / 0.5rem

space-3

12px / 0.75rem

space-4

16px / 1rem

space-5

24px / 1.5rem

space-6

32px / 2rem

space-7

40px / 2.5rem

space-8

48px / 3rem

space-9

64px / 4rem

space-10

96px / 6rem

Where to use each token

Each spacing token has a specific role. Previews use redline annotations — red-tinted areas with boundary lines marking the exact spacing value.

Token	Px	Usage in Senco
`space-1`	4	Badge dot to label, icon gap inside tight components
`space-2`	8	Inline button group gap (Money/Crypto tabs), FormField internal gap (label → input → helper)
`space-3`	12	Transaction row internal padding, compact list item padding
`space-4`	16	Between form fields (stacking), default component padding, screen edge margin (mobile)
`space-5`	24	Card padding (all sides), content area padding, grid gutter (tablet)
`space-6`	32	Between page sections, screen margin (desktop), grid gutter (desktop)
`space-7`	40	Large section dividers
`space-8`	48	Page section vertical spacing, hero to content gap
`space-9`	64	Major section breaks
`space-10`	96	Page top/bottom padding, empty state vertical centering

Where to use each token

space-1 — Icon / dot to label

4px

Completed

space-2 — Inline button group gap

8px

space-3 — List item internal padding

12px

Adaeze O.

-250 USD

Kwame M.

-120 USD

space-4 — Form field vertical gap

First name

Devon

16px

Last name

Kim

space-5 — Card padding

24px

From

Devon Kim

Canada

Min-ji Kim

South Korea

space-6 / space-8 — Section vertical spacing

32px

48px

Principles

Principle	Rule
Grouping	Related elements use smaller spacing (8px)
Separation	Distinct sections use larger spacing (32px+)
Vertical rhythm	Consistent vertical intervals between blocks
Component internal	Padding within components follows the scale
Component external	Margins between components follow the scale

Grouping vs. separation

Related — 8px gaps

8px

Distinct — 32px gaps

32px

Spacing utilities

Spacing utility classes use logical properties for RTL/LTR support:

Class	Property
`snc-m-{0-6}`	margin (all sides)
`snc-mt-{value}`	margin-block-start (top)
`snc-mb-{value}`	margin-block-end (bottom)
`snc-mx-auto`	margin-inline: auto (center)
`snc-my-{value}`	margin-block (vertical)
`snc-p-{0-6}`	padding (all sides)
`snc-px-{value}`	padding-inline (horizontal)
`snc-py-{value}`	padding-block (vertical)