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

Background colour

Background colour utilities for semantic, theme-aware fills in SGDS.

Background colour

Background colour utilities follow the pattern sgds:bg-{semantic}-{modifier}. All tokens are theme-aware and automatically switch between day and night mode values unless a fixed variant is used.

Grayscale

Surface

Primary

Accent

Success

Danger

Warning

Neutral

Purple

Cyan

SGDS tailwind token

Usage

Preview

sgds:bg-default

Default page canvas. The base background for all standard layouts.

sgds:bg-alternate

Alternate background for zebra rows, secondary panels, and banded sections.

sgds:bg-overlay

Scrim background for modal and drawer backdrops.

sgds:bg-fixed-light

Always-light background. Stays light even in dark mode.

sgds:bg-fixed-dark

Always-dark background. Stays dark even in light mode.

sgds:bg-translucent

Semi-transparent background for floating surfaces and popovers.

sgds:bg-translucent-subtle

Lighter semi-transparent variant for gentle layering effects.

sgds:bg-transparent

Explicit transparent fill. Use to reset inherited backgrounds.

Singapore Government Design System

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