> For the complete documentation index, see [llms.txt](https://docs.corppass.gov.sg/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.corppass.gov.sg/products/corppass-login/corppass-design-guidelines/button-guidelines.md).

# Button Guidelines

**Download** **Singpass logo:**

{% file src="/files/ZRahDRNTmxF7O4TWvBQT" %}

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

<figure><img src="/files/e9CvIsY1X8Ap4dHnhgkG" alt=""><figcaption></figcaption></figure>

**Singpass button for Corppass user**

We recommend adding 'as Corppass user' when pairing with the Singpass button to help users quickly identify their login role.

<figure><img src="/files/CF6mgMsSAow9MPxZq2zd" alt=""><figcaption></figcaption></figure>

#### 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).

<figure><img src="/files/V1RZd8lTX6UVxQ9nb9WJ" alt=""><figcaption></figcaption></figure>

#### Label

If you are using the label ‘**Log in**’ must be kept as two words.

<figure><img src="/files/dmSEeXoB1jZlofLIfPjd" alt=""><figcaption></figcaption></figure>

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

<div><figure><img src="/files/OHhYY9Rh6QwIdFjISbep" alt=""><figcaption></figcaption></figure> <figure><img src="/files/fI0O9cMby4In1u1ZOWUl" alt=""><figcaption></figcaption></figure></div>

**Singpass logo size**

Match the **x-height** of the label as close as possible to ensure visual balance and proportion.

<div><figure><img src="/files/1CbYunCcPsUN2TxWIbYS" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ceuOHoUvmHwOgP2eq2Wt" alt=""><figcaption></figcaption></figure></div>

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

<figure><img src="/files/05Zfe7s2dFpmOfCcC2PV" alt=""><figcaption></figcaption></figure>

<div><figure><img src="/files/Q1VyDJ3U35gf2FAqJBX4" alt=""><figcaption></figcaption></figure> <figure><img src="/files/zupjiLXEniiAdapQk4n9" alt=""><figcaption></figcaption></figure></div>

**Border stroke**

When using the white-filled button, please ensure to adhere to the specs stated below.&#x20;

* Border colour: **#C8C9CC**&#x20;
* Border width: **1px**

<figure><img src="/files/qZgGJQRlmUusGmTpkNEW" alt=""><figcaption></figcaption></figure>

**Border radius**

Ensure that the border radius of Singpass button matches your button.

<div><figure><img src="/files/CHIH9BfpQI1bwhtf6nja" alt=""><figcaption></figcaption></figure> <figure><img src="/files/CjqA9Co48fVhxlgQDsWI" alt=""><figcaption></figcaption></figure></div>

**Hover state**

Please adhere to the following colours, and avoid using another hover state styling.&#x20;

* White-filled button hover colour: **#F5F5F7**&#x20;
* Red-filled button hover colour: **#B0262D**

<div><figure><img src="/files/ZpjXDVNqGFfcIEItM3ur" alt=""><figcaption></figcaption></figure> <figure><img src="/files/h3OdLcZY28KrnlQJYN9O" alt=""><figcaption></figcaption></figure></div>

**Width and height**

Please ensure that the Singpass button visually matches your primary button with the following:

<div><figure><img src="/files/9GqObxLsmGbZLGGLU95l" alt=""><figcaption><p>Width: Fill to match your primary button width. </p></figcaption></figure> <figure><img src="/files/97qFgawKAIBQKp6sc86u" alt=""><figcaption><p>Height: Match your button height.</p></figcaption></figure></div>