Signature Capture
Intro
The signature capture allows users to input their signature by signing directly on the screen. The inputted signature is captured and then saved with an optional watermark for additional information.

Usage
The signature capture may be used when users must sign to authorize workflows. It can be used in various cases, like approving an order, confirming a task, indicating receival, signing off for another person, etc.
Structure
The structure of the signature capture includes an app bar, submit button, signature line, divider line, footer, and clear button.
A. App Bar
The app bar includes the title of what is being signed, an “X” button for users to exit out of the form cell, and a “Submit” button which is enabled once users sign.
B. Submit Button
The submit button is disabled on the initial signature screen. It is enabled once users sign in order to complete the signing process.
C. Signature Line
The signature line prompts users to input their signature in the space given.
D. Divider Line
The divider line separates the signing screen from the footer.
E. Footer
The footer marks the bottom of the signature capture form cell and houses the “Clear” button.
F. Clear Button
The clear button may be used if the user wants to erase what they have currently signed.

Watermark (Optional)
The signature capture supports an optional watermark which includes two lines of text and can be saved as a bitmap or SVG with the final signature once it is submitted. The text can include a timestamp, unique ID, job title, etc.

Specs
On mobile, the signature capture fills the full screen. On tablet, the signature capture is a responsive dialog.
Padding and Alignment




Signing Area




Main Colors
Sample | Element | Alpha Hex |
|
Background color | #FFFFFF |
|
Signature | #6A6D70 |
|
Signature line | #89919A |
|
Watermark text | #6A6D70 |
|
Divider | #E5E5E5 |