Default - 1 px
The default border width is used to illustrate the boundary of components and divide content.
Label
Placeholder text
In SGDS, almost all components are rounded. Only specific components are exceptions to this rule.
Borders should provide clear structure, aiding readability and navigation.
Borders should be minimal and unobtrusive, letting content take priority.
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.
SGDS radius is used widely throughout our system. Each radius size is intentionally applied to select elements.
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.