SDAIA
SDAIA LogoSDAIA Logo
FoundationsSpacing
IntroductionInstallationFAQBrands
ColorsTypographySpacingRadiusGrid layoutsAll Tokens
All Components
AccordionActivityArea ChartAudio PlayerAvatarAvatarGroupCarousel ImageChartChipCode SnippetColumn ChartContext MenuDigital StampDividerDonut ChartDraggable ListDropdownEmpty StateFiltrationFooterImage ViewerLine ChartListMedia GalleryMenuMetricNav BarNav HeaderNumberPDF ViewerPie ChartPopoverProgress CircleQuoteRadial StepperScatterSecond Nav HeaderSlideout MenuStructured ListTableTable of ContentTree ViewVertical TabsVideo Player
BreadcrumbButtonButton MenuButton SplitContent SwitcherDate PickerFloating ButtonHorizontal TabsLinkModalPaginationRadio ButtonSwitchTag
AutocompleteCheckboxFile UploadNumber InputRange SliderRich Text EditorSelectSignatureSliderText AreaText Input
AlertsBadgeCardFeedbackFeedback OverviewHelp IconLoading IndicatorNotification BannerNotification PopupNotificationsProgress BarRatingRating OverviewSkeletonSkeleton/AvatarsTooltip
Sdaia Logo Animation
Sdaia Touch ButtonsSdaia Touch Switch

Spacing Scale

The SDAIA spacing system is built on a base-4 scale to ensure consistent rhythm and alignment across all layouts. Use these tokens when defining padding, margin, and gap values.

Name

Size(16px base)

Pixels

space-0

0

0px

space-1

0.25rem

4px

space-2

0.5rem

8px

space-3

0.75rem

12px

space-4

1rem

16px

space-5

1.25rem

20px

space-6

1.5rem

24px

space-8

2rem

32px

space-10

2.5rem

40px

space-12

3rem

48px

space-16

4rem

64px

space-20

5rem

80px

space-24

6rem

96px

Usage Guidelines

Always prefer spacing tokens over arbitrary values to maintain consistency. Components use spacing tokens for internal padding and gap; layouts use them for section margins and page gutters.

Typography
Radius
On this page