Spacing
Our spacing system uses a consistent scale to create visual rhythm and hierarchy. The default spacing between most elements should be 10px (spacing-2).
Spacing Scale
Standard spacing values for margins, padding, and gaps throughout the application.
Usage Guidelines
Default Spacing
Use 10px (spacing-2) as the default spacing between most UI elements like form fields, buttons, and content sections.
Compact Spacing
Use 5px (spacing-1) for tighter layouts like list items, table cells, or closely related content.
Generous Spacing
Use larger values like 30px, 40px, or 60px for section breaks, page margins, and major layout divisions.
Extra Large Spacing
Use 80px and 100px for hero sections, landing pages, or creating dramatic visual separation.
Interactive Examples
See how different spacing values affect layout and visual hierarchy.
Card Layout (10px default spacing)
Button Group (10px gap)
Section Spacing (40px between sections)
Section 1
This section demonstrates generous spacing between major content areas.
Section 2
Notice the 40px gap creating clear visual separation.
CSS Variables Reference
/* Spacing Variables */
--spacing-0: 0px;
--spacing-1: 5px;
--spacing-2: 10px; /* Default */
--spacing-3: 15px;
--spacing-4: 20px;
--spacing-6: 30px;
--spacing-8: 40px;
--spacing-12: 60px;
--spacing-16: 80px;
--spacing-20: 100px;
/* Usage Example */
.element {
margin-bottom: var(--spacing-2); /* 10px */
padding: var(--spacing-4); /* 20px */
gap: var(--spacing-2); /* 10px */
}