Sign with Singpass
Singpass Developer DocsAsk a Question
  • START HERE
    • Overview of Sign
    • How do our Digital Signatures work?
    • Frequently Asked Questions
  • FOR USERS
    • How to sign
    • Verifying Sign with Singpass Signatures
      • Loading Singpass Root Signing Certificate
  • FOR RELYING PARTIES
    • Use Cases
    • Getting Started
      • How to Onboard our API
      • Digital Signing Partners
        • Docusign
        • Tungsten Automation
        • OneSpan
        • Tessaract Technologies Pte Ltd
        • Netrust Pte Ltd
        • Modus Consulting
        • Redoc.co by Real Estate Doc Pte Ltd.
        • CrimsonLogic
        • Zoho Sign
        • Securemetric Technology Pte. Ltd.
        • Rently Pte. Ltd.
    • API Documentation
      • Document Signing V3
        • Initiate Sign Request
        • Redirect From Sign with Singpass
        • Accept Success Signing Webhook
        • Get Signing Result
        • JWKS Specification
        • Sign Portal
      • Document Signing V1
      • Transaction Signing
        • Embedding Singpass JS
        • Init Transaction Signing
        • Exchange Transaction Signature
    • UX Guidelines
      • User Journey Illustration
    • Support
Powered by GitBook
On this page
  • Add sufficient signature placeholder space in your document
  • Implementing the Sign with Singpass button
  • Presenting Sign with other signing options

Was this helpful?

  1. FOR RELYING PARTIES

UX Guidelines

This section contains important UX guidelines to ensure signers are well-guided through their signing journey.

PreviousExchange Transaction SignatureNextUser Journey Illustration

Last updated 20 days ago

Was this helpful?

  • Adding sufficient signature placeholder space in your document

  • Implementing the Sign with Singpass button

  • Presenting Sign with other signing options

Add sufficient signature placeholder space in your document

On a regular A4 document, a Sign with Singpass signature will take up an area of 7.78cm x 2.12cm (294 x 80 pixels).

When preparing a PDF of the unsigned document, clearly demarcate the placements of the signatures and mark a sufficient area (at least 3.12 x 7.98cm) for the signature placeholders to appear. This ensures that the document's content will not be obscured by the digital signature.

For ease, you may copy the placeholder sample from this Word document to use in your own document:

Implementing the Sign with Singpass button

All signing sessions must be initiated via the Singpass button and not through providing any redirect links directly to the user.

Please adhere to the following guidelines to create the Singpass button.

  • Singpass button types

  • Font usage for button label

  • Aria labels for screen readers

  • Singpass logo size

  • Button colour

  • Border stroke

  • Border radius

  • Hover state

  • Width and height

  • Loading state

Singpass logo download:

You can use the following logo for your online and print materials

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

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.

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:

  • Width: Fill to match your primary button width

  • Height: Match your button height

Loading state

Please ensure that the button has a loading state as follows. The loading state should appear for the duration of time after the user clicks the button and is waiting to be redirected to the Sign portal.

Presenting Sign with other signing options

If users are given multiple options to sign, with Sign as one of the options, we recommend positioning Sign as the preferred signing choice, and including the following liner to inform users of the security benefit of using Sign with Singpass:

By signing with Singpass, you create secure digital signatures that are highly resistant to forgery and tampering.

17KB
Signature placeholder sample.docx
287KB
Singpass-logos.zip
archive
Example of a clearly demarcated signature area in the document (size annotations are not required)
Example demonstrating how this liner can be included