> 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/myinfo-business/design-guidelines/button-guidelines.md).

# Button Guidelines

## Overview

This guide covers how to display the Singpass button correctly. It includes the approved button for Myinfo Business, approved 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 asset:**

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

***

### Approved button label

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

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

<table><thead><tr><th>Use case type</th><th>Use when</th><th width="249.12109375">Button</th></tr></thead><tbody><tr><td>Registration and Sign up</td><td>Users are signing up or registering for your service<br><br>Example: Creating a new banking, telco, or service account</td><td><p><img src="/files/2aiOP0DP2aMc0XwnGODq" alt="" data-size="original"></p><p></p><p><img src="/files/YhsJVq0b2aKl2FpHwr59" alt="" data-size="original"></p></td></tr><tr><td>Application</td><td>Users are applying for a product or service<br>Examples: Applying for a credit card, loan, or grants</td><td><img src="/files/5M6t4JGW5M0ynBWs8ArU" alt="" data-size="original"></td></tr><tr><td>Identity verification</td><td><p>The primary purpose is to confirm the user’s identity</p><p>Examples:</p><ul><li>Verifying identity before accessing sensitive features</li><li>Performing KYC checks before allowing further actions</li></ul></td><td><img src="/files/X6q7hXD71JPwUC1NyAM3" alt="" data-size="original"></td></tr><tr><td>Retrieval or update of Information</td><td><p>Users are asked to fill in their details</p><p>Examples:</p><ul><li>Pre-filling details in a form</li><li>Refreshing previously saved information</li></ul></td><td><p><img src="/files/wxjiL9ubFNRCOvJjK1gO" alt="" data-size="original"></p><p></p><p><img src="/files/FMk3waFxYPuM3q6qSwnW" alt="" data-size="original"></p></td></tr><tr><td>Others</td><td><p>Singpass is used as a step within a larger flow. The action is to proceed, not to apply or verify</p><p>Examples:</p><ul><li>Booking an appointment</li><li>Moving to the next step before details are shown</li></ul></td><td><img src="/files/USdwp2mYrgZIC4oYZzSn" alt="" data-size="original"></td></tr></tbody></table>

***

### Button colour

Use colour to indicate emphasis and ensure the Singpass button is clearly visible in your interface.

Choose a variant that provides sufficient contrast with the background and reflects the importance of the action.

#### White with outline (Default)

* White background `#FFFFFF` with grey border `#AAABAD`
* Dark grey text `#141414`&#x20;

Use when a lower visual emphasis is needed or when pairing with other primary actions.

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

#### White (for dark mode)

* White background `#FFFFFF`
* Dark grey text `#141414`

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.

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

#### Black

* Dark grey background `#141414`
* White text `#FFFFFF`&#x20;
* Full white Singpass logo

Use for primary actions on light backgrounds.

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

#### Red

* Singpass Red background `#D93841`
* White text  `#FFFFFF`&#x20;
* Full white Singpass logo

Use to reinforce Singpass branding.

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

#### Don't&#x20;

Don't use colours outside the approved variants, including gradients or modified brand colours.

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

Don't use a colour variant that clashes or blends with nearby buttons.

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

#### Button states

The Singpass button has three states. Each variant handles them the same way, only the background colours differ.

{% tabs %}
{% tab title="White with outline" %}

<table><thead><tr><th width="174">State</th><th>Button background colour  [hex code]</th><th>Border colour [hex code]</th><th>Font colour [hex code]</th></tr></thead><tbody><tr><td><strong>Default</strong><img src="/files/haKv78l83Q4C3PQYS4lZ" alt=""></td><td>White: <code>#FFFFFF</code> </td><td>Grey: <code>#AAABAD</code></td><td>Black: <code>#141414</code></td></tr><tr><td><strong>Hover</strong><br><img src="/files/bztZxpO9h6MWu6vOF1GU" alt="" data-size="original"></td><td>Light grey: <code>#F5F5F7</code></td><td>Grey: <code>#AAABAD</code></td><td>Black: <code>#141414</code></td></tr><tr><td><p><strong>Disabled</strong></p><p><img src="/files/9Ar5YWFiMtJmWu6mUHfX" alt="" data-size="original"></p></td><td>Grey: <code>#E8E9EB</code></td><td>Grey: <code>#AAABAD</code></td><td>Grey: <code>#AAABAD</code></td></tr></tbody></table>
{% endtab %}

