- Visual Language
- Color
- Icons
- Logo
- Space
- Typography
Space
Spacing allows the user to take breaks, easily digest information, and know where to look on a page. Consistent spacing builds trust with users.
Overview
This library provides easy-to-understand concepts and code variables to apply and maintain space within and between components. It is designed to ensure consistency across all USAC products.
Inset
An inset is the space within a block from which elements —typography, images, icons, and more — are separated from the edge. By default, a component’s inset should be equal on all four sides.
Sample
Figure: Component, using $indi-space-inset-l
Variables
Apply an inset variable token to the padding property.
| VARIABLE NAME | VALUE |
|---|---|
$indi-space-inset-default
|
16px 16px 16px 16px |
$indi-space-inset-xs
|
4px 4px 4px 4px |
$indi-space-inset-s
|
8px 8px 8px 8px |
$indi-space-inset-m
|
16px 16px 16px 16px |
$indi-space-inset-l
|
32px 32px 32px 32px |
$indi-space-inset-xl
|
64px 64px 64px 64px |
Squish Inset
A squish inset reduces top and bottom padding by 50% relative to the default inset space.
Sample
Figure: Primary button, using $indi-space-inset-squish-l
Figure: Small button, using $indi-space-inset-squish-default
Variables
| VARIABLE NAME | VALUE |
|---|---|
$indi-space-inset-squish-default
|
8px 16px 8px 16px |
$indi-space-inset-squish-xs
|
2px 4px 2px 4px |
$indi-space-inset-squish-s
|
4px 8px 4px 8px |
$indi-space-inset-squish-m
|
8px 16px 8px 16px |
$indi-space-inset-squish-l
|
16px 32px 16px 32px |
Stacking
Use a stacking value to separate block components arranged vertically in a column. The last component in a stack should omit this space.
Sample
Figure: Form Component, using $indi-space-stack-l and $indi-space-stack-default
Variables
Apply an inset variable token to the padding property.
| VARIABLE NAME | VALUE |
|---|---|
$indi-space-stack-default
|
0 0 16px 0 |
$indi-space-stack-xs
|
0 0 4px 0 |
$indi-space-stack-s
|
0 0 8px 0 |
$indi-space-stack-m
|
0 0 16px 0 |
$indi-space-stack-l
|
0 0 32px 0 |
$indi-space-stack-xl
|
0 0 64px 0 |
Inline
Use inline spacing variable tokens to separate inline elements arranged horizontally and that may wrap on the right. The last component in an inline set should omit this space.
Sample
Figure: Form Component, using $indi-space-inline-left-l and $indi-space-inline-right-l
Variables
Apply an inline variable to margin property.
| VARIABLE NAME | VALUE |
|---|---|
$indi-space-inline-left-default
|
0 16px 0 0 |
$indi-space-inline-left-xs
|
0 4px 0 0 |
$indi-space-inline-left-s
|
0 8px 0 0 |
$indi-space-inline-left-m
|
0 16px 0 0 |
$indi-space-inline-left-l
|
0 32px 0 0 |
$indi-space-inline-left-xl
|
0 64px 0 0 |
$indi-space-inline-right-default
|
0 0 0 16px |
$indi-space-inline-right-xs
|
0 0 0 4px |
$indi-space-inline-right-s
|
0 0 0 8px |
$indi-space-inline-right-m
|
0 0 0 16px |
$indi-space-inline-right-l
|
0 0 0 32px |
$indi-space-inline-right-xl
|
0 0 0 64px |