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

# Singpass Button Design Specification

{% hint style="info" %}
**These guidelines take effect on 1 September 2026. All Singpass button implementations must comply with the specifications on this page from that date.**
{% endhint %}

This guide covers how to display the Singpass button correctly. It includes the approved button 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 Singpass assets (approved Singpass button labels and logo):**

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

***

### Approved button labels

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/WcoMLb40lbIAbiwTK6b7" %}

<table data-search="false"><thead><tr><th width="212.2265625">Use case type</th><th>Use when</th><th>Button</th></tr></thead><tbody><tr><td>Log In</td><td>Users are logging in to your service<br><br>Example: Logging into a portal to access a service</td><td><img src="/files/98qfbhhTYdZGyPVu4SrP" alt=""></td></tr><tr><td>Registration and Sign up</td><td><p>Users are signing up or registering for your service</p><p>Example: Creating a new banking, telco, or service account</p></td><td><img src="/files/IYJflfy4c14qxWHPNYDH" alt=""><br><br><img src="/files/4wRorAFR9Mxw9akTkGTs" alt=""></td></tr><tr><td>Application</td><td><p>Users are applying for a product or service</p><p><br>Examples: Applying for a credit card, loan, or grants</p></td><td><img src="/files/TbbMkVEyngnYLMzOAPGb" alt=""></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/CBlSmj95wvJZMSalVw5f" alt=""></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/8lJxGX65pmy73PezZ25o" alt=""><br></p><p><img src="/files/IYJflfy4c14qxWHPNYDH" alt="" data-size="original"></p></td></tr><tr><td>Document signing</td><td>Users are signing a document using Singpass<br><br>Example: Users signing insurance policy</td><td><img src="/files/IeHVVkU5RE7HYFHhzpSq" alt=""></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/KjhudT4tgol09zLYSwX2" alt=""></td></tr></tbody></table>

***

### Button colour and state

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

**Do** use one of the following variants that provides sufficient contrast with the background and reflects the importance of the action.

* White with outline (Default)
* White (for dark mode)
* Black
* Red

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

#### **White with outline (Default)**

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

<table><thead><tr><th width="166.5703125">Button state</th><th width="201.4375">Button background colour [hex code]</th><th width="210.86328125">Border colour [hex code]</th><th>Font colour [hex code]</th></tr></thead><tbody><tr><td><strong>Default</strong><br><img src="/files/ca5hEOUhRakQY8YhI1Jb" 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/JCDiWTfide59McQlkclG" alt=""></td><td>Light grey: <code>#F5F5F7</code></td><td>Grey: <code>#AAABAD</code></td><td>Black: <code>#141414</code></td></tr><tr><td><strong>Disabled</strong><br><img src="/files/LWfRVuirc7XGCKKQp8d5" alt=""></td><td>Grey: <code>#FFFFFF</code></td><td>Grey: <code>#AAABAD</code></td><td>Grey: <code>#AAABAD</code></td></tr></tbody></table>

<figure><img src="/files/3lWIT35dfHbkYeOBxpwU" alt=""><figcaption><p>Button guidelines for white with outline</p></figcaption></figure>

#### **White (for dark mode)**

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.

<table><thead><tr><th width="240.2109375">Button state</th><th>Button background colour [hex code]</th><th>Font colour [hex code]</th></tr></thead><tbody><tr><td><strong>Default</strong><br><img src="/files/LCEvgciCjQNgEgYB6NcQ" alt=""></td><td>White: <code>#FFFFFF</code></td><td>Black: <code>#141414</code></td></tr><tr><td><strong>Hover</strong><br><img src="/files/WNw289Zo6qjV7zLwg2ei" alt=""></td><td>Light grey: <code>#F5F5F7</code></td><td>Black: <code>#141414</code></td></tr><tr><td><strong>Disabled</strong><br><img src="/files/DOhWrEQGdNfRc7NH1etP" alt=""></td><td>Grey: <code>#E8E9EB</code></td><td>Light grey: <code>#AAABAD</code></td></tr></tbody></table>

