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

Foundations

Design tokensOverviewToken architectureToken namingBorderOverviewRadiusWidthColourOverviewBrand colourPrimitive colourSemantic colourElevationOverviewEdge elevationSurface elevationIconographyOverviewIcon sizeIcon libraryLayerOverviewZ-indexLayoutOverviewResponsive gridBreakpointMotionOverviewSpacingOverviewSpacer scaleGapPaddingMarginTypographyOverviewText stylesDisplayHeadingsSubtitlesParagraph bodyCaptionsLabelsLinksListsOverlineType systemFont familyFont sizeFont weightLetter spacingLine heightParagraph spacingText decorationText transform

Z-index

Design tokens for z-index stacking order across the SGDS design system.

Storybook

Z-index tokens

Use these tokens to apply consistent stacking order across the design system. Values increase from base content to top-level modals.

TokenValue (z-index)Usagesgds-z-index-base0Default page content and base surfaces.sgds-z-index-raised100Raised surfaces such as cards, panels, and elevated content regions.sgds-z-index-sticky200Sticky elements such as headers, navigation bars, and fixed sidebars that remain in view while scrolling.sgds-z-index-floating400Floating UI such as dropdown menus, popovers, and anchored menus.sgds-z-index-overlay800Transient overlays such as toasts, tooltips, and overlay chrome.sgds-z-index-modal1600Top-level modal dialogs and scrims that must appear above all other layers.

Singapore Government Design System

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

Past VersionsSGDS v1SGDS v2