Spacing
The CESS FRSah design system uses the default Tailwind spacing scale. One unit equals 4px.
Scale
Tailwind spacing tokens used across the app.
1
4px
w-12
8px
w-23
12px
w-34
16px
w-45
20px
w-56
24px
w-68
32px
w-8Layout
Page structure, sections, and responsive padding.
Content
Page content
p-4 sm:p-6 lg:p-8Content
Page header
px-4 py-4 sm:px-6 lg:px-8Content
Section stack
space-y-6Content
Content grid
grid gap-6Content
Mobile action bar
p-4Gap
Spacing between sibling elements in flex and grid layouts.
A
B
C
Tight
gap-2A
B
C
Default
gap-4A
B
C
Relaxed
gap-6A
B
C
Header actions
gap-3Padding
Inner spacing for cards, panels, and controls.
Content
Card
p-6Content
Card header
p-5Content
Compact panel
p-4Content
Button
px-3 py-2Content
Primary button
px-4 py-2Content
Badge
px-3 py-1Content
List item
px-4 py-3Content
Upload zone
p-4Margin
Vertical rhythm between headings, labels, and content.
Block
Spaced element
Below heading
mt-1Block
Spaced element
Below title
mt-2Block
Spaced element
Below section label
mt-5Block
Spaced element
Form label
mb-2Block
Spaced element
Icon offset
mr-2Block
Spaced element
Stacked fields
space-y-4