Intro

The signature form cell is an entry point for users to launch the signature capture component.   

Structure

A. Header

The header introduces the signature form cell.

B. Text Label

The text label displays information in relation to what the signature is for.

C. “Add Signature” Button

The “Add Signature” button launches the dialog for the signature capture when tapped on.

Behavior & Interaction

The signature icon is the touch target for the form cell. When it is tapped, it will navigate users to the signature capture. 

Specs

Main Colors

Sample Element Alpha Hex
Background #FFFFFF
Header #6A6D70
Text label #32363A
Signature icon button #0A6ED1