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

Overline

Use overline styles for short category labels, metadata, and pre-heading text.

Storybook

When to use overline

Overline styles are used for short categorical labels and compact pre-heading text. They help introduce a section or content type without taking on the weight of a full heading.

StyleWhen to useAlias token

OVERLINE SEMIBOLD

Short category labels above headings when the label needs emphasis.

sgds-font-size-overline-mdsgds-font-weight-semiboldsgds-line-height-2-xssgds-letter-spacing-wide

OVERLINE REGULAR

Default

Default overline style for compact category and section labels.

sgds-font-size-overline-mdsgds-font-weight-regularsgds-line-height-2-xssgds-letter-spacing-wide

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