Get startedFoundationsComponentsTemplatesBlocksAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.
Browse Foundations

Foundations

Design tokensOverviewToken architectureToken namingBorderOverviewRadiusWidthColourOverviewBrand colourPrimitive colourSemantic colourElevationOverviewEdge elevationSurface elevationIconographyOverviewIcon sizeIcon libraryLayerOverviewZ-indexLayoutOverviewResponsive gridBreakpointMotionOverviewSpacingOverviewSpacer scaleGapPaddingMarginTypographyOverviewText stylesDisplayHeadingsSubtitlesParagraph bodyCaptionsLabelsLinksListsOverlineType systemFont familyFont sizeFont weightLetter spacingLine heightParagraph spacingText decorationText transform

Brand colour

The default GovTech brand palettes that ship with SGDS, and the custom brand generator for agencies that want to set up their own.

Storybook
GovTech colour Custom colour BETA

GovTech colour

The five official brand colours, with values for both digital and print reproduction. Use CMYK when sending artwork to print suppliers.

Singapore Red

HEXRGBCMYK
#F4333D244 / 51 / 610 / 79 / 75 / 4

GovTech magenta

HEXRGBCMYK
#BA2FA2186 / 47 / 1620 / 75 / 13 / 27

GovTech cyan

HEXRGBCMYK
#00C0F30 / 192 / 243100 / 21 / 0 / 5

White

HEXRGBCMYK
#FFFFFF255 / 255 / 2550 / 0 / 0 / 0

Black

HEXRGBCMYK
#0E0E0E14 / 14 / 140 / 0 / 0 / 95

Extended colours

Our colour system starts with three primary GovTech colours, which form the foundation of our visual identity. These core colours extend into ten colour families, providing flexibility for applications such as data visualisation, illustration, and other expressive uses while maintaining harmony with our brand foundation.

Colour palette

Our colour palette consists of 11 colour families, including Neutral, each with 10 shades. In total, the palette includes 112 colours, comprising all shades plus white and black.

GovTech primary tokens

The tables below map the GovTech brand onto SGDS primary tokens. These ship with the system by default, ready for any product to use as-is. If your product has its own brand colour, switch to the Custom colour tab to generate the same primary structure from your hex value instead.

GovTech blue colour

TokenHexRGBA Contrast Previewsgds-product-primary-100#EFF5FCrgba(239, 245, 252, 1)
sgds-product-primary-200#CEE1F6rgba(206, 225, 246, 1)
sgds-product-primary-300#A0C5EErgba(160, 197, 238, 1)
sgds-product-primary-400#73A9E5rgba(115, 169, 229, 1)
sgds-product-primary-500#4288D6rgba(66, 136, 214, 1)
sgds-product-primary-600#356DACrgba(53, 109, 172, 1)
sgds-product-primary-700#285483rgba(40, 84, 131, 1)
sgds-product-primary-800#1E3E62rgba(30, 62, 98, 1)
sgds-product-primary-900#152B44rgba(21, 43, 68, 1)

GovTech cyan colour

TokenHexRGBA Contrast Previewsgds-product-primary-100#E0F7FErgba(224, 247, 254, 1)
sgds-product-primary-200#A7E9FBrgba(167, 233, 251, 1)
sgds-product-primary-300#47D1F6rgba(71, 209, 246, 1)
sgds-product-primary-400#00B3E2rgba(0, 179, 226, 1)
sgds-product-primary-500#0091B8rgba(0, 145, 184, 1)
sgds-product-primary-600#007493rgba(0, 116, 147, 1)
sgds-product-primary-700#005971rgba(0, 89, 113, 1)
sgds-product-primary-800#004355rgba(0, 67, 85, 1)
sgds-product-primary-900#002E3Brgba(0, 46, 59, 1)

GovTech magenta colour

TokenHexRGBA Contrast Previewsgds-product-primary-100#FBF2F9rgba(251, 242, 249, 1)
sgds-product-primary-200#F2D8EDrgba(242, 216, 237, 1)
sgds-product-primary-300#E5B2DCrgba(229, 178, 220, 1)
sgds-product-primary-400#D98BCBrgba(217, 139, 203, 1)
sgds-product-primary-500#C95EB7rgba(201, 94, 183, 1)
sgds-product-primary-600#B82EA0rgba(184, 46, 160, 1)
sgds-product-primary-700#8E247Brgba(142, 36, 123, 1)
sgds-product-primary-800#6A1B5Drgba(106, 27, 93, 1)
sgds-product-primary-900#4A1341rgba(74, 19, 65, 1)

