# UX Guidelines * [Adding sufficient signature placeholder space in your document](#add-sufficient-signature-placeholder-space-in-your-document) * [Implementing the Sign with Singpass button](#implementing-the-sign-with-singpass-button) * [Presenting Sign with other signing options](#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: {% file src="" %}

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](https://docs.sign.singpass.gov.sg/for-relying-parties/api-documentation/document-signing-v3#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 {% hint style="danger" %} **All signing sessions must be initiated via the Singpass button** and not through providing any redirect links directly to the user. {% endhint %} #### You can download the Sign button in 2 sizes here: {% file src="" %} #### Otherwise, please adhere to the following guidelines to create the Sign button. * [Singpass button types](#singpass-button-types) * [Font usage for button label](#font-usage-for-button-label) * [Aria labels for screen readers](#accessibility-aria-labels-for-screen-readers) * [Singpass logo size](#singpass-logo-size) * [Button colour](#button-colour) * [Border stroke](#border-stroke) * [Border radius](#border-radius) * [Hover state](#hover-state) * [Width and height](#width-and-height) * [Loading state](#loading-state) \ **Singpass logo download:** You can also use the following Singpass logo for your online and print materials {% file src="" %} #### **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](https://fonts.google.com/specimen/Poppins).

#### **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.*