Component customization¶

Overview¶

XpressID offers a flexible and modular customization system designed to adapt to your brand identity, user needs, and accessibility standards—whether you're launching a quick integration or implementing a deeply tailored experience.

A key advantage of this system is that you can start broad and refine as needed. Begin by applying global changes to colors, typography, and styles at the theme level. Then, if needed, progressively fine-tune individual components or interactive states.

Each section supports partial configuration—you only need to override the values that are relevant for your use case. Any keys left undefined will automatically fall back to the XpressID's default values, ensuring robustness and ease of maintenance.

This approach enables teams to deliver a cohesive, accessible, and brand-aligned experience with minimal effort, while still offering full control for advanced customization.

The sections that follow detail how to configure:

Texts (labels, messages, instructions, accessibility strings)

Media (illustrations and image assets per screen and device type)

Styles (design tokens, layout, colors, and typography)

Components (buttons, header, spinner, and more)

With this structure, you can create a customized user experience that feels natively integrated into your product—without sacrificing speed or maintainability.

Texts¶

The new system also provides flexible control over the text content displayed throughout the interface.

Instead of editing hardcoded labels or messages in multiple places, you can now configure all user-facing texts from a centralized section.

This approach allows you to easily adapt the language to suit your brand tone, localization needs, or specific use cases, whether it's updating button labels, instructions, error messages, or screen titles.

By modifying just a few key parameters, you can ensure that the entire experience feels cohesive, consistent, and aligned with the expectations of your users.

Below is the full JSON structure containing all the configurable text elements used throughout the interface.

This includes everything from screen titles and helper messages to button text and accessibility descriptions.

⬇ Download English Texts

⬇ Download Spanish Texts

⬇ Download Catalan Texts

⬇ Download Basque Texts

⬇ Download Galician Texts

⬇ Download Italian Texts

⬇ Download Portuguese Texts

⬇ Download Brazilian Portuguese Texts

⬇ Download German Texts

You are not required to modify the entire structure.

The configuration is highly flexible, allowing you to override only the specific text entries you want to customize.

In general, the system will only use the keys relevant to the selected flow. For example, if you define keys belonging to the selfie flow but your selected flow only contains document, nothing will happen; the system will only use the document texts.

This gives you full control over the messaging without unnecessary complexity, making it easier to maintain consistency and adapt the interface to your product's voice and audience.

ASCII codes (e.g., \n) will not be interpreted and will be shown as-is.

HTML tags can be used within the titles and subtitles sections for the document, selfie, and video keys.

If an unsupported tag is included, the text will be rendered as plain text.

The list of allowed tags is as follows:



 
<ul></ul>
<li></li>
<ol></ol>

Example of title and subtitle with HTML inside:

"texts": {
    "instructions": {
        "passive": {
            "title": "Take a photo of <b>your face</b>",
            "subtitle": "<i>Follow these steps:</i> <ol><li><b>Frame your face</b> in the camera</li><li>Maintain a <b>neutral expression</b></li></ol>"
        }
    }
}

Desktop	Mobile

Multiple document capture¶

To configure the texts for the document flow, you need to modify the values within texts.document[]. This property is an array, and each object defined inside it must include the key step: number, where number indicates which document capture step the configuration will apply to.

In the following example, the configuration sets up the first document capture to allow only Driving License, the second one allows ID cards and Passports, and the last allows every document type.

In the text configuration, you can see that for step: 1, first capture, the title has been set to "Title for the first document", for the second capture, it will display "Title for the second document" and the third document capture will use the default texts because no step: 3 configuration has been defined.

{
    "platform": "web",
    "operationMode": "idv",
    "flowSetup": {
        "core": { "confirmProcess": true },
        "stages": ["document"],
        "options": {
            "document": {
                "captures": [
                    {
                        "documentTypes": ["SelectedByUser"],
                        "documentSelector": {
                            "documentKindFilter": ["DrivingLicense"]
                        }
                    },
                    {
                        "documentTypes": ["SelectedByUser"],
                        "documentSelector": {
                            "documentKindFilter": ["IDCard", "Passport"]
                        }
                    },
                    {
                        "documentTypes": ["SelectedByUser"]
                    }
                ]
            }
        }
    },
    "texts": {
        "document": [
            {
                "step": 1,
                "documentSelector": {
                    "title": "Title for the first document"
                }
            },
            {
                "step": 2,
                "documentSelector": {
                    "title": "Title for the second document"
                }
            }
        ]
    }
}

Recommendations¶

Titles and Subtitles¶

Use short, descriptive, and action-oriented titles
Titles should clearly indicate the action the user is expected to perform. ✦ Example: “Take a selfie”, “Show the front of your document”

Subtitles should expand or clarify the instruction
They offer supporting context to the title in a more detailed or reassuring tone. ✦ Example: “Make sure your face is centered and well lit”

Avoid vague or generic labels
Texts like “Step 1” or “Instruction screen” do not help users anticipate what they need to do next.

Maintain clear text hierarchy
Titles should be visually prominent. Subtitles should follow in lighter or smaller weight.

Feedback and system messages¶

Feedback should reflect the specific system activity
Replace generic loading phrases with descriptive messages: ✦ “Analyzing selfie...”, “Verifying back side...”, “Finalizing check...”

Error messages should be neutral and constructive
Avoid blame or overly technical language. ✦ Prefer: “Face not visible – please align your face within the frame” ✗ Avoid: “Error: Face detection failed”

Readability and accessibility¶

Keep text clear, concise, and scannable\ Users tend to scan rather than read. Prioritize brevity and clarity over formality or marketing tone.
Avoid excessive formatting\ Do not overuse bold, italics, or underlining. These should be reserved for minimal emphasis, not used for entire sentences or instructions.
Maintain visual consistency\ Use the same tone and sentence structure across screens to improve predictability and reduce cognitive load.

Media¶

The new system also provides flexible control over the media content displayed throughout the interface.

Instead of editing media in multiple places, you can now configure all images from a centralized section.

By modifying just a few media, you can ensure that the entire experience feels cohesive, consistent, and aligned with the expectations of your users.

