This section outlines the elements you can customize within the Certificate Issuance 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.
Create your password - Empty
Entry point of the Certificate Issuance module. This screen allows users to create and confirm their password before proceeding with the certificate issuance process. Clear validation states and password requirements help ensure a secure and successful account setup.
Customizable Elements
| Area |
What can be customized |
Notes |
| Text |
Screen title, field labels, placeholders, helper text, validation messages, button text, processing and success messages |
Fully localizable; tone and terminology can be adapted to align with brand voice and compliance requirements. |
| Input States |
Helper text, inline validation messaging, disabled and focus states |
Validation logic remains fixed to preserve consistency and usability standards. |
| Background Color |
Screen background color |
Must maintain sufficient contrast with text, inputs, and CTAs to support accessibility compliance. |
| Buttons (CTA) |
Button labels, background color, text color, disabled state styling |
Uses brand tokens while preserving visibility and accessibility across states. |
| Brand Colors |
Accent colors, input focus state, loading indicator, success state colors |
Applied via design tokens; avoid reducing clarity in validation, processing, or success states. |
Fixed Elements
| Element |
Why it is fixed |
| 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 |
| Screen background |
surface-neutral-0 |
#FFFFFF |
| Header title text |
text-body-primary |
#262831 |
| Password label text |
input-text-label-default |
#262831 |
| Password placeholder text |
input-text-input-placeholder |
#B2879A |
| Password input border |
input-border-default |
#B2879A |
| Password input background |
input-surface-default |
#FCFCDD |
| Confirm password label text |
input-text-label-default |
#262831 |
| Confirm password placeholder text |
input-text-input-placeholder |
#B2879A |
| Confirm password input border |
input-border-default |
#B2879A |
| Confirm password input background |
input-surface-default |
#FCFCDD |
| Continue button background |
button-primary-surface-disabled |
#EBECEF |
| Continue button text |
button-primary-text-disabled |
#60667C |
| Primary body text |
text-body-800-primary |
#262831 |
| Secondary body text |
text-body-400 |
#B2879A |
Create a password - Filled
State displayed after the user has successfully entered their password. All required fields have been completed, validation requirements have been met, and the user can proceed to the Certificate Issuance process.
Customizable Elements
| Area |
What can be customized |
Notes |
| Text |
Screen title, field labels, placeholders, helper text, validation messages, button text, processing and success messages |
Fully localizable; tone and terminology can be adapted to align with brand voice and compliance requirements. |
| Input States |
Helper text, inline validation messaging, disabled and focus states |
Validation logic remains fixed to preserve consistency and usability standards. |
| Background Color |
Screen background color |
Must maintain sufficient contrast with text, inputs, and CTAs to support accessibility compliance. |
| Buttons (CTA) |
Button labels, background color, text color. |
Uses brand tokens while preserving visibility and accessibility across states. |
| Brand Colors |
Accent colors, input focus state, loading indicator, success state colors |
Applied via design tokens; avoid reducing clarity in validation, processing, or success states. |
Fixed Elements
| Element |
Why it is fixed |
| 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 |
| Screen background |
surface-neutral-0 |
#FFFFFF |
| Header title text |
text-body-primary |
#262831 |
| Password label text |
input-text-label-default |
#262831 |
| Password input text |
input-text-input-default |
#262831 |
| Password input border |
input-border-default |
#B2879A |
| Password input background |
input-surface-default |
#FCFCDD |
| Confirm password label text |
input-text-label-default |
#262831 |
| Confirm password input text |
input-text-input-default |
#262831 |
| Confirm password border |
input-border-default |
#B2879A |
| Confirm password background |
input-surface-default |
#FCFCDD |
| Continue button background |
button-primary-surface-default |
#006AFF |
| Continue button text |
button-primary-text-default |
#FFFFFF |
| Primary body text |
text-body-800-primary |
#262831 |
| Brand primary surface |
surface-brand-500-static |
#006AFF |
Create a password - Loading
Processing state of the Certificate Issuance module. This screen informs the user that the certificate issuance request is being processed. A loading indicator communicates that the operation is currently in progress while temporarily preventing duplicate submissions or interruptions to ensure a secure and successful issuance experience.
Customizable Elements
| Area |
What can be customized |
Notes |
| Text Elements |
Processing title, status message, helper text |
Fully localizable. Tone and terminology can align with brand and compliance requirements. |
| Color Styling |
Background color, text color, loading indicator color, status icon color |
Applied via design tokens. Must preserve accessibility contrast across all states. |
| Branding |
Logo placement, typography styles, accent colors |
Branding updates should maintain readability and consistency throughout the verification flow. |
| Localization |
All textual content and regional formatting |
Supports localization and translation. Layout should account for text expansion across languages. |
| Loading Indicator |
Spinner style and animation behavior |
Customizable within approved motion and accessibility guidelines. |
Fixed Elements
| Element |
Why it is fixed |
| 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 |
| Screen background |
surface-neutral-0 |
#FFFFFF |
| Processing spinner |
surface-brand-400 |
#3388FF |
| Processing title text |
text-body-primary |
#262831 |
| Processing helper text |
text-body-secondary |
#60667C |
| Loading indicator background |
surface-brand-100 |
#D6E7FF |
| Primary status icon |
icon-status-info |
#3388FF |
| Primary body text |
text-body-primary |
#262831 |
Design Notes
- Keep processing and success messaging concise to reduce cognitive load during the certificate issuance process.
- Preserve sufficient color contrast across all states, including processing, success, disabled, and error states.
- Maintain consistent spacing, typography, and iconography across all Certificate Issuance states to reinforce flow continuity.
Processing
The screen displays a loading indicator and processing message, communicating that the certificate issuance request is currently being processed. During this stage, the user is informed that the operation is in progress while duplicate submissions and interruptions are temporarily prevented to ensure a secure and successful issuance experience.
Customizable Elements
| Area |
What can be customized |
Notes |
| Color Styling |
Background color, text color, success icon color, accent colors |
Applied via design tokens. Must preserve accessibility contrast across all states. |
| Localization |
All textual content and regional formatting |
Supports localization and translation. Layout should account for text expansion across languages. |
Fixed Elements
| Element |
Why it is fixed |
| 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 |
| Screen background |
surface-neutral-0 |
#FFFFFF |
| Processing spinner |
surface-brand-400 |
#3388FF |
| Processing title text |
text-body-primary |
#262831 |
| Processing helper text |
text-body-secondary |
#60667C |
| Loading indicator background |
surface-brand-100 |
#D6E7FF |
| Primary status icon |
icon-status-info |
#3388FF |
| Primary body text |
text-body-primary |
#262831 |
Design notes
- Keep the layout clear, vertically structured, and easy to scan to reduce cognitive load.
Create a password - Download certificate
The screen indicates that the certificate has been successfully generated and is ready for download. A confirmation message is displayed along with a clear call-to-action allowing the user to download their certificate and complete the Certificate Issuance process.
Customizable Elements
| Area |
What can be customized |
Notes |
| Color Styling |
Background color, text color, success icon color, accent colors |
Applied via design tokens. Must preserve accessibility contrast across all states. |
| Localization |
All textual content and regional formatting |
Supports localization and translation. Layout should account for text expansion across languages. |
Fixed Elements
| Element |
Why it is fixed |
| 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 |
| Screen background |
surface-neutral-0 |
#FFFFFF |
| Success title text |
text-body-primary |
#262831 |
| Success helper text |
text-body-secondary |
#60667C |
| Primary CTA button background |
button-primary-surface-default |
#006AFF |
| Primary CTA button text |
button-primary-text-default |
#FFFFFF |
Design notes
- Keep the layout clear, vertically structured, and easy to scan to reduce cognitive load.
Create a password - Done
The screen confirms that the certificate has been successfully generated and downloaded. A success message is displayed to indicate completion of the Certificate Issuance process, along with a final confirmation that the user can exit the flow or proceed with the downloaded certificate.
Customizable Elements
| Area |
What can be customized |
Notes |
| Color Styling |
Background color, text color, success icon color, accent colors |
Applied via design tokens. Must preserve accessibility contrast across all states. |
| Localization |
All textual content and regional formatting |
Supports localization and translation. Layout should account for text expansion across languages. |
Fixed Elements
| Element |
Why it is fixed |
| 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 |
| Screen background |
surface-neutral-0 |
#FFFFFF |
| Success icon background |
surface-brand-100 |
#D6E7FF |
| Success icon |
icon-status-positive |
#1E7F11 |
| Success title text |
text-body-primary |
#262831 |
| Success helper text |
text-body-secondary |
#60667C |
| Primary CTA button background |
button-primary-surface-default |
#006AFF |
| Primary CTA button text |
button-primary-text-default |
#FFFFFF |