{% tab title="White (dark mode)" %}

<table><thead><tr><th width="240.2109375">State</th><th>Button background colour [hex code]</th><th>Font colour [hex code]</th></tr></thead><tbody><tr><td><p><strong>Default</strong></p><p><img src="/files/hldFKayBfnaSy5icGDMS" alt="" data-size="original"></p></td><td>White: <code>#FFFFFF</code> </td><td>Black: <code>#141414</code></td></tr><tr><td><p><strong>Hover</strong></p><p><img src="/files/3ADFPgPBLzWOOO4PVFBb" alt="" data-size="original"></p></td><td>Light grey: <code>#F5F5F7</code></td><td>Black: <code>#141414</code></td></tr><tr><td><p><strong>Disabled</strong></p><p><img src="/files/FRNBHO6xUYwVJABQNpD8" alt="" data-size="original"></p></td><td>Grey: <code>#E8E9EB</code> </td><td>Light grey: <code>#AAABAD</code></td></tr></tbody></table>
{% endtab %}

{% tab title="Black" %}

<table><thead><tr><th width="240.2109375">State</th><th>Button background colour [hex code]</th><th>Font colour [hex code]</th></tr></thead><tbody><tr><td><p><strong>Default</strong></p><p><img src="/files/RU4z6kUUitABPH1JtSmz" alt="" data-size="original"></p><p></p></td><td>Black: <code>#141414</code> </td><td>White: <code>#FFFFFF</code></td></tr><tr><td><p><strong>Hover</strong></p><p><img src="/files/pVi6JTQJhPx0tpeBr9d3" alt="" data-size="original"></p></td><td>Dark grey: <code>#3B3C3D</code></td><td>White: <code>#FFFFFF</code></td></tr><tr><td><p><strong>Disabled</strong></p><p><img src="/files/FRNBHO6xUYwVJABQNpD8" alt=""></p></td><td>Grey: <code>#E8E9EB</code> </td><td>Light grey: <code>#AAABAD</code></td></tr></tbody></table>
{% endtab %}

{% tab title="Red" %}

<table><thead><tr><th width="240.2109375">State</th><th>Button background colour [hex code]</th><th>Font colour [hex code]</th></tr></thead><tbody><tr><td><p><strong>Default</strong></p><p><img src="/files/CSiMt5JL8YfKguxNt3AJ" alt="" data-size="original"></p></td><td>Red: <code>#D93841</code> </td><td>White: <code>#FFFFFF</code></td></tr><tr><td><p><strong>Hover</strong></p><p><img src="/files/HHidVe0kRico3cmhSEs4" alt="" data-size="original"></p></td><td>Dark red: <code>#B0262D</code></td><td>White: <code>#FFFFFF</code></td></tr><tr><td><p><strong>Disabled</strong></p><p><img src="/files/FRNBHO6xUYwVJABQNpD8" alt="" data-size="original"></p></td><td>Grey: <code>#838487</code></td><td>White: <code>#FFFFFF</code></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

### Font usage

#### Button label

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](https://fonts.google.com/specimen/Poppins).&#x20;

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

***

### Singpass logo&#x20;

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

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

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

#### Singpass logo size&#x20;

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.

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

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

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

***

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

<figure><img src="/files/3flk5plvA1D42dFSmBbf" alt=""><figcaption></figcaption></figure>

***

### When placing the Singpass button alongside your own buttons

Make sure it feels like it belongs — same height, same width, consistent spacing. Here's what works and what to avoid.

<figure><img src="/files/3jbfr20VqdtReo8eNPvb" alt=""><figcaption><p>Same height as your other buttons. Minimum 40px on desktop, 44px on mobile.</p></figcaption></figure>

<figure><img src="/files/S8AciYNh8egj1xgcyL55" alt=""><figcaption><p>Same width as the other buttons in your layout.</p></figcaption></figure>

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

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

***

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

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

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

***

### Accessibility: Aria labels for screen readers

For screen readers, ensure the Singpass logo is announced correctly.<br>

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

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

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