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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.corppass.gov.sg/products/corppass-login/corppass-design-guidelines/button-guidelines.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.