Spacing

Fluxion spacing documentation describes the interval system behind layout rhythm, padding and section structure.

This page combines primitive spacing values with the stable layout tokens that Fluxion exposes publicly for desktop and mobile product work.

Scope snapshot

Primitive35

Base spacing intervals from TailwindCSS V2.

Desktop6

Stable desktop layout spacing decisions from Custom V2.

Mobile6

Compact-layout spacing decisions for mobile.

Consumption guidance

Use primitive spacing to understand the base scale

Primitive spacing is the reference scale behind the system. It explains available intervals, but product-facing layout decisions should not stop at the primitive layer.

Use custom layout tokens for page rhythm

Desktop and mobile layout tokens are the public spacing decisions that should guide container padding, section rhythm and title spacing.

Keep viewport-specific spacing separate

Desktop and mobile spacing are documented independently because they solve different layout conditions. Avoid treating them as interchangeable.

How this page is organized

primitive spacing documents the raw scale
desktop layout spacing documents stable product spacing decisions for large viewports
mobile layout spacing documents the equivalent compact-layout decisions

Primitive spacing

Primitive spacing defines the raw interval scale available to the system.

TailwindCSS V2 spacing primitives define the base interval scale used throughout Fluxion.

Spacing scale

Raw spacing steps for layout rhythm, padding, gaps and offsets.

primitives.space.0Primitive

spacing/0

0px

primitives.space.0_5Primitive

spacing/0-5

2px

primitives.space.1Primitive

spacing/1

4px

primitives.space.1_5Primitive

spacing/1-5

6px

primitives.space.10Primitive

spacing/10

40px

primitives.space.11Primitive

spacing/11

44px

primitives.space.12Primitive

spacing/12

48px

primitives.space.14Primitive

spacing/14

56px

primitives.space.16Primitive

spacing/16

64px

primitives.space.2Primitive

spacing/2

8px

primitives.space.2_5Primitive

spacing/2-5

10px

primitives.space.20Primitive

spacing/20

80px

primitives.space.24Primitive

spacing/24

96px

primitives.space.28Primitive

spacing/28

112px

primitives.space.3Primitive

spacing/3

12px

primitives.space.3_5Primitive

spacing/3-5

14px

primitives.space.32Primitive

spacing/32

128px

primitives.space.36Primitive

spacing/36

144px

primitives.space.4Primitive

spacing/4

16px

primitives.space.40Primitive

spacing/40

160px

primitives.space.44Primitive

spacing/44

176px

primitives.space.48Primitive

spacing/48

192px

primitives.space.5Primitive

spacing/5

20px

primitives.space.52Primitive

spacing/52

208px

primitives.space.56Primitive

spacing/56

224px

primitives.space.6Primitive

spacing/6

24px

primitives.space.60Primitive

spacing/60

240px

primitives.space.64Primitive

spacing/64

256px

primitives.space.7Primitive

spacing/7

28px

primitives.space.72Primitive

spacing/72

288px

primitives.space.8Primitive

spacing/8

32px

primitives.space.80Primitive

spacing/80

320px

primitives.space.9Primitive

spacing/9

36px

primitives.space.96Primitive

spacing/96

384px

primitives.space.pxPrimitive

spacing/px

1px

Desktop layout spacing

Desktop layout spacing translates the primitive scale into stable product-facing desktop rhythm.

Custom V2 desktop tokens translate the primitive scale into product-facing layout decisions.

Containers

Horizontal padding tokens that control desktop container inset.

custom.desktop.layout.container.padding.xCustom

container-padding-x

24px

Sections

Vertical spacing tokens for major page sections on desktop.

custom.desktop.layout.section.padding.yCustom

section-padding-y

96px

Section titles

Gap tokens between section titles and adjacent content blocks.

custom.desktop.layout.sectionTitle.gap.lgCustom

section-title-gap-lg

20px

custom.desktop.layout.sectionTitle.gap.mdCustom

section-title-gap-md

20px

custom.desktop.layout.sectionTitle.gap.smCustom

section-title-gap-sm

16px

custom.desktop.layout.sectionTitle.gap.xlCustom

section-title-gap-xl

24px

Mobile layout spacing

Mobile layout spacing adapts the same layout decisions for compact viewports.

Custom V2 mobile tokens adapt layout rhythm and container inset for compact viewports.

Containers

Horizontal padding tokens that control mobile container inset.

custom.mobile.layout.container.padding.xCustom

container-padding-x

24px

Sections

Vertical spacing tokens for major page sections on mobile.

custom.mobile.layout.section.padding.yCustom

section-padding-y

64px

Section titles

Gap tokens between section titles and adjacent content blocks on mobile.

custom.mobile.layout.sectionTitle.gap.lgCustom

section-title-gap-lg

16px

custom.mobile.layout.sectionTitle.gap.mdCustom

section-title-gap-md

20px

custom.mobile.layout.sectionTitle.gap.smCustom

section-title-gap-sm

16px

custom.mobile.layout.sectionTitle.gap.xlCustom

section-title-gap-xl

16px