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

Overview

Guidelines explain how to apply SGDS foundations, components, and patterns consistently across real product experiences.

DesignUsageAccessibilityUpdates

Purpose

Guide decisions

Use guidelines to decide how and when SGDS foundations, components, and patterns should be applied in real product flows.

Keep products aligned

They help teams make consistent design and implementation choices across different services and contributors.

Reduce rework

Shared guidance makes it easier to avoid inconsistent patterns and fix issues earlier in the process.

Anatomy

Foundations Components Patterns

Decision guidance

Use SGDS building blocks consistently so layouts, interactions, and behaviours stay predictable across services.

1

Foundations (visual rules)

2

Components (building blocks)

3

Patterns (composed solutions)

4

Decision guidance (how to apply them)

Configuration

Guideline structure

A guideline brings together foundations, components, and patterns so teams can make consistent product decisions.

Foundations Components Patterns

Decision guidance

Use SGDS building blocks consistently so layouts, interactions, and behaviours stay predictable across services.

Playground

BETA
Foundations Components Patterns

Decision guidance

Use SGDS building blocks consistently so layouts, interactions, and behaviours stay predictable across services.

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: padding-lg under sgds/guideline-overview means sgds/guideline-overview/padding-lg.

sgds/guideline-overview
CategoryComponent tokenSemantic tokenValuePaddingpadding-lgsgds/padding/lg20pxGapgap-smsgds/gap/sm12pxBorderborder-color-mutedsgds/border-color-muted#DFDFDFborder-radius-mdsgds/border-radius/md8pxborder-width-1sgds/border-width/11pxColourcolor-defaultsgds/color-default#1A1A1Asurface-defaultsgds/surface-default#FFFFFF

Usage

When to use

  • Use guidelines when teams need shared decision-making rules, not just UI building blocks.
  • Apply them when translating SGDS foundations, components, and patterns into product-specific decisions.

When not to use

  • Do not use guidelines as a replacement for the component and pattern references themselves.
  • Avoid turning guidelines into rigid rules when the context clearly calls for a different SGDS-supported solution.

Best practices

Choose the pattern that matches the user task

Use a multi-step form only when the flow is complex enough to benefit from progressive disclosure.

Use guidelines to support decisions

Use guidance to explain why a pattern should be chosen and how it should be applied in context.

Accordion

Props: density, variant, start slot, end slot...

Do not repeat the reference pages

Avoid copying component API details into guidelines when the real need is decision support and context.

Accessibility considerations

Keyboard support

Guidelines should support SGDS components and patterns without interrupting their built-in keyboard behaviour.

Keep interaction guidance aligned with the actual SGDS references used in the product.

Tab order

  • Move focus through the related SGDS components in reading order.
  • Ensure interactive elements stay discoverable and predictable.
  • Keep supporting content reachable when sections expand or reveal more information.
  • Continue to the next interactive element on the page.

Keyboard interaction

KeyInteractionTabMoves focus to the next interactive element described by the guideline’s recommended pattern.Shift+TabMoves focus to the previous interactive element.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture additions for guidelinesPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/guidelines

Singapore Government Design System

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