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

Semantic colour

Semantic colour tokens for roles like background, surface, text, and border across light and dark modes.

Background colour

Background tokens set the base canvas colour for pages, panels, and overlays. They adapt between light and dark themes.

DefaultPrimarySuccessWarningDangerAccentNeutralPurpleCyanCSS variableFigma tokenCSS variableDescriptionLightDark
--sgds-bg-default
Primary background colour for pages and major sections. Used as the standard backdrop across interfaces.
gray-000
gray-1100
--sgds-bg-alternate
Alternate background for visual separation between sections, e.g. zebra striping or secondary panels.
gray-50
gray-1000
--sgds-bg-fixed-light
Fixed light background that does not change in dark mode. Useful for areas that must always remain light.
gray-000
gray-000
--sgds-bg-fixed-dark
Fixed dark background that stays dark regardless of theme. Ideal for overlays or consistent dark regions.
gray-1100
gray-1100
--sgds-bg-overlay
Semi-opaque background used behind modals, drawers, and overlays to obscure background content.
gray-1100 · 50%
gray-1100 · 50%
--sgds-bg-translucent
10% translucent overlay. Adapts between dark-on-light and light-on-dark depending on the active theme.
gray-1100 · 10%
gray-000 · 10%
--sgds-bg-translucent-subtle
Subtle ~5% translucent background. Used for lighter layering needs such as hover states.
gray-1100 · 5%
gray-000 · 10%
--sgds-bg-transparent
Fully transparent background. Used when no background colour is required, or to inherit from the parent.
transparent
transparent

Foreground colour

Foreground colour tokens for icons and UI elements across semantic categories. Each token resolves to a different primitive value in light and dark modes.

DefaultPrimarySuccessWarningDangerAccentNeutralPurpleCyanCSS variableFigma tokenCSS variableDescriptionLightDark
--sgds-color-default
Primary foreground colour for general body text and icons.
gray-1000
gray-100
--sgds-color-subtle
Slightly muted foreground for secondary or supporting text.
gray-700
gray-400
--sgds-color-muted
Muted foreground for disabled, placeholder, or low-emphasis content.
gray-300
gray-800
--sgds-color-inverse
Inverse foreground colour for use on contrasting backgrounds.
gray-100
gray-1000
--sgds-color-fixed-light
Fixed light foreground that does not change across themes.
gray-100
gray-100
--sgds-color-fixed-dark
Fixed dark foreground that does not change across themes.
gray-1000
gray-1000
--sgds-color-transparent
Transparent foreground colour.
transparent
transparent

Surface colour

Surface tokens define fill colours for elevated containers such as cards, drawers, and dropdowns. They adapt between light and dark themes.

DefaultPrimarySuccessWarningDangerAccentNeutralPurpleCyanCSS variableFigma tokenCSS variableDescriptionLightDark
--sgds-surface-default
Default surface colour for containers such as cards, modals, and drawers. Adapts to light or dark themes.
gray-000
gray-900
--sgds-surface-raised
Slightly elevated surface indicating layering above the default surface.
gray-100
gray-800
--sgds-surface-inverse
Inverse of the default surface. Used for high-contrast regions that flip between themes.
gray-900
gray-000
--sgds-surface-fixed-light
Surface that always appears light, regardless of theme. For consistent brand regions.
gray-000
gray-000
--sgds-surface-fixed-dark
Surface that always appears dark, regardless of theme.
gray-900
gray-900

Border colour

Border colour tokens define outline and divider colours for components across semantic categories. They adapt between light and dark themes.

DefaultPrimarySuccessWarningDangerAccentNeutralPurpleCyanCSS variableFigma tokenCSS variableDescriptionLightDark
--sgds-border-color-default
Default border colour for interactive components and dividers.
gray-500
gray-500
--sgds-border-color-emphasis
Stronger border colour for emphasis, focus, or active states.
gray-800
gray-200
--sgds-border-color-muted
Subtle border colour for lightweight separators and containers.
gray-200
gray-800
--sgds-border-color-fixed-light
Fixed light border colour that stays light in both themes.
gray-000
gray-000
--sgds-border-color-fixed-dark
Fixed dark border colour that stays dark in both themes.
gray-1000
gray-1000
--sgds-border-color-translucent
Translucent border for subtle outlines that adapt to the active theme.
gray-1100 · 5%
gray-000 · 10%
--sgds-border-color-transparent
Transparent border that removes the border visually.
transparent
transparent

Text colour

Typography colour tokens define the foreground colours for display, heading, body, label, and link text. They adapt between light and dark themes.

DisplayHeadingBodyLabelLinkFormCSS variableFigma tokenCSS variableDescriptionLightDark
--sgds-display-color-default
Default colour for large display headings.
gray-1000
gray-000
--sgds-display-color-subtle
Slightly muted display colour for secondary display text.
gray-800
gray-200

Form colour

Form colour tokens cover surfaces, text, and validation states within input fields, checkboxes, radios, and other form controls.

SurfaceTextPrimarySuccessDangerCSS variableFigma tokenCSS variableDescriptionLightDark
--sgds-form-surface-default
Default background surface for form inputs and fields.
gray-000
gray-900
--sgds-form-surface-raised
Slightly elevated form surface for nested or grouped inputs.
gray-100
gray-800
--sgds-form-surface-emphasis
Emphasised form surface for active or focused states.
gray-700
gray-200
--sgds-form-surface-subtle
Subtle form surface for placeholder or decorative areas.
gray-400
gray-500
--sgds-form-surface-muted
Muted surface for disabled or inactive form fields.
gray-200
gray-700
--sgds-form-surface-inverse
Inverse surface for dark-on-light form elements.
gray-900
gray-000
--sgds-form-surface-fixed-light
Fixed light surface for form fields that always remain light.
gray-000
gray-000
--sgds-form-surface-fixed-dark
Fixed dark surface for form fields that always remain dark.
gray-900
gray-900

Singapore Government Design System

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