Foundations
Spacing
Spacing tokens drive gaps, padding and margins. Semantic spacing (gap/*, padding/*) references the core spacing ramp.
Core
| Token | Value | Preview |
|---|---|---|
--moments-core-spacing-0 | 0rem = 0px | |
--moments-core-spacing-25 | 0.063rem = 1.01px | |
--moments-core-spacing-50 | 0.125rem = 2px | |
--moments-core-spacing-100 | 0.25rem = 4px | |
--moments-core-spacing-150 | 0.375rem = 6px | |
--moments-core-spacing-200 | 0.5rem = 8px | |
--moments-core-spacing-250 | 0.625rem = 10px | |
--moments-core-spacing-300 | 0.75rem = 12px | |
--moments-core-spacing-350 | 0.875rem = 14px | |
--moments-core-spacing-400 | 1rem = 16px | |
--moments-core-spacing-500 | 1.25rem = 20px | |
--moments-core-spacing-600 | 1.5rem = 24px | |
--moments-core-spacing-700 | 1.75rem = 28px | |
--moments-core-spacing-800 | 2rem = 32px | |
--moments-core-spacing-900 | 2.25rem = 36px | |
--moments-core-spacing-1000 | 2.5rem = 40px | |
--moments-core-spacing-1100 | 2.75rem = 44px | |
--moments-core-spacing-1200 | 3rem = 48px | |
--moments-core-spacing-1400 | 3.5rem = 56px | |
--moments-core-spacing-1600 | 4rem = 64px | |
--moments-core-spacing-2000 | 5rem = 80px | |
--moments-core-spacing-2400 | 6rem = 96px | |
--moments-core-spacing-2800 | 7rem = 112px | |
--moments-core-spacing-3200 | 8rem = 128px | |
--moments-core-spacing-3600 | 9rem = 144px | |
--moments-core-spacing-4000 | 10rem = 160px | |
--moments-core-spacing-4400 | 11rem = 176px | |
--moments-core-spacing-4800 | 12rem = 192px | |
--moments-core-spacing-5200 | 13rem = 208px | |
--moments-core-spacing-5600 | 14rem = 224px | |
--moments-core-spacing-6000 | 15rem = 240px | |
--moments-core-spacing-6400 | 16rem = 256px | |
--moments-core-spacing-7200 | 18rem = 288px | |
--moments-core-spacing-8000 | 20rem = 320px | |
--moments-core-spacing-9600 | 24rem = 384px |
Semantic → core
Padding
| Semantic token | Points to (core) | Resolved value | Preview |
|---|---|---|---|
--moments-semantic-spacing-padding-none | --moments-core-spacing-0 | 0rem = 0px | |
--moments-semantic-spacing-padding-6xs | --moments-core-spacing-50 | 0.125rem = 2px | |
--moments-semantic-spacing-padding-5xs | --moments-core-spacing-100 | 0.25rem = 4px | |
--moments-semantic-spacing-padding-4xs | --moments-core-spacing-150 | 0.375rem = 6px | |
--moments-semantic-spacing-padding-3xs | --moments-core-spacing-200 | 0.5rem = 8px | |
--moments-semantic-spacing-padding-2xs | --moments-core-spacing-250 | 0.625rem = 10px | |
--moments-semantic-spacing-padding-xs | --moments-core-spacing-300 | 0.75rem = 12px | |
--moments-semantic-spacing-padding-sm | --moments-core-spacing-350 | 0.875rem = 14px | |
--moments-semantic-spacing-padding-md | --moments-core-spacing-400 | 1rem = 16px | |
--moments-semantic-spacing-padding-lg | --moments-core-spacing-500 | 1.25rem = 20px | |
--moments-semantic-spacing-padding-xl | --moments-core-spacing-600 | 1.5rem = 24px | |
--moments-semantic-spacing-padding-2xl | --moments-core-spacing-700 | 1.75rem = 28px | |
--moments-semantic-spacing-padding-3xl | --moments-core-spacing-800 | 2rem = 32px | |
--moments-semantic-spacing-padding-4xl | --moments-core-spacing-900 | 2.25rem = 36px | |
--moments-semantic-spacing-padding-5xl | --moments-core-spacing-1000 | 2.5rem = 40px | |
--moments-semantic-spacing-padding-6xl | --moments-core-spacing-1200 | 3rem = 48px | |
--moments-semantic-spacing-padding-7xl | --moments-core-spacing-1400 | 3.5rem = 56px | |
--moments-semantic-spacing-padding-8xl | --moments-core-spacing-1600 | 4rem = 64px | |
--moments-semantic-spacing-padding-9xl | --moments-core-spacing-2000 | 5rem = 80px |
Gap
| Semantic token | Points to (core) | Resolved value | Preview |
|---|---|---|---|
--moments-semantic-spacing-gap-none | --moments-core-spacing-0 | 0rem = 0px | |
--moments-semantic-spacing-gap-4xs | --moments-core-spacing-50 | 0.125rem = 2px | |
--moments-semantic-spacing-gap-3xs | --moments-core-spacing-100 | 0.25rem = 4px | |
--moments-semantic-spacing-gap-2xs | --moments-core-spacing-150 | 0.375rem = 6px | |
--moments-semantic-spacing-gap-xs | --moments-core-spacing-200 | 0.5rem = 8px | |
--moments-semantic-spacing-gap-sm | --moments-core-spacing-300 | 0.75rem = 12px | |
--moments-semantic-spacing-gap-md | --moments-core-spacing-400 | 1rem = 16px | |
--moments-semantic-spacing-gap-lg | --moments-core-spacing-500 | 1.25rem = 20px | |
--moments-semantic-spacing-gap-xl | --moments-core-spacing-600 | 1.5rem = 24px | |
--moments-semantic-spacing-gap-2xl | --moments-core-spacing-900 | 2.25rem = 36px | |
--moments-semantic-spacing-gap-3xl | --moments-core-spacing-1000 | 2.5rem = 40px |