UX Guidelines

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

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

Example of a clearly demarcated signature area in the document (size annotations are not required)

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

17KB

Signature placeholder sample.docx

Open

How do I define the location on the document where my user's signature should appear?

When initiating a sign request to our API, you are required to send us the coordinates of the desired location for your user's signature to appear.

You can use our Sign Location Helper to experiment with signature placement and copy the (x, y, page) values for use in Sign v3.

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.

You can download the Sign button in 2 sizes here:

8KB

Sign with Singpass btn - 2 sizes.zip

archive

Open

Otherwise, please adhere to the following guidelines to create the Sign 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 also use the following Singpass logo for your online and print materials

287KB

Singpass-logos.zip

archive

Open

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.

Example demonstrating how this liner can be included