Clarity
Use borders to show structure and support readability.
Borders define structure and separation across SGDS components. Tokens cover width and corner radius.
Use borders to show structure and support readability.
Keep borders minimal so content stays the focus.
Use border width to separate content and clarify where areas begin and end.
The default border width is used to illustrate the boundary of components and divide content.
Medium borders are used to emphasise elements that primarily use borders for hover interaction, like input field.
Strong borders are used to emphasise elements that primarily use borders for their structure, like tabs.
Used for sharp, structured designs with little to no rounding. Suitable for strict, grid-based layouts where clarity and precision are key.
Provides slight rounding for a modern but understated look. Enhances usability while keeping a clean and structured appearance.
The default radius for most components, balancing smoothness and sharpness. Works well across both functional and decorative elements.
Larger radius sizes that create a more distinct and friendly visual style. Used to emphasise key components and create a softer, more inviting look.
Used for completely rounded shapes, ensuring a pill-like or circular appearance. Best for elements that need to stand out or convey a tactile feel.
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.