SDAIA
SDAIA LogoSDAIA Logo
FoundationsColors
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

Colors

Platforms Code organizes colors into three palettes—neutral, primary, and semantic—each serving specific purposes. Delve into each category to grasp their distinct functions and learn effective implementation methods across diverse government products.

Neutral Colors

Gray 25

#FCFCFD

Gray 50

#F9FAFB

Gray 100

#F3F4F6

Gray 200

#E5E7EB

Gray 300

#D2D6DB

Gray 400

#9DA4AE

Gray 500

#6C737F

Gray 600

#4D5761

Gray 700

#384250

Gray 800

#1F2A37

Gray 900

#111927

Gray 950

#0D121C

Primary Colors

SA 25

#F7FDF9

SA 50

#F3FCF6

SA 100

#DFF6E7

SA 200

#B8EACB

SA 300

#88D8AD

SA 400

#54C08A

SA 500

#25935F

SA 600

#1B8354

SA 700

#166A45

SA 800

#14573A

SA 900

#104631

SA 950

#092A1E

Secondary Colors

Gold color palette

Gold

Gold 25

#FFFEF7

Gold 50

#FFFEF2

Gold 100

#FFFCE6

Gold 200

#FCF3BD

Gold 300

#FAE996

Gold 400

#F7D54D

Gold 500

#F5BD02

Gold 600

#DBA102

Gold 700

#B87B02

Gold 800

#945C01

Gold 900

#6E3C00

Gold 950

#472400

Lavender color palette

Lavender

Lavender 25

#FEFCFF

Lavender 50

#F9F5FA

Lavender 100

#F2E9F5

Lavender 200

#E1CCE8

Lavender 300

#CCADD9

Lavender 400

#A57BBA

Lavender 500

#80519F

Lavender 600

#6D428F

Lavender 700

#532D75

Lavender 800

#3D1D5E

Lavender 900

#281047

Lavender 950

#16072E

Error color palette

Error

Error 25

#FFFBFA

Error 50

#FEF3F2

Error 100

#FEE4E2

Error 200

#FECDCA

Error 300

#FDA29B

Error 400

#F97066

Error 500

#F04438

Error 600

#D92D20

Error 700

#B42318

Error 800

#912018

Error 900

#7A271A

Error 950

#55160C

Warning color palette

Warning

Warning 25

#FFFCF5

Warning 50

#FFFAEB

Warning 100

#FEF0C7

Warning 200

#FEDF89

Warning 300

#FEC84B

Warning 400

#FDB022

Warning 500

#F79009

Warning 600

#DC6803

Warning 700

#B54708

Warning 800

#93370D

Warning 900

#7A2E0E

Warning 950

#4E1D09

Info color palette

Info

Info 25

#F5FAFF

Info 50

#ECF0F3

Info 100

#D1E9FF

Info 200

#B2DDFF

Info 300

#84CAFF

Info 400

#53B1FD

Info 500

#2E90FA

Info 600

#1570EF

Info 700

#175CD3

Info 800

#1849A9

Info 900

#194185

Info 950

#102A56

Success color palette

Success

Success 25

#F6FEF9

Success 50

#ECFDF3

Success 100

#DCFAE6

Success 200

#ABEFC6

Success 300

#75E0A7

Success 400

#47CD89

Success 500

#17B26A

Success 600

#079455

Success 700

#067647

Success 800

#085D3A

Success 900

#074D31

Success 950

#053321

Brands
Typography
On this page