Custom Theming for Embedded Experiences
Symmetry I-9 supports custom theming for embedded experiences, allowing you to apply your branding to the user interfaces embedded within your platform. Theming applies to both embedded modules included with Symmetry I-9:
- Employee embedded experience: the interface end users complete to submit Form I-9
- Administrator embedded experience: the interface you use to review submissions and take action on E-Verify cases
Custom theming enables you to deliver a branded, cohesive experience across these embedded modules while preserving established UI behavior and accessibility standards.
Theming Scope and Inheritance Model
Symmetry I-9 supports a two-tier theming model that lets you manage branding at either the account (service provider) level or the employer level.
Account-Level Themes
An account-level theme acts as the default theme for your account.
- When applied, the theme cascades to all employers under your account
- Updates and deletions at this level affect all employers
- Account-level
GEToperations return the theme from the first available employer domain
Use account-level theming when you want a consistent brand experience across all employers you manage.
Employer-Level Themes
An employer-level theme applies only to a specific employer.
- Employer-level themes override any account-level theme for that employer
- Updates affect only the specified employer
- Other employers continue to use the account-level theme (if present) or their own employer-level theme
Use employer-level theming when you need employer-specific branding.
How It Works
Custom themes use a JSON configuration format that automatically translates into CSS variables applied globally across all application pages. The system uses nested JSON structures to organize style properties logically, making theme management straightforward and maintainable.
Supported customization
To ensure usability and visual consistency, only a defined set of styling properties can be modified.
Unsupported values may still be processed as CSS variables but do not affect rendered UI elements.
Supported Elements
Theming allows you to customize specific visual elements across six categories. These settings apply consistently across both embedded experiences.
Body Text and Typography
Controls the default text styling body used throughout the embedded interfaces:
| Attribute | Type | Description |
|---|---|---|
fontSize | string | Base font size for body text (for example,15px). |
color | string | Base text color for body content. (for example,#F54927) |
Links & Navigation
Defines how links (link) appear and respond to user interaction:
| Attribute | Type | Description |
|---|---|---|
color | string | Default link color |
decoration | string | Default text decoration (for example, underline or none) |
hoverColor | string | Link color on hover |
hoverDecoration | string | Hover text decoration |
Headings (H1–H6)
Provides consistent styling for all heading levels in the headings object (h1, h2, h3, h4, h5, h6):
| Attribute | Type | Description |
|---|---|---|
| fontSize | string | Font size for the heading level |
| fontWeight | string | Weight of the heading text |
| color | string | Color of the heading text |
Alerts & Notifications
Customizes alerts and notifications using variant-based styling:
| Attribute | Type | Description |
|---|---|---|
borderWidth | string | Border thickness for alerts |
borderRadius | string | Corner radius for alert containers |
variants | object | Color and border settings for alert variants (possible values:primary, info, danger, success, warning) |
variants.backgroundColor | string | Background color for the alert variant |
variants.borderColor | string | Border color for the alert variant |
Buttons & Interactive Elements
Controls the appearance of buttons across variants and states:
| Attribute | Type | Description |
|---|---|---|
borderRadius | string | Button corner radius within alerts |
variants | object | Per-variant button styling |
variants.backgroundColor | string | Background color for the button |
variants.activeBackgroundColor | string | Background color when the button is active or pressed |
default | string | Border color used for the default button style |
Form Controls & Inputs
Ensures consistent styling for user input formControl elements:
| Attribute | Type | Description |
|---|---|---|
borderColor | string | Border color applied to inputs and form fields |
borderRadius | string | Corner radius for form fields |
focusBorderColor | string | Border color when a field is focused |
Updated 3 days ago