Below is the full JSON structure containing all the configurable media elements used throughout the interface.

⬇ Download Media

You are not required to modify the entire structure.

The configuration is highly flexible, allowing you to override only the specific media entries you want to customize.

If a given key is not explicitly redefined, XpressID will automatically fall back to its default value—ensuring smooth operation even with partial configurations.

This gives you full control over the media without unnecessary complexity, making it easier to maintain consistency and adapt the interface to your product's look and feel.

Example of media configuration:

"media": {
    "selfie": {
        "instructions": {
            "desktopPassive": "/images/selfie_desktop.png",
            "mobilePassive": "/images/selfie_mobile.png",
            "desktopActive": "/images/selfie-active.gif",
            "mobileActive": "/images/selfie-active.gif"
        }
    }
}

Recommendations¶

File format¶

We support all image formats natively handled by the user's web browser, but we recommend modern formats for the best balance of quality and file size.

Static images: Use WebP (best for web) or standard JPEG/PNG. Use PNG only if you need transparency.
Animated images: Use GIF for very short, simple animations.

File weight and performance¶

The larger the file size, the longer it will take to load. Large files can significantly slow down the rendering of your content, especially for users on slower network connections or older devices.

Descriptive and Accessible Visuals¶

Prioritize descriptive, instructional visuals
Illustrations and animations should clearly demonstrate the expected user behavior: ✦ Example: Show how to position the face, maintain lighting, or perform head movements.

All media should include alternative text for screen readers
Alternative text can be configured directly in the JSON text structure. These descriptions help users with visual impairments understand the context or purpose of the image or animation

Make alternative text specific and actionable
✦ Example: “Illustration of a person aligning their face in the oval frame” is more useful than “Selfie image”.

Avoid leaving media without a text fallback
When media is purely visual, ensure it doesn’t carry the sole instructional value. Pair with a textual explanation for redundancy and accessibility.

Looping animations should not distract
Loop behavior can be helpful when the action needs to be repeated, but it should not cause visual fatigue or interfere with reading other elements on screen.

Styles¶

The new system based on design tokens transforms how you customize and manage the interface across your product.

Instead of manually overriding styles in multiple places, you can now adjust a centralized set of tokens that control key visual properties such as colors, typography, spacing, and more.

By updating just a few parameters, you can apply consistent branding across all components and views.

This not only helps ensure visual consistency and accessibility, but also reduces the effort and time required for implementation and future maintenance.

Design tokens act as a single source of truth for your UI’s appearance, making the customization process more scalable, predictable, and easier to maintain over time.

Below is the full JSON structure containing all the configurable media elements used throughout the interface.

⬇ Download Styles

You are not required to modify the entire structure.

Three Levels of Customization¶

The customization system is structured in three progressive levels:

1. Theme Level (Global)¶

Apply your brand’s visual identity across the interface by adjusting a centralized set of tokens:

Brand colors (primary and secondary)
Typography (primary and secondary font families)

This is the recommended starting point for fast, system-wide consistency.

2. Component Level¶

Override the appearance of specific UI elements without affecting the rest of the system:

Header
Buttons (primary, secondary, icon)
Cards
Spinner

Control design tokens such as colors, borders, and icon styles at the component level.

3. Interactive States¶

Define how components behave visually in response to user actions, such as hover or pressed states. Customize:

Backgrounds
Icon and text colors
Border styles

This level provides precision over interactive behavior and reinforces a consistent experience.

Recommendations¶

Typography¶

font.familyPrimary Used in larger sizes for titles and headers. A slightly more expressive or “display-style” font can be used here, as long as legibility is preserved.
font.familySecondary Applied to subtitles, buttons, and general interface components. This font should prioritize readability at small sizes and across different screen types.

Colors¶

brandPrimaryColor Represents your main brand color, used in primary buttons and highlights.

brandSecondaryColor Typically used in secondary buttons and accent elements. Choose a color that complements your primary brand tone.

darkTextColor Used for primary text (titles, subtitles, body content). Given that the SDK background is white, this value should always be a dark tone to ensure proper contrast. Avoid using light or low-contrast colors here.

Accessibility and Contrast¶

The default theme already meets WCAG 2.2 contrast standards for accessibility.
When modifying colors—especially darkTextColor, brandPrimaryColor, or background tones—it is the integrator’s responsibility to validate the contrast ratios.
We recommend using online contrast checker tools such as: - WebAIM Contrast Checker - Colorable

Theme Level¶

The first level of configuration, known as the theme level, allows you to personalize the interface by adjusting just a few key parameters related to colors and fonts.

Using the styles.theme configuration, you can define the following core design tokens:

darkTextColor – Main color used for high-contrast text.
lightTextColor – Color used for secondary or less prominent text.
brandPrimaryColor – Main brand color used across the UI for primary actions and highlights.
brandSecondaryColor – Secondary brand color used for accenting and complementary elements.
font.familyPrimary – The primary typeface used throughout the interface.
font.familySecondary – A secondary typeface for alternative or stylistic uses.
font.customFonts – Load your customized fonts.

IMPORTANT

Any changes made to these values will have a global impact on the appearance of components across the system.
It's important to validate your customizations carefully to ensure they maintain a consistent and accessible user experience.

This approach provides a fast and efficient way to align the interface with your brand identity without needing to adjust individual components.

Applies to

darkTextColor: Titles, subtitles, feedback messages in capture, icons.
lightTextColor: is not being translated on our interfaces at the moment, as long as we don’t fully support Dark Theme implementation.
brandPrimaryColor: Loading Spinner, background color of primary buttons, color text of secondary buttons, close button color.
brandSecondaryColor: background color of secondary buttons.
font.familyPrimary: Titles.
font.familySecondary: Subtitles, buttons and feedback messages in capture.

customFonts¶

The customFonts section allows you to define custom fonts that will be loaded directly in XpressID. This is useful for maintaining your brand's visual identity and using fonts that are not included by default.

Each entry in customFonts represents a specific font with its properties and is automatically applied to components using the corresponding font-family.

Main Properties¶

