UX Guidelines
This section contains important UX guidelines to ensure signers are well-guided through their signing journey.
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 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.
Last updated
Was this helpful?