Singpass Button Design Specification
This guide covers how to display the Singpass button correctly. It includes the approved button labels, visual style and accessibility considerations.
Following these guidelines helps prevents common implementation issues, and ensure a clear user experience with what users already know and trust.
Download Singpass assets (approved Singpass button labels and logo):
Approved button labels
The button label communicates what will happen when users click the button.
These are the only approved labels for the Singpass button. Choose the one that best reflects the user's action in your flow, and do not create your own variations.
Download Singpass button:
Log In
Users are logging in to your service Example: Logging into a portal to access a service
Registration and Sign up
Users are signing up or registering for your service
Example: Creating a new banking, telco, or service account
Application
Users are applying for a product or service
Examples: Applying for a credit card, loan, or grants
Identity verification
The primary purpose is to confirm the user’s identity
Examples:
Verifying identity before accessing sensitive features
Performing KYC checks before allowing further actions
Retrieval or update of information
Users are asked to fill in their details
Examples:
Pre-filling details in a form
Refreshing previously saved information
Document signing
Users are signing a document using Singpass Example: Users signing insurance policy
Others
Singpass is used as a step within a larger flow. The action is to proceed, not to apply or verify
Examples:
Booking an appointment
Moving to the next step before details are shown
Button colour and state
Do use colour to indicate emphasis and ensure the Singpass button is clearly visible in your interface.
Do use one of the following variants that provides sufficient contrast with the background and reflects the importance of the action.
White with outline (Default)
White (for dark mode)
Black
Red
Don't use colours outside the approved variants, including gradients or modified brand colours.
White with outline (Default)
Use when a lower visual emphasis is needed or when pairing with other primary actions.
Default
White: #FFFFFF
Grey: #AAABAD
Black: #141414
Hover
Light grey: #F5F5F7
Grey: #AAABAD
Black: #141414
Disabled
Grey: #FFFFFF
Grey: #AAABAD
Grey: #AAABAD
White (for dark mode)
Use this variant when your interface has a dark background. The white button is the only approved variant for dark surfaces, do not use the other variants on dark backgrounds as they are designed for light interfaces.
Default
White: #FFFFFF
Black: #141414
Hover
Light grey: #F5F5F7
Black: #141414
Disabled
Grey: #E8E9EB
Light grey: #AAABAD
Black
Use for primary actions on light backgrounds.
Default
Black: #141414
White: #FFFFFF
Use white Singpass logo
Hover
Dark grey: #3B3C3D
White: #FFFFFF
Use white Singpass logo
Disabled
Grey: #E8E9EB
Light grey: #AAABAD
Use white Singpass logo
Red
Use to reinforce Singpass branding.
Default
Red: #D93841
White: #FFFFFF
Use white Singpass logo
Hover
Dark red: #B0262D
White: #FFFFFF
Use white Singpass logo
Disabled
Grey: #E8E9EB
White: #FFFFFF
Use white Singpass logo
Button Font and Logo
Button font
By default, use Poppins Bold at 16px. If you prefer to use your brand typeface, choose a sans-serif font to better match the Singpass logo.
Download Poppins Bold on Google fonts.
Singpass logo
For “Singpass”, use the official Singpass logo within the button. This helps users quickly recognise and trust the action. Avoid replacing it with plain text or recreating it in another typeface.
Download Singpass logo:
Singpass logo size
The Singpass logo must have a minimum height of 14px. Do not scale it smaller than this as it will become illegible on smaller screens.
Match the x-height of the label as close as possible to ensure visual balance and proportion.
Button size
Keep the internal padding consistent so the logo and label always have breathing room. The button should never feel cramped. Minimum height:
Desktop: 40px
Mobile: 44px — applies to native apps and mobile browsers
Minimum internal padding:
Horizontal: 16px on each side
Space between label and Singpass logo: 4px
Placing the Singpass Button with Other Buttons
Make sure it feels like it belongs — same height, same width, consistent spacing. Here's what works and what to avoid.
Color
Use a colour variant that does not clash or blend with nearby buttons.
Spacing
Give the Singpass button room to breathe. Maintain a minimum of 16px between the button and any surrounding elements such as buttons, form fields, or body text.
Border radius
You can adjust the corner radius of the Singpass button to match your own. Whether your buttons are fully rounded, subtly curved, or square-cornered, the Singpass button should follow the same style, so it fits naturally into your UI rather than standing out as a third-party element.
Accessibility: Aria labels for screen readers
For screen readers, ensure the Singpass logo is announced correctly.
Provide an accessible label so it is read as “Sing-pass”, instead of being spelled out letter by letter ‘S-i-n-g-p-a-s-s’.
Last updated
Was this helpful?