Myinfo Business (v3) is now available for onboarding.
Getting Started
Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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:

singpass_button_asset.zip
archive · 138KB
Open

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:

singpass_button.zip
archive · 125KB
Open

Use case type
Use when
Button

Registration and Sign up

Users are signing up or registering for your service Example: Creating a new banking, telco, or service account

Application

Users are applying for a product or service Examples: Applying for a credit card, loan, or grants

Identity verification

The primary purpose is to confirm the user’s identity

Examples:

  • Verifying identity before accessing sensitive features

  • Performing KYC checks before allowing further actions

Retrieval or update of Information

Users are asked to fill in their details

Examples:

  • Pre-filling details in a form

  • Refreshing previously saved information

Others

Singpass is used as a step within a larger flow. The action is to proceed, not to apply or verify

Examples:

  • Booking an appointment

  • Moving to the next step before details are shown

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

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

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.

Black

  • Dark grey background #141414

  • White text #FFFFFF

  • Full white Singpass logo

Use for primary actions on light backgrounds.

Red

  • Singpass Red background #D93841

  • White text #FFFFFF

  • Full white Singpass logo

Use to reinforce Singpass branding.

Don't

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

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

Button states

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

State
Button background colour [hex code]
Border colour [hex code]
Font colour [hex code]

Default

White: #FFFFFF

Grey: #AAABAD

Black: #141414

Hover

Light grey: #F5F5F7

Grey: #AAABAD

Black: #141414

Disabled

Grey: #E8E9EB

Grey: #AAABAD

Grey: #AAABAD

State
Button background colour [hex code]
Font colour [hex code]

Default

White: #FFFFFF

Black: #141414

Hover

Light grey: #F5F5F7

Black: #141414

Disabled

Grey: #E8E9EB

Light grey: #AAABAD

State
Button background colour [hex code]
Font colour [hex code]

Default

Black: #141414

White: #FFFFFF

Hover

Dark grey: #3B3C3D

White: #FFFFFF

Disabled

Grey: #E8E9EB

Light grey: #AAABAD

State
Button background colour [hex code]
Font colour [hex code]

Default

Red: #D93841

White: #FFFFFF

Hover

Dark red: #B0262D

White: #FFFFFF

Disabled

Grey: #838487

White: #FFFFFF

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.

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:

singpass_logo.zip
archive · 9KB
Open

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.

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

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

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.

Same height as your other buttons. Minimum 40px on desktop, 44px on mobile.
Same width as the other buttons in your layout.

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.

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.

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

PreviousDesign GuidelinesNextSingpass Brand Guidelines

Last updated