OneSpan Sign Developer: New Signer Experience – Branding Customization

Duo Liang,

OneSpan Sign’s new signer experience now features more powerful options to re-brand your signing ceremony compared to previous customization options. Users even have the option to modify the color scheme in order to have a more consistent look and feel with your brand.

In this blog, we will introduce this Color Customization feature, then walk through other available customization options. Let’s get started!

Color Customization

Account administrators can customize the new signer experience branding via the new sender interface. This can be done from the Signing Customization page under the Admin section as shown below:


The following colors can be updated:

•    Primary
•    Alerts (Success, Warning, Error, Info)
•    Signature & Optional Signature button


  • The default color options are accessibility compliant. However, if you have updated these colors, you need to make sure that ADA compliance is maintained.

Color Association

Next, we will demonstrate  what effect each color change will have, so that you will have a better idea of how to set up them.

Primary Color

Primary color will be applied to all buttons and top level menu items. The color displayed while the cursor hovers over the option will be calculated by the system as a shade of the primary color.


    Success Color

    This color will be used for success alerts, signing progress, signing completion, and accepted signature box border.10-16-4

    Error Color

    This color will be used for error alerts, number of signatures required per document, and field validation tooltips.10-16-5

    Information Color

    This color will be used for information alerts.10-16-6

    Signature & Optional Signature Box

    This section defines the color of the signature boxes before they are accepted.



    • Note that signature and optional signature buttons have a level of opacity applied to them, to allow for any background text to be seen. Thus, signature fields may appear slightly different from other boxes that use the same color.

    Logo Customization

    The account logos in the new signer experience can now be configured independently for all supported languages. Use the Branding Migration forms, upload the logo file, and inform our Support Team how you want to customize your New Signer Experience.10-16-8


    •    Even if you have already re-branded your account for a previous signer experience, you still need to send us a request for the new signer experience
    •    The maximum dimensions for the account logo in the new signing ceremony is: 258px by 40px. Anything larger will be scaled down to fit by the system
    •    The supported image types are: jpeg/jpg, png, gif, bmp

    Field Font Size in UI

    Font Size within an Unconfirmed Document

    When a signer accesses an unconfirmed document within the new signer experience, all text for signature fields, labels, and input fields will be set using the font size defined for that field.

    •    If the text does not fit within the field container using the defined font size, the system will automatically reduce the font up to a maximum of 8 pixels to try and fit the text within the field
    •    If the text still does not fit after maximum resizing, it will bleed out of the field
    •    If the font size for a given field is set to “auto-fit”, the system will ignore that setting and default the font size to 12 pixels and then apply a similar logic

    Font Size within a Confirmed Document

    When a signer accesses a confirmed document within the new signer experience, all text for signature fields, labels, and input fields will be set using the font size defined for that field.

    •    If the text does not fit within its container, it will be auto-scaled to fit the container.

    Looking Ahead to Future Installment

    By now, we’ve covered the color and logo customizations, as well as the expected behavior for font sizes in fields. In next blog of this series, I will showcase all the changes to UI text messages. Together with today’s blog, these articles will paint a more complete image of how much flexibility you’ll have to customize the new signer experience.

    If you have any questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the Developer Community Forums. Your feedback matters to us!

    Duo Liang is a Technical Evangelist and Partner Integrations Developer at OneSpan where he creates and maintains integration guides and code shares, helps customers and partners integrate OneSpan products into their applications, and builds integrations within third party platforms.