Gap System

Consistent spacing between elements creates visual rhythm and improves readability across your interface.

Gap System

Consistent spacing between elements creates visual rhythm and improves readability across your interface.

Gap Specifications

NameValueCSS ClassUse Case
Gap-4		4pxgap-1Tight spacing for compact layouts
Gap-8		8pxgap-2Standard spacing for most components
Gap-12		12pxgap-3Medium spacing for form elements
Gap-16		16pxLarge spacing for sections
Gap-20		20pxgap-5Extra large spacing for major sections
Gap-24		24pxgap-6Maximum spacing for layout separation

Gap-4

4px

Tight spacing for compact layouts

gap-1

Gap-8

8px

Standard spacing for most components

gap-2

Gap-12

12px

Medium spacing for form elements

gap-3

Gap-16

16px

Large spacing for sections

Gap-20

20px

Extra large spacing for major sections

gap-5

Gap-24

24px

Maximum spacing for layout separation

gap-6

Gap Usage Examples

Form Elements

Gap-12 (12px) - Form field spacing

Button Groups

Gap-8 (8px) - Standard button spacing

Gap-4 (4px) - Compact button spacing

Icon and Text Combinations

Gap-8 (8px) - Standard icon spacing

Add New Item

Gap-4 (4px) - Compact icon spacing

Add

Card Layouts

Gap-16 (16px) - Card grid spacing

Card Title

Card content goes here

Card Title

Card content goes here

Card Title

Card content goes here

Gap Usage Guidelines

Small Gaps (4-8px)

For closely related elements

  • • Button groups and toolbars
  • • Icon and text combinations
  • • Inline form elements
  • • Navigation menu items

Medium Gaps (12-16px)

For standard component spacing

  • • Form field groups
  • • Card content sections
  • • List item spacing
  • • Tab content areas

Large Gaps (20-24px)

For major layout sections

  • • Section separators
  • • Card grid layouts
  • • Page content blocks
  • • Modal content areas
Built with v0