Get startedFoundationsComponentsTemplatesBlocksAIStories
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

Border radius utilities for applying SGDS corner treatments to surfaces and native form controls.

Border radius utilities

SGDS has two radius scales: general radius utilities for components and surfaces, and form radius utilities for native HTML form elements. Use general tokens by default, and switch to sgds:rounded-form-* only for native form controls.

General radius
SGDS tailwind tokenValueUsagePreview
sgds:rounded-none
0pxSharp corners for tables, strict layouts, and mechanical surfaces.
Square
sgds:rounded-xs
2pxSubtle rounding for small tags and restrained surface treatments.
Subtle
sgds:rounded-sm
4pxDefault small-component radius.
Default
sgds:rounded-md
8pxBalanced radius for panels and medium surfaces.
Panel
sgds:rounded-lg
12pxCommon for cards, menus, and larger surfaced components.
Card
sgds:rounded-xl
16pxFeatured surfaces and softer emphasis blocks.
Feature
sgds:rounded-2-xl
24pxLarge containers and more expressive panels.
Large
sgds:rounded-3-xl
32pxHero and promotional surfaces with the softest corners.
Hero
sgds:rounded-full
999pxPills, badges, avatars, and circular icon treatments.
Pill
Form radius

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

SGDS tailwind tokenValueUsagePreview
sgds:rounded-form-none
0pxSquare native form controls.
Form none
sgds:rounded-form-xs
2pxVery compact native inputs.
Form xs
sgds:rounded-form-sm
4pxCompact native inputs and dense control layouts.
Form sm
sgds:rounded-form-md
8pxDefault choice for native input, select, and textarea elements.
Form md
sgds:rounded-form-full
999pxPill-shaped search and filter inputs.
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