Hierarchical
Use colour to show interaction, relationships, and prominence.
SGDS colours are designed to be clear, accessible and communicate how things function in the interface. This helps to create visual patterns that can make interacting easier and more predictable.
Use colour to show interaction, relationships, and prominence.
Use colour combinations that meet legibility standards.
Use colour consistently so the interface feels unified.
Choose colour combinations with enough contrast for text, icons, and controls. This supports users with low vision, colour blindness, and other visual impairments.
Skip at least one step in the colour scale when pairing foreground and background colours. This creates clearer separation between surfaces, text, and interactive elements.
Use the same colour for the same role across the interface. This helps users recognise repeated patterns and understand what each colour means.
SGDS’s greys follow a perceptually curved progression of lightness. The outcome is a progression of grey colour values that are optimal for SGDS’s usage of grey. Each lightness value was converted into a target contrast ratio, which follows a polynomial curve.
Greys include contrast ratios above and below a 1:1 contrast with the background.
As colours increase in saturation, they appear to have a brighter luminosity (also known as the Helmholtz–Kohlrausch effect). This affects SGDS colours that differ in saturation levels.
This law is an observation in the rate of change in a given stimulus, and it affects lightness scales for colour. Numerically even distributions of tints and shades in a perceptually uniform colour space will not appear to be equally distributed.
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.