Spacing

Consistent spacing creates visual rhythm and hierarchy in your interface. Apsara provides a comprehensive spacing scale through CSS custom properties that maintain proportional relationships across your application. These tokens ensure consistent spacing whether you're building custom layouts, extending components, or creating new UI patterns.

Scale

Spacing values are derived from a 17-step scale, which provides fine-grained control over layout spacing. The scale starts at 2px and progressively increases to 120px, allowing for both tight and spacious layouts.

Semantic groupings

The spacing scale can be organized into semantic groups for easier selection:

Usage

Use the scale for every gap, pad, and margin. Mixing raw pixels back in is what breaks the rhythm the scale exists to hold.

1/* Custom card grid layout */
2.card-grid {
3  display: grid;
4  gap: var(--rs-space-5);
5  padding: var(--rs-space-7);
6}
7
8/* Sidebar navigation */
9.sidebar-nav {
10  display: flex;
11  flex-direction: column;
12  gap: var(--rs-space-2);
13  padding: var(--rs-space-4) var(--rs-space-5);
14}
15
16/* Page section with header */
17.page-section {
18  margin-top: var(--rs-space-13);
19}
20
21.page-section-header {
22  margin-bottom: var(--rs-space-6);
23}
24
25/* Form field groups */
26.form-group {
27  display: flex;
28  flex-direction: column;
29  gap: var(--rs-space-3);
30  margin-bottom: var(--rs-space-5);
31}
32
33/* Inline icon with text */
34.icon-text {
35  display: flex;
36  align-items: center;
37  gap: var(--rs-space-2);
38}

Best practices

• Use smaller values (1-5) for internal component spacing like padding and gaps between inline elements
• Use medium values (5-9) for spacing between related components and within sections
• Use larger values (10-17) for spacing between sections and major layout divisions
• Be consistent - use the same spacing token for similar contexts throughout your application
• Avoid mixing pixel values with spacing tokens to maintain consistency