Singpass Button Guidelines (For developers and designers)
If you intend to recreate the Singpass button, please adhere to the following guidelines.
Last updated
Was this helpful?
If you intend to recreate the Singpass button, please adhere to the following guidelines.
Last updated
Was this helpful?
Singpass logo download:
You can use the following logo for your online and print materials
Singpass button types
By default, use the white fill button to pair it with your service’s interface. Alternatively, you may use the red fill button if it’s suitable.
White-filled button: #FFFFFF
Red-filled button: #F4333D
Font usage for button label
By default, please use Poppins at 16px size. Alternatively, you may use your brand’s typeface. San serif is highly recommended for this button to better match the Singpass logo.
Label
If you are using the label ‘Log in’ must be kept as two words.
Accessibility: Aria labels for screen readers
Please ensure that the Singpass logo has a aria-label to ensure that screen readers will read it as “Sing pass” to avoid it reading out the entire word as ‘S-i-n-g-p-a-s-s’.
Singpass logo size
Match the x-height of the label as close as possible to ensure visual balance and proportion.
Button colour
To ensure brand recognition and consistency, use the white-filled or red-filled buttons as stated below. Avoid using colours other than white-filled or red-filled buttons.
Border stroke
When using the white-filled button, please ensure to adhere to the specs stated below.
Border colour: #C8C9CC
Border width: 1px
Border radius
Ensure that the border radius of Singpass button matches your button.
Hover state
Please adhere to the following colours, and avoid using another hover state styling.
White-filled button hover colour: #F5F5F7
Red-filled button hover colour: #B0262D
Width and height
Please ensure that the Singpass button visually matches your primary button with the following:
Width: Fill to match your primary button width
Height: Match your button height
Download Poppins Bold on .