GovTech pink colour

TokenHexRGBA Contrast Previewsgds-product-primary-100#FDF0F6rgba(253, 240, 246, 1)
sgds-product-primary-200#F9D6E4rgba(249, 214, 228, 1)
sgds-product-primary-300#F3AECBrgba(243, 174, 203, 1)
sgds-product-primary-400#ED84AFrgba(237, 132, 175, 1)
sgds-product-primary-500#E54D8Crgba(229, 77, 140, 1)
sgds-product-primary-600#C7286Argba(199, 40, 106, 1)
sgds-product-primary-700#991F52rgba(153, 31, 82, 1)
sgds-product-primary-800#74173Drgba(116, 23, 61, 1)
sgds-product-primary-900#51102Brgba(81, 16, 43, 1)

GovTech purple colour

TokenHexRGBA Contrast Previewsgds-product-primary-100#F6F3FBrgba(246, 243, 251, 1)
sgds-product-primary-200#E5DBF2rgba(229, 219, 242, 1)
sgds-product-primary-300#CEBAE7rgba(206, 186, 231, 1)
sgds-product-primary-400#B598DCrgba(181, 152, 220, 1)
sgds-product-primary-500#9A74CFrgba(154, 116, 207, 1)
sgds-product-primary-600#8055BBrgba(128, 85, 187, 1)
sgds-product-primary-700#634190rgba(99, 65, 144, 1)
sgds-product-primary-800#49306Brgba(73, 48, 107, 1)
sgds-product-primary-900#33214Argba(51, 33, 74, 1)

GovTech red colour

TokenHexRGBA Contrast Previewsgds-product-primary-100#FEF0F1rgba(254, 240, 241, 1)
sgds-product-primary-200#FDD6D8rgba(253, 214, 216, 1)
sgds-product-primary-300#FBADB1rgba(251, 173, 177, 1)
sgds-product-primary-400#F88289rgba(248, 130, 137, 1)
sgds-product-primary-500#F5424Brgba(245, 66, 75, 1)
sgds-product-primary-600#CB2B33rgba(203, 43, 51, 1)
sgds-product-primary-700#9E2127rgba(158, 33, 39, 1)
sgds-product-primary-800#76191Ergba(118, 25, 30, 1)
sgds-product-primary-900#531115rgba(83, 17, 21, 1)

Colour contrast ratios

Colour contrast ratios measure whether text is readable against a background.

WCAG (Web Content Accessibility Guidelines) is the international accessibility standard most government services follow. It scores contrast as a single ratio between 1 (no contrast) and 21 (black on white). Body text needs at least 4.5 to meet the AA conformance level. Large text needs at least 3, since bigger letters are easier to read.

APCA (Accessible Perceptual Contrast Algorithm) is a newer model that's more accurate for real reading. As a rough guide, body text needs an absolute value around 60 or higher.

Got it

Custom colour

BETA

Generate a custom primary palette from your agency's brand colour. Enter a hex value or use the colour picker, and the generator will produce the full sgds-product-primary-100 through sgds-product-primary-900 ramp aligned to the SGDS scale.

TokenHexRGBA Contrast Previewsgds-product-primary-100#F4F2FErgba(244, 242, 254, 1)
sgds-product-primary-200#E1DBFBrgba(225, 219, 251, 1)
sgds-product-primary-300#C5BAF7rgba(197, 186, 247, 1)
sgds-product-primary-400#A999F3rgba(169, 153, 243, 1)
sgds-product-primary-500#8973EFrgba(137, 115, 239, 1)
sgds-product-primary-600#6B4FEBrgba(107, 79, 235, 1)
sgds-product-primary-700#523DB4rgba(82, 61, 180, 1)
sgds-product-primary-800#3E2D87rgba(62, 45, 135, 1)
sgds-product-primary-900#2B1F5Ergba(43, 31, 94, 1)

Colour contrast ratios

Colour contrast ratios measure whether text is readable against a background.

WCAG (Web Content Accessibility Guidelines) is the international accessibility standard most government services follow. It scores contrast as a single ratio between 1 (no contrast) and 21 (black on white). Body text needs at least 4.5 to meet the AA conformance level. Large text needs at least 3, since bigger letters are easier to read.

APCA (Accessible Perceptual Contrast Algorithm) is a newer model that's more accurate for real reading. As a rough guide, body text needs an absolute value around 60 or higher.

Got it

Singapore Government Design System

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

Past VersionsSGDS v1SGDS v2