Primitive colour

Primitive colour tokens used as the base palette for semantic roles across SGDS.

Primitive colour tokens

These are the base primitive colour tokens in the SGDS design system. Semantic tokens for feedback, status, and neutral surfaces are mapped from this palette.

GreyRedYellowGreenCyanBluePurpleCSS variableFigma tokenCSS variableHexRGBAContrastExample
--sgds-gray-000
#FFFFFFrgba(255, 255, 255, 1)
--sgds-gray-50
#F7F7F7rgba(247, 247, 247, 1)
--sgds-gray-100
#F3F3F3rgba(243, 243, 243, 1)
--sgds-gray-200
#DFDFDFrgba(223, 223, 223, 1)
--sgds-gray-300
#C6C6C6rgba(198, 198, 198, 1)
--sgds-gray-400
#A5A5A5rgba(165, 165, 165, 1)
--sgds-gray-500
#868686rgba(134, 134, 134, 1)
--sgds-gray-600
#6B6B6Brgba(107, 107, 107, 1)
--sgds-gray-700
#525252rgba(82, 82, 82, 1)
--sgds-gray-800
#3B3B3Brgba(59, 59, 59, 1)
--sgds-gray-900
#2A2A2Argba(42, 42, 42, 1)
--sgds-gray-1000
#1A1A1Argba(26, 26, 26, 1)
--sgds-gray-1100
#0E0E0Ergba(14, 14, 14, 1)

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.