Spacing

Spacing tokens give an interface a steady rhythm. Apsara exposes its spacing scale as CSS custom properties, so custom layouts, extended components, and new patterns all sit on the same grid.

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