Property	Description
`name`	Name of the font. Used in `font-family`.
`url`	Direct URL to the font file (`.woff2`).
`weight`	Font weight or range of weights (`400`, `"100 900"`).
`style`	Font style (`normal`, `italic`).
`stretch`	Font width (`100%` by default).
`display`	Font rendering behavior (`swap`, `fallback`, `auto`).

Note: The URL must point directly to the font file (.woff2).

How to Configure Custom Fonts¶

To load a custom font, you simply need a direct link to the font file. You can host the file on your own server, a CDN, or use an external provider.

1. Obtain the Font File URL (`.woff2`)¶

Ensure your font is accessible via a public URL.

Self-Hosted: Upload the .woff2 file to your server or CDN (e.g., https://cdn.yourdomain.com/fonts/my-font.woff2).
External Providers: You can use links from providers like Google Fonts, provided they point directly to the file.

2. Create the Entry in `customFonts`¶

Define the font properties in your configuration. The url must match the file location you obtained in the previous step.

Here is an example in desktop of how some screens in the flow would visually change by updating the parameters mentioned above. In this specific case, we are using Google Fonts URLs as the source, but the structure is identical for self-hosted fonts.

"styles": {
    "theme": {
        "font": {
            "familyPrimary": "Roboto",
            "familySecondary": "Oswald",
            "customFonts": [
                {
                    "name": "Roboto",
                    "url": "https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2",
                    "weight": "100 900",
                    "style": "normal",
                    "stretch": "100%",
                    "display": "swap"
                },
                {
                    "name": "Roboto",
                    "url": "https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2",
                    "weight": "100 900",
                    "style": "normal",
                    "stretch": "100%",
                    "display": "swap"
                },
                {
                    "name": "Oswald",
                    "url": "https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752Fz8Ghe4.woff2",
                    "weight": "200 700",
                    "style": "normal",
                    "stretch": "100%",
                    "display": "swap"
                },
                {
                    "name": "Oswald",
                    "url": "https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752GT8G.woff2",
                    "weight": "200 700",
                    "style": "normal",
                    "stretch": "100%",
                    "display": "swap"
                }
            ]
        }
    }
}

In this example, the customFonts setting is configured to apply two fonts: one for primary text and another for secondary text. Additionally, each font family loads two font types. The first font type is for general & web-friendly support, ideal for Western European languages such as English, Spanish, French, German, and Italian. The second font type is for specialized language support, designed for texts in Central European, Baltic, African, and Indigenous languages, as well as phonetic and linguistic content.

Default	After Customization

Component Level¶

While the custom level offers a fast way to globally apply brand identity, sometimes finer control is needed.

That’s where the component-level customization comes in.

This second level allows you to override the styles of specific components in the interface.

Using the styles.components configuration, you can target individual UI elements—such as buttons, icon buttons, spinner, or header adjust their appearance more precisely.

You can define properties like colors, borders, icons, and more for each component.

This provides the flexibility to go beyond global themes and fine-tune the user experience in specific screens or use cases, always maintaining visual coherence with the broader design system.

IMPORTANT

Keep in mind that when you modify a component, the changes will apply across all views where that component is used.
For example, if you change the colors of the primary button, the update will reflect in every view where that button appears. It’s not possible to modify a single instance — all buttons using that parameter will be affected.

In the following section, you'll find a list of customizable components, along with the available parameters and the screens where they are applied.

The Header is a key visual and structural element within the interface.
It appears at the top of the screen and contains the logo.

Desktop	Mobile

As explained in the How to configure section, it is possible to remove the logo from the interface by adjusting logo.show parameter.

When the logo is disabled, the entire header component will be hidden from the view.

If your integration does not require a logo or you prefer a more minimal interface, disabling the header can help simplify the visual layout.

Applies to

Every component view

Below is a comprehensive list of all the properties that can be customized for the header component.

Parameter	Description
borderColor	Border color
borderWidth	Border width
backgroundColor	Background color

Example of header modified:

"styles": {
    "components": {
        "header": {
            "backgroundColor": "#E5D0DA",
            "borderColor": "#A50050",
            "borderWidth": "15px"
        }
    }
}

HeaderModified

Button¶

General¶

Applies to

All buttons

The button component allows for detailed visual customization to better match your brand identity and UI style. You can configure the following aspects individually:

Background color
Border color
Border width
Text (label) color
Border radius

Within the product, the following button types are supported:

Primary button – used for main actions

Secondary button – used for complementary or navigation actions

Tertiary button – used for cancel or exit actions

Icon button – used for actions represented by an icon (e.g., closing, skipping, etc.)

Each type has its own set of customizable properties, allowing you to adjust the appearance of each variant independently. However, the borderRadius property is shared across all button types. This means that by changing it once, the same corner rounding will apply to primary, secondary, and icon buttons. For example, if your product design uses a flatter style, setting the borderRadius to 0px will make all buttons appear more rectangular. On the other hand, increasing this value will result in a more rounded appearance across the interface. This flexibility lets you fine-tune the visual feel of the interface while maintaining consistency across all interactive elements.

!!! warning Keep in mind that when you modify the button, the changes will apply across all views where it is used

Primary button¶

Primary button active¶

This is the button used for main actions, related to starting or continuing the process.

Applies to

These properties allow you to fine-tune its appearance and behavior to better align with your brand and user experience needs.

Below is a comprehensive list of all the properties that can be customized for the button component.

Parameter	Description
backgroundColorPrimary	Background color
labelColorPrimary	Label color (text)
borderColorPrimary	Border color
borderWidthPrimary	Border width

Example of primary button modified:

"styles": {
    "components": {
        "button": {
            "backgroundColorPrimary": "#A50050",
            "labelColorPrimary": "#FFFFFF",
            "borderColorPrimary": "#E5D0DA",
            "borderWidthPrimary": "5px",
            "borderRadius": "15px"
        }
    }
}

Primary button disabled¶

This is the button used for main actions, related to starting or continuing the process but with the disabled state.

Applies to

Esign modal

These properties allow you to fine-tune its appearance and behavior to better align with your brand and user experience needs.

Below is a comprehensive list of all the properties that can be customized for the button component.

Parameter	Description
backgroundColorPrimaryDisabled	Background color
labelColorPrimaryDisabled	Label color (text)
borderColorPrimaryDisabled	Border color
borderWidthPrimaryDisabled	Border width

Example of primary button modified:

"styles": {
    "components": {
        "button": {
            "backgroundColorPrimaryDisabled": "#7c7c7cff",
            "labelColorPrimaryDisabled": "#ffffffff",
            "borderColorPrimaryDisabled": "#704d5eff",
            "borderWidthPrimary": "5px",
            "borderWidthPrimaryDisabled": "15px"
        }
    }
}

Secondary Button¶

This button is for secondary actions, such as repeating the previous step.

Applies to

These properties allow you to fine-tune its appearance and behavior to better align with your brand and user experience needs.

Below is a comprehensive list of all the properties that can be customized for the secondary button component.

Parameter	Description
backgroundColorSecondary	Background color
labelColorSecondary	Label color (text)
borderColorSecondary	Border color
borderWidthSecondary	Border width

Example of secondary button modified:

"styles": {
    "components": {
        "button": {
            "backgroundColorSecondary": "#E5D0DA",
            "labelColorSecondary": "#000000",
            "borderColorSecondary": "#A50050",
            "borderWidthSecondary": "5px",
            "borderRadius": "15px"
        }
    }
}

Tertiary Button¶

This button is for tertiary actions, such as returning to the previous screen or canceling the process.

Applies to

These properties allow you to fine-tune its appearance and behavior to better align with your brand and user experience needs.

Below is a comprehensive list of all the properties that can be customized for the tertiary button component.

Parameter	Description
backgroundColorTertiary	Background color
labelColorTertiary	Label color (text)
borderColorTertiary	Border color
borderWidthTertiary	Border width
backgroundColorTertiaryInverse	Background color for specific situations
labelColorTertiarInverse	Label color (text) for specific situations
borderColorTertiaryInverse	Border color for specific situations
borderWidthTertiaryInverse	Border width for specific situations

Please note that both the default tertiary style and its inverse are applied to the capture help button.

When there is no detection, the background is captured by the camera and therefore requires certain styles to prevent the text from being unreadable. In this case, the inverse mode is applied.
When there is detection, the background turns white and the text should be dark. In this case, the default mode is used.

Example of secondary button modified:

"styles": {
    "components": {
        "button": {
            "backgroundColorTertiary": "#FCE4EC",
            "labelColorTertiary": "#A50050",
            "borderColorTertiary": "#A50050",
            "borderWidthTertiary": "0px",
            "borderRadius": "15px"
        }
    }
}

Outline Button¶

This button is for one-time actions, such as continuing the process.

Applies to

QR uncaptured

These properties allow you to fine-tune its appearance and behavior to better align with your brand and user experience needs.

Below is a comprehensive list of all the properties that can be customized for the outline button component.

Parameter	Description
backgroundColorOutline	Background color
labelColorOutline	Label color (text)
borderColorOutline	Border color
borderWidthOutline	Border width

Example of secondary button modified:

"styles": {
    "components": {
        "button": {
            "backgroundColorOutline": "#FCE4EC",
            "labelColorOutline": "#A50050",
            "borderColorOutline": "#A50050",
            "borderWidthOutline": "2px"
        }
    }
}

Interactive states¶

XpressID allows you to customize the interactive states of buttons—such as hover and pressed—through a set of general-purpose color overlay parameters:

Parameter	Description
colorDefaultHover	Hover color
colorDefaultPressed	Pressed color
colorInverseHover	Hover color inverse
colorInversePressed	Pressed color inverse

These parameters apply a semi-transparent color layer over the button's base style during interaction. This is useful for creating subtle feedback without redefining the full component style.

Default behavior¶

Primary buttons use a light semi-transparent overlay on top of their background.

Secondary and icon buttons use a dark overlay to create a stronger contrast on interaction.

This approach offers a quick and effective way to visually distinguish interactive states with minimal configuration effort.

When to use these parameters¶

Use the colorDefault* and colorInverse* values when:

You want to maintain the button’s base appearance.
You just need a consistent visual cue (e.g., a light/dark tint on hover/pressed).
You prefer not to modify background, text, or borders individually.

When to use specific parameters instead¶

If you want full control over the button’s appearance during interactive states (e.g., change text color, background color, borders, etc.), you should use the dedicated interaction parameters available for each button type:

backgroundColorPrimaryHover, labelColorPrimaryPressed, etc.
These allow granular changes to every visual aspect of the button.

This distinction gives you the flexibility to:

Apply a fast, unified effect across buttons using overlay colors, or
Create custom interaction styles on a per-component basis when needed.

Below is a comprehensive list of all the properties that can be customized for the button component.

Parameter	Description
backgroundColorPrimaryHover	Background color when hovered
backgroundColorPrimaryPressed	Background color when pressed
labelColorPrimaryHover	Label color (text) when hovered
labelColorPrimaryPressed	Label color (text) when pressed
borderColorPrimaryHover	Border color when hovered
borderColorPrimaryPressed	Border color when pressed
borderWidthPrimaryHover	Border width when hovered
borderWidthPrimaryPressed	Border width when pressed
backgroundColorSecondaryHover	Background color when hovered
backgroundColorSecondaryPressed	Background color when pressed
labelColorSecondaryHover	Label color (text) when hovered
labelColorSecondaryPressed	Label color (text) when pressed
borderColorSecondaryHover	Border color when hovered
borderColorSecondaryPressed	Border color when pressed
borderWidthSecondaryHover	Border width when hovered
borderWidthSecondaryPressed	Border width when pressed
backgroundColorTertiaryHover	Background color when hovered
backgroundColorTertiaryPressed	Background color when pressed
labelColorTertiaryHover	Label color (text) when hovered
labelColorTertiaryPressed	Label color (text) when pressed
borderColorTertiaryHover	Border color when hovered
borderColorTertiaryPressed	Border color when pressed
borderWidthTertiaryHover	Border width when hovered
borderWidthTertiaryPressed	Border width when pressed
backgroundColorOutlineHover	Background color when hovered
backgroundColorOutlinePressed	Background color when pressed
labelColorOutlineHover	Label color (text) when hovered
labelColorOutlinePressed	Label color (text) when pressed
borderColorOutlineHover	Border color when hovered
borderColorOutlinePressed	Border color when pressed
borderWidthOutlineHover	Border width when hovered
borderWidthOutlinePressed	Border width when pressed

Example of the interactive states of the button modified:

"styles": {
    "components": {
        "button": {
            "colorDefaultHover":"#e69da9",
            "colorDefaultPressed":"#a8641c",
            "colorInverseHover":"#b55ef0",
            "colorInversePressed":"#b1f6e3",
            "interactiveStates": {
                "backgroundColorPrimaryHover": "#F0E0F0",
                "backgroundColorPrimaryPressed": "#D0B0D0",
                "labelColorPrimaryHover": "#222222",
                "labelColorPrimaryPressed": "#111111",
                "borderColorPrimaryHover": "#A50050",
                "borderColorPrimaryPressed": "#800030",
                "borderWidthPrimaryHover": "3px",
                "borderWidthPrimaryPressed": "4px",
                "backgroundColorSecondaryHover": "#E0F0E0",
                "backgroundColorSecondaryPressed": "#B0D0B0",
                "labelColorSecondaryHover": "#222222",
                "labelColorSecondaryPressed": "#111111",
                "borderColorSecondaryHover": "#0050A5",
                "borderColorSecondaryPressed": "#003080",
                "borderWidthSecondaryHover": "3px",
                "borderWidthSecondaryPressed": "4px",
                "backgroundColorTertiaryHover": "#F0E0F0",
                "backgroundColorTertiaryPressed": "#D0B0D0",
                "labelColorTertiaryHover": "#222222",
                "labelColorTertiaryPressed": "#111111",
                "borderColorTertiaryHover": "#A50050",
                "borderColorTertiaryPressed": "#800030",
                "borderWidthTertiaryHover": "3px",
                "borderWidthTertiaryPressed": "4px",
                "backgroundColorOutlineHover": "#F0E0F0",
                "backgroundColorOutlinePressed": "#D0B0D0",
                "labelColorOutlineHover": "#222222",
                "labelColorOutlinePressed": "#111111",
                "borderColorOutlineHover": "#A50050",
                "borderColorOutlinePressed": "#800030",
                "borderWidthOutlineHover": "3px",
                "borderWidthOutlinePressed": "4px"
            }
        }
    }
}

Icon button¶

The icon button component is designed for actions that are represented primarily by an icon rather than text. It is commonly used for secondary or contextual actions.

Icon buttons help keep the interface clean and intuitive, especially in places where space is limited or where a visual symbol is more effective than a label.

Close button¶

CloseButtonDefault

Applies to

Every view components except Loading

You can fully customize the appearance of icon buttons to match your brand and user experience requirements.

This includes adjusting the icon color, background, border, and interactive states such as hover and pressed.

By fine-tuning these properties, you ensure that icon buttons remain visually consistent and accessible throughout your application.

Keep in mind that when you modify the icon button, the changes will apply across all views where it is used, regardless of whether the icon changes.

Below is a comprehensive list of all the properties that can be customized for the icon button component.

Parameter	Description
backgroundColorTertiary	Background color
iconColorTertiary	Icon color
borderColorTertiary	Border color
borderWidthTertiary	Border width
borderRadius	Border radius
colorHover	Color when hovered
colorPressed	Color when pressed

Example of icon button modified:

"styles": {
    "components": {
        "iconButton": {
            "backgroundColorTertiary": "#E5D0DA",
            "iconColorTertiary": "#A50050",
            "borderColorTertiary": "#A50050",
            "borderWidthTertiary": "5px",
            "borderRadius": "8px",
            "colorHover": "#F0E0F0",
            "colorPressed": "#D0B0D0"
        }
    }
}

IconButtonModified

Interactive states¶

Interactive states define how the icon button component visually responds to user interactions such as hovering or pressing.

These properties allow you to customize the appearance of the button in different states, ensuring a consistent and engaging user experience that aligns with your brand guidelines.

You can adjust colors, borders, and other visual aspects for each interaction state to provide clear feedback and improve usability.

Applies to

Every icon button

Below is a comprehensive list of all the properties that can be customized for the icon button component.

Parameter	Description
backgroundColorTertiaryHover	Background color when hovered
backgroundColorTertiaryPressed	Background color when pressed
iconColorTertiaryHover	Icon color when hovered
iconColorTertiaryPressed	Icon color when pressed
borderColorTertiaryHover	Border color when hovered
borderColorTertiaryHover	Border color when pressed
borderWidthTertiaryHover	Border width when hovered
borderWidthTertiaryPressed	Border width when pressed

Example of interactive states of the icon button modified:

"styles": {
    "components": {
        "iconButton": {
            "interactiveStates": {
                "backgroundColorTertiaryHover": "#F5F5F5",
                "backgroundColorTertiaryPressed": "#E5D0DA",
                "iconColorTertiaryHover": "#A50050",
                "iconColorTertiaryPressed": "#E5D0DA",
                "borderColorTertiaryHover": "#E5D0DA",
                "borderColorTertiaryPressed": "#A50050",
                "borderWidthTertiaryHover": "2px",
                "borderWidthTertiaryPressed": "4px"
            }
        }
    }
}

Spinner¶

The spinner component provides a visual indication that a process is ongoing, such as loading data or waiting for a response. It helps reassure users that the system is working and encourages them to wait until the current operation is complete.

Applies to

Loading

You can customize the appearance of the spinner to match your brand's style.

Below is a comprehensive list of all the properties that can be customized for the spinner component.

Parameter	Description
containerColor	Container color
progressColor	Progress color

Example of the spinner modified:

"styles": {
    "components": {
        "spinner": {
            "containerColor": "#E5D0DA",
            "progressColor": "#A50050"
        }
    }
}

The modal component is a box centered on the page that provides information about an action that has been taken, such as clicking a link, or appears automatically to display the current status of a process. It can also be triggered when an error occurs, offering an explanation of what went wrong. The modal may include buttons to allow the user to take further actions or dismiss the message.

ModalDefault

Applies to

You can customize the appearance of the modal to match your brand's style.

Below is a comprehensive list of all the properties that can be customized for the modal component.

Parameter	Description
backgroundColor	Background color
titleColor	Title color
descriptionColor	Description color
iconColorStart	Start default icon color
iconColorStartError	Start error icon color
iconColorStartSuccess	Start success icon color
iconColorEnd	End icon color
borderColor	Border color
borderWidth	Border width
borderRadius	Border radius

Example of the modal modified:

"styles": {
    "components": {
        "modal": {
            "backgroundColor": "#FFFFFF",
            "titleColor": "#A50050",
            "descriptionColor": "#333333",
            "iconColorStart": "#A50050",
            "iconColorStartError": "#D32F2F",
            "iconColorStartSuccess": "#388E3C",
            "iconColorEnd": "#666666",
            "borderColor": "#E0E0E0",
            "borderWidth": "1px",
            "borderRadius": "0px"
        },
    }
}

ModalModified

Link¶

The link component is a clickable text that opens a modal when clicked. Once is clicked, it becomes a visited link component.

linkDefault

Applies to

Esign

You can customize the appearance of the link to match your brand's style.

Default link¶

Below is a comprehensive list of all the properties that can be customized for the link component.

Parameter	Description
textColor	Text color
borderColor	Border color
borderWidth	Border width
colorHover	Hover color
colorPressed	Pressed color

Visited link¶

Below is a comprehensive list of all the properties that can be customized for the visited link component.

Parameter	Description
textColorVisited	Text color
borderColorVisited	Border color
contentColorVisited	Content color
widthBorderVisited	Border width

Example of the link modified:

"styles": {
    "components": {
        "link": {
            "textColor": "#A50050",
            "borderColor": "#A50050",
            "borderWidth": "1px",
            "colorHover": "#BF336F",
            "colorPressed": "#80003A",
            "textColorVisited": "#80003A",
            "borderColorVisited": "#80003A",
            "contentColorVisited": "#80003A",
            "widthBorderVisited": "1px"
        }
    }
}

linkModified

Interactive states¶

Interactive states define how the link component visually responds to user interactions such as hovering or pressing.

These properties allow you to customize the appearance of the button in different states, ensuring a consistent and engaging user experience that aligns with your brand guidelines.

You can adjust colors, borders, and other visual aspects for each interaction state to provide clear feedback and improve usability.

Applies to

Every link

Below is a comprehensive list of all the properties that can be customized for the link component.

Parameter	Description
backgroundColorHover	Background color when hovered
backgroundColorPressed	Background color when pressed
contentColorHover	Text color when hovered
contentColorPressed	Text color when pressed
borderColorHover	Border color when hovered
borderWidthHover	Border width when hovered
borderColorPressed	Border color when pressed
borderWidthPressed	Border width when pressed

Example of interactive states of the link modified:

"styles": {
    "components": {
        "link": {
            "interactiveStates": {
                "backgroundColorHover": "#F5F5F5",
                "backgroundColorPressed": "#E5D0DA",
                "contentColorHover": "#A50050",
                "contentColorPressed": "#E5D0DA",
                "borderColorHover": "#E5D0DA",
                "borderWidthHover": "2px",
                "borderColorPressed": "#A50050",
                "borderWidthPressed": "4px",
            }
        }
    }
}

Selector input¶

The selector input component renders the dropdown component when clicked, which displays a list of selectable items. Additionally, the selector input allows filtering these items through text input.

selectorDefault

Applies to

Document and country selector

General¶

Below is a comprehensive list of all the properties that can be customized for the general selector input component.

Parameter	Description
borderRadius	Hover color
colorHover	Hover color
colorPressed	Pressed color
iconColorEndHover	Arrow hover color
iconColorEndPressed	Arrow pressed color
scrollColor	Dropdown scrollbar color

Default¶

Below is a comprehensive list of all the properties that can be customized for the default selector input component.

Parameter	Description
labelColor	Label color
iconColorEnd	Arrow color
borderColor	Border color
borderWidth	Border width
backgroundColor	Background color

Selected input¶

Below is a comprehensive list of all the properties that can be customized for the selected selector input component.

Parameter	Description
labelColorSelected	Label color (Default)
borderColorSelected	Border color
borderWidthSelected	Border width

Placeholder¶

Below is a comprehensive list of all the properties that can be customized for the placeholder selector input component.

Parameter	Description
placeholderColorUntyped	Color (Untyped)
placeholderColorTyping	Color (Typing)
cursorBorderColor	Cursor indicator color
cursorBorderWidth	Cursor indicator width

Filled input¶

Below is a comprehensive list of all the properties that can be customized for the filled selector input component.

Parameter	Description
borderColorFilled	Border color
borderWidthFilled	Border width
placeholderColorFilled	Placeholder color

Example of the selector input modified:

"styles": {
    "components": {
        "input": {
            "borderRadius": "0px",
            "colorHover": "#FCE4EC",
            "colorPressed": "#F8BBD0",
            "iconColorEndHover": "#A50050",
            "iconColorEndPressed": "#80003A",
            "scrollColor": "#A50050",
            "labelColor": "#666666",
            "iconColorEnd": "#A50050",
            "borderColor": "#E0E0E0",
            "borderWidth": "1px",
            "backgroundColor": "#FFFFFF",
            "labelColorSelected": "#A50050",
            "borderColorSelected": "#A50050",
            "borderWidthSelected": "1px",
            "placeholderColorUntyped": "#999999",
            "placeholderColorTyping": "#A50050",
            "cursorBorderColor": "#A50050",
            "cursorBorderWidth": "2px",
            "borderColorFilled": "#A50050",
            "borderWidthFilled": "1px",
            "placeholderColorFilled": "#A50050"
        },
    }
}

inputModified

Interactive states¶

Interactive states define how the selector input component visually responds to user interactions such as hovering or pressing.

These properties allow you to customize the appearance of the button in different states, ensuring a consistent and engaging user experience that aligns with your brand guidelines.

You can adjust colors, borders, and other visual aspects for each interaction state to provide clear feedback and improve usability.

Applies to

Every selector input

Below is a comprehensive list of all the interactive state properties that can be customized for the selector input component.

Parameter	Description
backgroundColorHover	Default input background color (Hover)
backgroundColorPressed	Default input background color (Pressed)
backgroundColorSelectedHover	Selected input background color (Hover)
backgroundColorSelectedPressed	Selected input background color (Pressed)
backgroundColorFilledHover	Filled input background color (Hover)
backgroundColorFilledPressed	Filled input background color (Pressed)
borderColorHover	Default input border color (Hover)
borderWidthHover	Default input border width (Hover)
borderColorPressed	Default input border color (Pressed)
borderWidthPressed	Default input border width (Pressed)
borderColorSelectedHover	Selected input border color (Hover)
borderWidthSelectedHover	Selected input border width (Hover)
borderColorSelectedPressed	Selected input border color (Pressed)
borderWidthSelectedPressed	Selected input border width (Pressed)
borderColorFilledHover	Filled input border color (Hover)
borderWidthFilledHover	Filled input border width (Hover)
borderColorFilledPressed	Filled input border color (Pressed)
borderWidthFilledPressed	Filled input border width (Pressed)

Example of interactive states of the link modified:

"styles": {
    "components": {
        "input": {
            "interactiveStates": {
                "backgroundColorHover": "#b8135f",
                "backgroundColorPressed": "#8f0044",
                "backgroundColorSelectedHover": "#a50050cc",
                "backgroundColorSelectedPressed": "#730036",
                "backgroundColorFilledHover": "#a5005080",
                "backgroundColorFilledPressed": "#a5005099",
                "borderColorHover": "#a50050",
                "borderWidthHover": "2px",
                "borderColorPressed": "#8f0044",
                "borderWidthPressed": "2px",
                "borderColorSelectedHover": "#c2186c",
                "borderWidthSelectedHover": "2px",
                "borderColorSelectedPressed": "#6a0030",
                "borderWidthSelectedPressed": "3px",
                "borderColorFilledHover": "#a5005070",
                "borderWidthFilledHover": "1px",
                "borderColorFilledPressed": "#a5005099",
                "borderWidthFilledPressed": "2px"
            }
        }
    }
}

The dropdown component is displayed when the input selector component is clicked, showing a list of items that can be selected.

dropdownDefault

Applies to

Document and country selector

Below is a comprehensive list of all the properties that can be customized for the dropdown component.

Parameter	Description
backgroundColor	Background color
borderColor	Border color
borderRadius	Border radius
borderWidth	Border width
itemTitleColor	Item title color
itemTitleColorSelected	Item title color selected
itemBackgroundColor	Item background color
itemBackgroundColorSelected	Item background color selected
itemBackgroundColorHover	Item background color (Hover)
itemBackgroundColorPressed	Item background color (Pressed)

Example of the selector input modified:

"styles": {
    "components": {
        "dropdown": {
            "backgroundColor": "#FFFFFF",
            "borderColor": "#A50050",
            "borderRadius": "0px",
            "borderWidth": "2px",
            "itemTitleColor": "#333333",
            "itemTitleColorSelected": "#FFFFFF",
            "itemBackgroundColor": "#FFFFFF",
            "itemBackgroundColorSelected": "#A50050",
            "itemBackgroundColorHover": "#E48CB1"
        }
    }
}

dropdownModified

Interactive states¶

Interactive states define how the selector input component visually responds to user interactions such as hovering or pressing.

These properties allow you to customize the appearance of the button in different states, ensuring a consistent and engaging user experience that aligns with your brand guidelines.

You can adjust colors, borders, and other visual aspects for each interaction state to provide clear feedback and improve usability.

Applies to

Every dropdown

Below is a comprehensive list of all the interactive state properties that can be customized for the selector input component.

Parameter	Description
itemBackgroundColorHover	Item background color (Hover)
itemBackgroundColorPressed	Item background color (Pressed)
itemTitleColorHover	Item title color (Hover)
itemTitleColorPressed	Item title color (Pressed)
itemBackgroundColorSelectedHover	Item selected background color (Hover)
itemBackgroundColorSelectedPressed	Item selected background color (Pressed)
itemTitleColorSelectedHover	Item selected title color (Hover)
itemTitleColorSelectedPressed	Item selected title color (Pressed)

Example of interactive states of the link modified:

"styles": {
    "components": {
        "dropdown": {
            "interactiveStates": {
                "itemBackgroundColorHover": "#E48CB1",
                "itemBackgroundColorPressed": "#D26C98",
                "itemTitleColorHover": "#333333",
                "itemTitleColorPressed": "#222222",
                "itemBackgroundColorSelectedHover": "#B81762",
                "itemBackgroundColorSelectedPressed": "#8A0040",
                "itemTitleColorSelectedHover": "#FFFFFF",
                "itemTitleColorSelectedPressed": "#FFFFFF"
            }
        }
    }
}

Snackbar¶

The snackbar component provides a visual feedback of what to do, such as comprehensive instructions. It helps the users that the system is waiting for an iteraction to bein able to complete the process.

SnackbarDefault

Applies to

Video name and surname capture

You can customize the appearance of the snackbar to match your brand's style.

Below is a comprehensive list of all the properties that can be customized for the snackbar component.

Parameter	Description
backgroundColor	Background color
textColor	text color
borderColor	border color
borderWidth	border width

Example of the snackbar modified:

"styles": {
    "components": {
        "snackbar": {
            "backgroundColor": "#A50050",
            "textColor": "#E5D0DA",
            "borderColor": "#A50050",
            "borderWidth": "2px"
        }
    }
}

SnackbarModified

Cards¶

The Card component is a box that can be clicked and typically triggers an action, such as navigating to a different page to indicate the new context.

defaultCard

Applies to

Below is a comprehensive list of all the properties that can be customized for the card component.

Parameter	Description
backgroundColor	Background color
iconColor	Icon color
titleColor	Title color
colorHover	Hover color
colorPressed	Pressed color
borderColor	Border color
borderWidth	Border width
borderRadius	Border radius

Example of the card modified:

"styles": {
    "components": {
        "card": {
            "backgroundColor": "#FFFFFF",
            "iconColor": "#A50050",
            "titleColor": "#A50050",
            "colorHover": "#FCE4EC",
            "colorPressed": "#F8BBD0",
            "borderColor": "#E0E0E0",
            "borderWidth": "1px",
            "borderRadius": "12px"
        }
    }
}

cardModified

Interactive states¶

Interactive states define how the card component visually responds to user interactions such as hovering or pressing.

These properties allow you to customize the appearance of the button in different states, ensuring a consistent and engaging user experience that aligns with your brand guidelines.

You can adjust colors, borders, and other visual aspects for each interaction state to provide clear feedback and improve usability.

Applies to

Every card

Below is a comprehensive list of all the interactive state properties that can be customized for the card component.

Parameter	Description
backgroundColorHover	Card background color (Hover)
backgroundColorPressed	Card background color (Pressed)
titleColorHover	Card title color (Hover)
titleColorPressed	Card title color (Pressed)
iconColorHover	Card icon color (Hover)
iconColorPressed	Card icon color (Pressed)
borderColorHover	Card border color (Hover)
borderWidthHover	Card border width (Hover)
borderColorPressed	Card border color (Pressed)
borderWidthPressed	Card border width (Pressed)

Example of interactive states of the link modified:

"styles": {
    "components": {
       "card": {
            "interactiveStates": {
                "backgroundColorHover": "#fce6ee",
                "backgroundColorPressed": "#f8d4e1",
                "titleColorHover": "#a50050",
                "titleColorPressed": "#8a0044",
                "iconColorHover": "#c2186c",
                "iconColorPressed": "#730036",
                "borderColorHover": "#a5005080",
                "borderWidthHover": "1px",
                "borderColorPressed": "#a5005099",
                "borderWidthPressed": "2px"
            }
        }
    }
}

Checkbox¶

The Checkbox component allows performing binary actions to either select or deselect a value.

defaultCard

Applies to

Esign

General¶

Below is a comprehensive list of all the properties that can be customized for the checkbox component.

Parameter	Description
colorHover	Hover color
colorPressed	Pressed color

Unselected state¶

Below is a comprehensive list of all the properties that can be customized for the unselected checkbox component.

Parameter	Description
borderColorUnselected	Default border color
borderWidthUnselected	Default border width
borderColorUnselectedHover	Hover border color
borderWidthUnselectedHover	Hover border width
borderColorUnselectedPressed	Pressed border color
borderWidthUnselectedPressed	Pressed border width
backgroundColorUnselected	Default background color
backgroundColorUnselectedHover	Hover background color
backgroundColorUnselectedPressed	Pressed background color

Selected state¶

Below is a comprehensive list of all the properties that can be customized for the selected checkbox component.

Parameter	Description
backgroundColorSelected	Default background color
backgroundColorSelectedHover	Hover background color
backgroundColorSelectedPressed	Pressed background color
iconColorSelected	Default icon color
iconColorSelectedHover	Hover icon color
iconColorSelectedPressed	Pressed icon color

Label¶

Below is a comprehensive list of all the properties that can be customized for the label of the checkbox component.

Parameter	Description
labelColorUnselected	Unselected default label color
labelColorSelected	Selected default label color

Example of the checkbox modified:

"styles": {
    "components": {
        "checkbox": {
            "colorHover": "#BF336F",
            "colorPressed": "#80003A",
            "borderColorUnselected": "#CCCCCC",
            "borderWidthUnselected": "1px",
            "borderColorUnselectedHover": "#A50050",
            "borderWidthUnselectedHover": "1px",
            "borderColorUnselectedPressed": "#80003A",
            "borderWidthUnselectedPressed": "1px",
            "backgroundColorUnselected": "#FFFFFF",
            "backgroundColorUnselectedHover": "#FCE4EC",
            "backgroundColorUnselectedPressed": "#F8BBD0",
            "backgroundColorSelected": "#A50050",
            "backgroundColorSelectedHover": "#BF336F",
            "backgroundColorSelectedPressed": "#80003A",
            "iconColorSelected": "#FFFFFF",
            "iconColorSelectedHover": "#FFFFFF",
            "iconColorSelectedPressed": "#FFFFFF",
            "labelColorUnselected": "#333333",
            "labelColorSelected": "#A50050",
        }
    }
}

checkboxModified

Component customization¶

Overview¶

Texts¶

Multiple document capture¶

Recommendations¶

Titles and Subtitles¶

Feedback and system messages¶

Readability and accessibility¶

Media¶

Recommendations¶

File format¶

File weight and performance¶

Descriptive and Accessible Visuals¶

Styles¶

Three Levels of Customization¶

1. Theme Level (Global)¶

2. Component Level¶

3. Interactive States¶

Recommendations¶

Typography¶

Colors¶

Accessibility and Contrast¶

Theme Level¶

customFonts¶

Main Properties¶

How to Configure Custom Fonts¶

1. Obtain the Font File URL (.woff2)¶

2. Create the Entry in customFonts¶

Component Level¶

Header¶

Button¶

General¶

Primary button¶

Primary button active¶

Primary button disabled¶

Secondary Button¶

Tertiary Button¶

Outline Button¶

Interactive states¶

Default behavior¶

When to use these parameters¶

When to use specific parameters instead¶

Icon button¶

Close button¶

Interactive states¶

Spinner¶

Modal¶

Link¶

Default link¶

Visited link¶

Interactive states¶

Selector input¶

General¶

Default¶

Selected input¶

Placeholder¶

Filled input¶

Interactive states¶

Dropdown¶

Interactive states¶

Snackbar¶

Cards¶

Interactive states¶

Checkbox¶

General¶

Unselected state¶

Selected state¶

Label¶

1. Obtain the Font File URL (`.woff2`)¶

2. Create the Entry in `customFonts`¶