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

Text colour

Semantic text colour utilities for body, heading, label, and interactive text across day and night themes.

Text colour

Text colour utilities apply semantic colour tokens to text. All tokens are theme-aware and automatically switch between day and night mode values — unless a fixed variant is used.

General purpose

Typography roles

Semantic

SGDS tailwind token

Day

Night

Usage

sgds:text-default

#1a1a1a

#ffffff

Primary body text — main readable content

sgds:text-subtle

#525252

#c6c6c6

Secondary text — captions, helper text

sgds:text-muted

#c6c6c6

#3b3b3b

Low-contrast text — metadata, decorative labels

sgds:text-inverse

#f3f3f3

#2a2a2a

Text on inverted surfaces

sgds:text-fixed-light

#f3f3f3

Always light — use on fixed dark backgrounds

sgds:text-fixed-dark

#1a1a1a

Always dark — use on fixed light backgrounds

Singapore Government Design System

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