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

Resources

Resources provide supporting materials, references, and downloadable assets to help teams design and build with SGDS effectively.

DesignUsageAccessibilityUpdates

Purpose

Support delivery

Use resources to give teams quick access to reference materials, assets, and implementation support around SGDS.

Reduce setup time

Centralised resources help teams find the right starting points, downloads, and references faster.

Keep teams aligned

Shared resources reduce duplicated work and help contributors use the same SGDS references across products.

Anatomy

References Assets Examples

One place to find what you need

Bring together the files, references, and examples that help teams move from guidance to implementation.

1

Reference material (guides and docs)

2

Assets (downloads and files)

3

Examples (implementation support)

4

Links (entry points to tools)

Configuration

Resource structure

A resource page should help teams find supporting materials, asset links, and references quickly.

References Assets Examples

One place to find what you need

Bring together the files, references, and examples that help teams move from guidance to implementation.

Playground

BETA
References Assets Examples

One place to find what you need

Bring together the files, references, and examples that help teams move from guidance to implementation.

Structure

Component tokens

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

sgds/resource-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 resources when teams need direct access to assets, links, and supporting references beyond the main documentation pages.
  • Group related materials so users can move from overview to download or implementation quickly.

When not to use

  • Do not duplicate full guidance content if a dedicated foundation, component, or pattern page already covers it.
  • Avoid turning resource pages into long narrative documentation when users really need direct access to materials.

Best practices

Resources for design, build, and handoff

Group downloads and references under clear categories so each team can go straight to what they need.

Group resources by task

Organise supporting materials so teams can find the right file, guide, or example with minimal effort.

Long wall of text

Download links and examples are hidden deep inside explanatory content.

Do not bury key assets

Avoid forcing users to read through long pages before they can find a file or link they need immediately.

Accessibility considerations

Keyboard support

Resource pages should keep links, downloads, and related references keyboard reachable and predictable.

Navigation between supporting materials should stay consistent with the SGDS patterns used across the site.

Tab order

  • Move focus through links and resource actions in a clear reading order.
  • Ensure downloads and supporting references remain discoverable by keyboard.
  • Keep grouped resource actions predictable and easy to scan.
  • Continue to the next interactive element on the page.

Keyboard interaction

KeyInteractionTabMoves focus to the next link, download, or interactive resource element.Shift+TabMoves focus to the previous interactive element.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture additions for resourcesPlannedTBD

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/resources

Singapore Government Design System

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