Sites Styling Guide

White background

Wicket Mint (#70E5CF)

Transparent Background

Averta Std

This targets the wrapper div, which will be applied to the whole application.
(This is applicable for adding background color and defining the font family.)

Containers are the main wrapper classes on the page. This targets all the containers (currently in Manage, Add, and Preview Selfies)

This targets containers in the selfie pages.

This targets all the cards on the site.

This targets name cards in the campaign and profile list pages.

This targets all the cards in the profile pages.

This targets campaign cards (i.e. list of campaigns).

This targets enrolled campaign cards  (i.e. list of campaigns).

This targets unenrolled campaign cards (i.e. list of campaigns).

This targets the empty message card.

This targets the selfie container card 
(i.e. list of selfies on the Manage Selfies page).

This targets the steps in the campaigns.

This targets the completed step card in the campaign.

This targets the completed step text in the card .

This targets the completed step button in the card.

This targets the cards on the ticket page.

This targets the input text wrapper class. As this is a wrapper class it targets all the input components, (i.e label, filled box, error)
To target a specific component, the component must be nested in the class.
     Example
        .wik-text-input  input {
        background-color: transparent;
        border: 1px solid  rgb(15, 94, 40);
        }

This targets the main button type.

This targets a disabled button and can be used in conjunction with .wik-btn.
(example: .wik-btn .disabled { … })

[DEPRECATED] This targets the main button type.

The icon in the header (image on the right-hand side).

Text in the breadcrumb.

Banners provide messages on the page. For example, the “last selfie cannot be deleted” message banner. This targets all the banners in the site.
*Note: this does not refer to the alert message/toaster

Banner on the selfie page.

This targets the entire EnrollKit page container. It wraps all content related to the facial enrollment process. It controls the outermost border of the enrollment interface (blue border in the screenshot).

This targets the consent form container within the enrollment interface. It controls the background and border of the area containing the photo guidance instructions, example photos, privacy policy checkbox, and the "TAKE A PHOTO" button (red border around the entire content area).

This targets the container for the photo guidance icons section. It wraps all instruction icons (Plain background, Use neutral expression, Center your face, Even lightning).

This targets each individual photo guidance icon box. It controls the background, border, and text color for each instruction box. The SVG elements inside each will inherit styling for icons.

This targets the bottom section of the consent form containing the privacy policy checkbox and the "TAKE A PHOTO" button. It controls background color, borders, and text color for this area (green border in the screenshot).

This specifically targets the checkbox input for privacy policy consent (yellow border in the screenshot).

This specifically targets the privacy policy link text (appears in purple in the screenshot).

This targets the "TAKE A PHOTO" button. It controls the border color and contains nested selectors that affect text and icon colors within the button (red border and text in the screenshot).