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

Border radius

Radius tokens define the corner rounding applied to components, surfaces, and form controls.

Storybook

Border radius tokens

General radius

Radius tokens define the corner rounding applied to components, surfaces, and form controls.

CSS variableValue (px/rem)Preview
sgds-border-radius-none
0
Square
sgds-border-radius-xs
2/0.125
Subtle
sgds-border-radius-sm
4/0.25
Default
sgds-border-radius-mdDefault
8/0.5
Panel
sgds-border-radius-lg
12/0.75
Card
sgds-border-radius-xl
16/1
Feature
sgds-border-radius-2-xl
24/1.5
Large
sgds-border-radius-3-xl
32/2
Hero
sgds-border-radius-full
999
Pill

Form radius

Use form radius tokens only on native HTML form controls. When SGDS web components are available, prefer the component over styling custom form controls yourself.

CSS variableValue (px/rem)Preview
sgds-form-border-radius-none
0
Form none
sgds-form-border-radius-xs
2/0.125
Form xs
sgds-form-border-radius-sm
4/0.25
Form sm
sgds-form-border-radius-mdDefault
8/0.5
Form md
sgds-form-border-radius-full
999
Form full

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