Corppass
  • INTRODUCTION
    • About Corppass
    • Corppass Design Guidelines
      • Brand Guidelines
      • Button Guidelines
  • Technical Specifications
    • Corppass Authorization API
      • Key concepts
        • Client JWKS
        • JWS and JWE
        • Client Assertion JWT
        • Proof Key of Code Exchange (PKCE)
      • Staging and Production URLs
      • Well-known Endpoints
        • OpenID Discovery Endpoint
        • JWKS Endpoint
      • Scopes
      • Authorization Endpoint
        • Authorization Code with Proof Key of Code Exchange (PKCE) Flow
        • Pushed Authorization Request (PAR) Flow
      • Token Endpoint
        • ID Token Structure
          • UserInfo Claim Structure
          • EntityInfo Claim Structure
        • Access Token Structure
      • Authorization Info Endpoint
        • AuthInfo Structure
        • TPAuthInfo Structure
      • Pushed Authorization Request (PAR) Endpoint
  • Corppass Developer Portal (CDP)
    • User Guide
      • Getting Started
      • Login to CDP
      • Available Digital Service Settings
        • FAQs
      • Toggle Between Staging and Production Environments
      • Portal Features
        • Updating the Digital Service and Managing Metadata
      • User Roles and Permissions
      • Frequently Asked Questions (FAQ)
        • Login Issues
        • Access and Permissions
        • How is CDP Different from Corppass Agency Admin (AA) Portal?
        • Other Common Issues
  • MORE INFORMATION
    • Is Corppass working?
    • Contact Us
Powered by GitBook
On this page
  1. INTRODUCTION
  2. Corppass Design Guidelines

Button Guidelines

Please adhere to the following guidelines when recreating the Singpass button.

PreviousBrand GuidelinesNextCorppass Authorization API

Last updated 2 months ago

Download Singpass logo:

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

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.

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.

Label

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

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

Singpass logo size

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

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.

Border stroke

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

  • Border colour: #C8C9CC

  • Border width: 1px

Border radius

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

Hover state

Please adhere to the following colours, and avoid using another hover state styling.

  • White-filled button hover colour: #F5F5F7

  • Red-filled button hover colour: #B0262D

Width and height

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

Download Poppins Bold on .

Google fonts
287KB
Singpass-logos.zip
archive
Width: Fill to match your primary button width.
Height: Match your button height.