Consistent spacing creates visual rhythm and hierarchy in your interface. Apsara provides a comprehensive spacing scale through CSS custom properties that you can use throughout your application.

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.

Tokens

Space scale tokens can be accessed using CSS variables. Use these tokens to style your custom components, ensuring they are consistent with the rest of your theme.

1/* Space scale */
2var(--rs-space-1);   /* 2px */
3var(--rs-space-2);   /* 4px */
4var(--rs-space-3);   /* 8px */
5var(--rs-space-4);   /* 12px */
6var(--rs-space-5);   /* 16px */
7var(--rs-space-6);   /* 20px */
8var(--rs-space-7);   /* 24px */
9var(--rs-space-8);   /* 28px */
10var(--rs-space-9);   /* 32px */
11var(--rs-space-10);  /* 40px */
12var(--rs-space-11);  /* 48px */
13var(--rs-space-12);  /* 56px */
14var(--rs-space-13);  /* 64px */
15var(--rs-space-14);  /* 72px */
16var(--rs-space-15);  /* 80px */
17var(--rs-space-16);  /* 96px */
18var(--rs-space-17);  /* 120px */

Semantic Groupings

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

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