Spacing

The TpGroup spacing system uses a consistent 4px base unit scale from 4px to 96px. This creates visual rhythm and makes layouts predictable across all applications.

Spacing Scale

spacing-1
4px•0.25rem

Tight spacing, icon padding

4px wide
spacing-2
8px•0.5rem

Small gaps, compact layouts

8px wide
spacing-3
12px•0.75rem

Button padding, small margins

12px wide
spacing-4
16px•1rem

Default spacing, card padding

16px wide
spacing-5
20px•1.25rem

Medium spacing between elements

20px wide
spacing-6
24px•1.5rem

Section spacing, large padding

24px wide
spacing-8
32px•2rem

Large gaps, prominent spacing

32px wide
spacing-10
40px•2.5rem

Extra large spacing

40px wide
spacing-12
48px•3rem

Section breaks

48px wide
spacing-16
64px•4rem

Major section spacing

64px wide
spacing-20
80px•5rem

Large layout spacing

80px wide
spacing-24
96px•6rem

Maximum spacing

96px wide

Visual Scale

1
2
3
4
5
6
8
10
12
16
20
24

Usage Examples

Button Padding

Spacing-3 (12px) vertical, Spacing-4 (16px) horizontal

Card Layout

Spacing-6 (24px) padding, Spacing-4 (16px) between elements

Card Title

This is example content with consistent spacing.

List Spacing

Spacing-2 (8px) between tight list items

  • First list item
  • Second list item
  • Third list item

Code Example

/* CSS Custom Properties */
--spacing-1: 4px;
--spacing-4: 16px;
--spacing-6: 24px;

/* Tailwind Classes */
<div className="p-6 space-y-4">
  <div className="mb-4">
  <button className="px-4 py-3">

/* Direct Usage */
padding: var(--spacing-4);
margin-bottom: var(--spacing-6);
gap: var(--spacing-2);

Spacing Matrix

TokenPixelsRemTailwindCommon Use
spacing-14px0.25remp-1, m-1, gap-1Icon padding
spacing-416px1remp-4, m-4, gap-4Default spacing
spacing-624px1.5remp-6, m-6, gap-6Card padding
spacing-832px2remp-8, m-8, gap-8Section spacing

Spacing Guidelines

  • • Use the 4px base unit to maintain consistent visual rhythm
  • • Prefer spacing tokens over arbitrary pixel values
  • • Mobile devices should use smaller spacing values (1-4) for compact layouts
  • • Desktop layouts can use larger spacing values (6-12) for breathing room
  • • Maintain at least spacing-4 (16px) touch targets for accessibility