<figure><img src="/files/egs95yK2GTZRspdq3Nqg" alt=""><figcaption><p>Guidelines for white Singpass button (for dark mode)</p></figcaption></figure>

#### **Black**

Use for primary actions on light backgrounds.

<table><thead><tr><th width="221.69140625">Button state</th><th>Button background colour [hex code]</th><th>Font colour [hex code]</th><th>Singpass logo</th></tr></thead><tbody><tr><td><strong>Default</strong><br><img src="/files/6LSx2vMLMsOlFFDleIbl" alt="" data-size="original"></td><td>Black: <code>#141414</code></td><td>White: <code>#FFFFFF</code></td><td>Use white Singpass logo</td></tr><tr><td><strong>Hover</strong><br><img src="/files/fj7OTapjf3jyUtUoUY96" alt=""></td><td>Dark grey: <code>#3B3C3D</code></td><td>White: <code>#FFFFFF</code></td><td>Use white Singpass logo</td></tr><tr><td><strong>Disabled</strong><br><img src="/files/DOhWrEQGdNfRc7NH1etP" alt=""></td><td>Grey: <code>#E8E9EB</code></td><td>Light grey: <code>#AAABAD</code></td><td>Use white Singpass logo</td></tr></tbody></table>

<figure><img src="/files/fn48Iw6M6TqjvIay2H4B" alt=""><figcaption><p>Guidelines for black Singpass button</p></figcaption></figure>

#### **Red**

Use to reinforce Singpass branding.

<table><thead><tr><th width="171.61328125">Button state</th><th>Button background colour [hex code]</th><th>Font colour [hex code]</th><th>Singpass logo</th></tr></thead><tbody><tr><td><strong>Default</strong></td><td>Red: <code>#D93841</code></td><td>White: <code>#FFFFFF</code></td><td>Use white Singpass logo</td></tr><tr><td><strong>Hover</strong></td><td>Dark red: <code>#B0262D</code></td><td>White: <code>#FFFFFF</code></td><td>Use white Singpass logo</td></tr><tr><td><strong>Disabled</strong></td><td>Grey: <code>#E8E9EB</code></td><td>White: <code>#FFFFFF</code></td><td>Use white Singpass logo</td></tr></tbody></table>

<figure><img src="/files/15ZueNptPTyEF42Y30CJ" alt=""><figcaption><p>Placement guidelines for red Singpass button</p></figcaption></figure>

***

### Button Font and Logo

#### **Button font**

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

<figure><img src="/files/2qZ49W4CAG0ejvMKCNnh" alt=""><figcaption></figcaption></figure>

#### Singpass logo

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/wbjRm7pspGQPVMewvQ3t" %}

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

#### **Singpass logo size**

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/lmCU2iRS07h5h8mEDsLW" 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/MNVnhhx626OWf9rsNFIj" 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/dZRTsiVqyI8aFwZICQX2" alt=""><figcaption></figcaption></figure>

***

### Placing the Singpass Button with Other 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/qEYKySSAOpwHWlpGWAvz" alt=""><figcaption><p>Same height as your other buttons. Minimum 40px on desktop, 44px on mobile.</p></figcaption></figure>

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

#### **Color**

Use a colour variant that does not clash or blend with nearby buttons.

<figure><img src="/files/rQwDvFFPQGIwjo0B6MHX" alt=""><figcaption></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/gA9LgMlsLb4pNby8xEnT" 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/kn5rO4oNcv8cNYhmJwFD" alt=""><figcaption></figcaption></figure>

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

***

### Accessibility: Aria labels for screen readers

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

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/BG8fnA8dEz0nMOqq0gIN" alt=""><figcaption></figcaption></figure>

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.developer.singpass.gov.sg/docs/getting-started/singpass-button-design-specification.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.