This section outlines the elements you can customize within the Qualified Signature module to match your brand while preserving Incode’s core UX. It clarifies which areas are flexible, such as text, illustrations, and brand colors and which elements remain fixed to ensure consistency, accessibility, and optimal capture performance across platforms.
Signature empty
Entry point of the Qualified Signature module. This screen presents the user with a consent form titled "Accept and sign," accompanied by a brief instruction to accept the terms before completing the signature.
Customizable Elements
| Area |
What can be customized |
Notes |
| Text |
Title ("Accept and sign"), instruction text, button text |
Fully localizable; tone and terminology can be adapted to match brand voice. |
| Background Color |
Screen background |
Must maintain strong contrast with inputs, text, and CTAs for accessibility compliance. |
| Buttons (CTA) |
Button label (“Finish signing”), background color, text color |
Uses brand tokens |
| Brand Colors |
Header text, accent color, input focus state, status indicators |
Applied via design tokens; avoid reducing clarity in critical validation states. |
Fixed Elements
| Element |
Why it is fixed |
| CTA state behavior |
"Done" button remains disabled until a signature stroke is detected, preventing empty submissions. |
| Processing flow behavior |
Prevents duplicate submissions and manages loading states during signature capture. |
| Text hierarchy |
Maintains clear task communication and visual clarity within the flow. |
| WCAG contrast requirements |
Mandatory for accessibility compliance and inclusive user experience. |
Token Reference
| UI Element |
Token |
Raw Value |
| Title text (Accept and sign) |
text-body-primary |
#26283B |
| Instruction text |
text-body-secondary |
#60657C |
| Document row surface |
surface-neutral-50 |
#F5F6F7 |
| Document row border |
border-neutral-100 |
#E6E8EF |
| Document name text |
text-body-primary |
#26283B |
| “View” link |
button-tertiary-text-default |
#0046FF |
| Checkbox border |
checkbox-border-default |
#82879A |
| Checkbox background |
checkbox-surface-default |
#FFFFFF |
| Checkbox label text |
text-body-primary |
#26283B |
| Info box surface |
surface-brand-50 |
#E5F0FF |
| Info box text |
text-body-primary |
#26283B |
| Screen background |
surface-neutral-0 |
#FFFFFF |
| Primary button (disabled) background |
button-primary-surface-disabled |
#E9ECEF |
| Primary button (disabled) text |
button-primary-text-disabled |
#60657C |
Design Notes
- Keep field labels and helper text concise to reduce cognitive load.
- Use brand colors sparingly for focus states and primary CTAs to maintain clarity.
- Preserve sufficient color contrast across all states (idle, focus, error, disabled).
Signature Filled
This screen reflects the state after the user has checked all three consent checkboxes. Each checkbox is now marked and highlighted in blue, confirming the user's agreement to the terms.
Customizable Elements
| Area |
What can be customized |
Notes |
| Text Elements |
Title, instruction text, button text, badge text |
Fully localizable. Tone and terminology can align with brand and regulatory requirements. |
| Color Styling |
Background, input surfaces, text color, focus state, CTA background and text color |
Applied via design tokens. Must maintain accessibility contrast standards. |
| CTA Label |
Primary button text (e.g., “Finish signing”) |
Editable; action meaning must remain consistent with flow behavior. |
| Localization |
All textual content |
Supports full localization. Layout should accommodate text expansion. |
Fixed Elements
| Element |
Why it is fixed |
| CTA enabled behavior |
"Done" button is enabled only when a valid signature is present on the canvas. |
| Component spacing & safe areas |
Ensures cross-device consistency and accessibility. |
| Text hierarchy |
Maintains clear task communication and visual structure. |
| WCAG contrast requirements |
Mandatory for accessibility compliance. |
Token Reference
| UI Element |
Token |
Raw Value |
| Title text (Accept and sign) |
text-body-primary |
#262831 |
| Instruction text |
text-body-secondary |
#60667C |
| Document row surface |
surface-neutral-50 |
#FCFCFD |
| Document row border |
border-neutral-100 |
#EBECEF |
| Document name text |
text-body-primary |
#262831 |
| “View” link |
button-tertiary-text-default |
#006AFF |
| Checkbox (default) background |
surface-neutral-0 |
#FFFFFF |
| Checkbox (default) border |
border-neutral-100 |
#EBECEF |
| Checkbox (selected) background |
surface-brand-500 |
#006AFF |
| Info container background |
surface-brand-50 |
#E5F0FF |
| Checkbox text |
text-body-primary |
#262831 |
| Primary button background |
button-primary-surface-default |
#006AFF |
| Primary button text |
button-primary-text-default |
#FFFFFF |
Design notes
- Keep the layout clear and vertically structured to reduce cognitive load.
- The enabled "Finish signing" button signals readiness to submit, using a distinct color shift from its disabled state to reinforce interactivity.
Signature loading
Transitional state shown after the user taps "Finish signing." The screen retains the consent form layout while a loading spinner appears on the "Finish signing" button, providing visual feedback that the system is processing the request.
Customizable Elements
| Area |
What can be customized |
Notes |
| Text Elements |
Title, success message, footer text |
Fully localizable. Wording can align with brand tone and regulatory language. |
| Color Styling |
Background, text color, success icon color, CTA color |
Applied via design tokens. Must maintain accessibility contrast, even in disabled states. |
| Localization |
All text content |
Supports full translation. Layout should account for text expansion. |
Fixed Elements
| Element |
Why it is fixed |
| Processing flow logic |
Controlled by backend verification services; cannot be modified at UI level. |
| Form structure hierarchy |
Field order and grouping remain standardized for consistency. |
| WCAG contrast requirements |
Accessibility compliance is mandatory, including disabled and loading states. |
Token Reference
| UI Element |
Token |
Raw Value |
| Title text (Accept and sign) |
text-body-primary |
#262831 |
| Instruction text |
text-body-secondary |
#60667C |
| Document row surface |
surface-neutral-50 |
#FCFCFD |
| Document row border |
border-neutral-100 |
#EBECEF |
| Document name text |
text-body-primary |
#262831 |
| Checkbox (disabled) background |
checkbox-surface-disabled |
#82879A |
| Checkbox (disabled container) |
surface-neutral-400 |
#82879A |
| Checkbox text (disabled) |
checkbox-text-disabled |
#60667C |
| Checkbox text (alias) |
text-body-secondary |
#60667C |
| Checkbox icon |
checkbox-icon-default |
#FFFFFF |
| Card background (checkbox container) |
surface-neutral-0 |
#FFFFFF |
| Inner card surface |
surface-neutral-50 |
#FCFCFD |
| Primary button background |
button-primary-surface-default |
#006AFF |
| Primary button text |
button-primary-text-default |
#FFFFFF |
Design notes
- Preserve layout stability when switching to loading state.
- Maintain accessible contrast for spinner and disabled elements.
Processing screen
Intermediate screen displayed while the system processes the signature submission. The screen shows a spinning progress indicator alongside the text "Processing…", communicating to the user that their action is being handled and they should wait.
Customizable Elements
| Area |
What can be customized |
Notes |
| Text Elements |
Title, success message, footer text |
Fully localizable. Wording can align with brand tone and regulatory language. |
| Color Styling |
Background, text color, success icon color, CTA color |
Applied via design tokens. Must maintain accessibility contrast, even in disabled states. |
| Localization |
All text content |
Supports full translation. Layout should account for text expansion. |
Fixed Elements
| Element |
Why it is fixed |
| Processing flow logic |
Controlled by backend verification services; cannot be modified at UI level. |
| Form structure hierarchy |
Field order and grouping remain standardized for consistency. |
| WCAG contrast requirements |
Accessibility compliance is mandatory, including disabled and loading states. |
Token Reference
| UI Element |
Token |
Raw Value |
| Screen background |
surface-neutral-0 |
#FFFFFF |
| Spinner (active stroke) |
surface-brand-500-static |
#006AFF |
| Spinner (track/background) |
surface-brand-50 |
#EAF0FF |
| Processing text (“Processing…”) |
text-body-primary |
#262831 |
Success
Final confirmation screen of the Qualified Signature module. After processing completes, the screen displays a green checkmark icon along with the message "Signed successfully!" confirming that the signature has been captured and the process is complete. No further user action is required.
Customizable Elements
| Area |
What can be customized |
Notes |
| Text Elements |
Title, success message, footer text |
Fully localizable. Wording can align with brand tone and regulatory language. |
| Color Styling |
Background, text color, success icon color, CTA color |
Applied via design tokens. Must maintain accessibility contrast, even in disabled states. |
| Localization |
All text content |
Supports full translation. Layout should account for text expansion. |
Fixed Elements
| Element |
Why it is fixed |
| Processing flow logic |
Controlled by backend verification services; cannot be modified at UI level. |
| Form structure hierarchy |
Field order and grouping remain standardized for consistency. |
| WCAG contrast requirements |
Accessibility compliance is mandatory, including disabled and loading states. |
Token Reference
| UI Element |
Token |
Raw Value |
| Screen background |
surface-neutral-0 |
#FFFFFF |
| Success icon background |
icon-status-positive |
#1E7F11 |
| Success icon (check) |
icon-neutral-0 |
#FFFFFF |
| Title text (“Signed successfully!”) |
text-body-primary |
#262831 |