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

Border colour

Border colour utilities for applying semantic, theme-aware border treatments in SGDS.

Border semantics

Border colour utilities are theme-aware and follow the pattern sgds:border-{semantic}-{modifier}. The word color never appears in the class name. Always pair border colour with a width utility for the border to be visible.

Grayscale

Primary

Accent

Success

Danger

Warning

SGDS tailwind token

Usage

Preview

sgds:border-default

First choice for standard structural borders.

sgds:border-emphasis

Higher-visibility border when the edge needs stronger presence.

sgds:border-muted

Low-emphasis separators and softer component outlines.

sgds:border-translucent

Semi-transparent borders on layered or decorative surfaces.

sgds:border-transparent

Invisible border that preserves box model spacing.

sgds:border-fixed-light

Always-light border for fixed dark surfaces.

sgds:border-fixed-dark

Always-dark border for fixed light surfaces.

Singapore Government Design System

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