# Singpass Button Guidelines (For developers and designers) **Singpass logo download:** You can use the following logo for your online and print materials {% file src="" %} **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. Download Poppins Bold on [Google fonts](https://fonts.google.com/specimen/Poppins).

**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**