Spacings

The spacing system uses a two-layer approach: a numeric primitive scale (spacing.0–spacing.96) and a set of semantic aliases (4xs–4xl) that map to the primitives. Components and layouts should always reference the semantic aliases — they give consistent rhythm and can be adjusted per breakpoint without touching component code.

Semantic Scale

Each alias resolves to a CSS custom property --cn-spacing-{name} and a Tailwind utility class. Use gap-cn-*, p-cn-*, m-cn-*, and space-y-cn-* in your markup.

Token	Value	Preview	CSS Variable	Tailwind Class
0	0px		—cn-spacing-0	gap-0
px	1px		—cn-spacing-px	gap-px
4xs	2px		—cn-layout-4xs	gap-cn-4xs
3xs	4px		—cn-layout-3xs	gap-cn-3xs
2xs	6px		—cn-layout-2xs	gap-cn-2xs
xs	8px		—cn-layout-xs	gap-cn-xs
sm	12px		—cn-layout-sm	gap-cn-sm
md	16px		—cn-layout-md	gap-cn-md
lg	20px		—cn-layout-lg	gap-cn-lg
xl	24px		—cn-layout-xl	gap-cn-xl
2xl	32px		—cn-layout-2xl	gap-cn-2xl
3xl	40px		—cn-layout-3xl	gap-cn-3xl
4xl	80px		—cn-layout-4xl	gap-cn-4xl
auto	auto		—	m-auto
full	100%		—	w-full

Tailwind Classes

All semantic tokens are available as Tailwind utilities with the cn- prefix:

Property	Pattern	Example
Gap	gap-cn-{size}	gap-cn-sm
Padding	p-cn-{size}	p-cn-md, px-cn-lg, pt-cn-xs
Margin	m-cn-{size}	m-cn-md, mx-cn-xl, mb-cn-sm
Space between	space-y-cn-{size}	space-y-cn-md

When to Use What

• 4xs–3xs — Micro gaps: icon-to-label, inline badge padding, compact chip internals
• 2xs–xs — Tight component internals: button padding, input padding, dense list items
• sm–md — Standard component spacing: card padding, form field gaps, list item spacing
• lg–xl — Section-level separation: content block gaps, modal padding, sidebar sections
• 2xl–4xl — Page-level divisions: hero sections, major feature areas, page margins

Primitive Scale

The full numeric scale (spacing.0–spacing.96) follows a 4px base grid. Semantic aliases reference these primitives. For most use cases, stick with the semantic tokens above — the primitives are available for edge cases where an exact pixel value is needed.

Token	Value	Token	Value	Token	Value
0	0px	9	36px	18	72px
px	1px	10	40px	20	80px
half	2px	11	44px	24	96px
1	4px	12	48px	32	128px
2	8px	13	52px	40	160px
3	12px	14	56px	48	192px
4	16px	15	60px	56	224px
5	20px	16	64px	64	256px
6	24px	17	68px	96	384px
7	28px
8	32px

Half-step tokens (1-half through 12-half) are also available for fine-grained adjustments: spacing.1-half = 6px, spacing.2-half = 10px, etc.