Branding

Customize the visual appearance of your verification flows

Branding allows you to customize the look and feel of the Player — the interface your users interact with during verification flows. You can adjust colors, typography, spacing, and border radius to match your brand identity.

Branding is configured per organization and applies to all flows within that organization.

---

Manage branding

1. Log in to the IDnow dashboard at Loading....
2. Go to Settings > Branding.
3. Select Edit branding to open the JSON editor.

---

Configure branding

Branding is defined as a JSON object. All properties are optional — you only need to include the values you want to customize.

{
  "customTheme": {
    "color": { ... },
    "font": { ... },
    "radius": { ... },
    "spacing": { ... }
  }
}

Colors

Colors must be specified in HSL format only. Hex and RGB values are not supported.

Accepted formats:

• Raw HSL: "210, 79%, 40%"
• HSL function: "hsl(0, 100%, 50%)"
• HSLA function: "hsla(0, 100%, 50%, 0.5)"

Brand colors

Property	Description
primary	Main brand color for buttons and links
primary_variant	Darker variant for hover states
secondary	Secondary accent color
secondary_variant	Darker variant of secondary color
error	Error and destructive action color
processing	Processing and warning states
success	Success and confirmation states
active	Active/selected state color

Grey scale

Eight discrete levels: 100, 200, 300, 400, 500, 600, 800, 900 (note: 700 is not available), used for backgrounds, borders, and text.

Typography

Font family

Property	Description
heading	Font for headings and titles (CSS font-family value)
content	Font for body text (CSS font-family value)

Font size

Eight levels from 00 (smallest, 0.625rem) to 6 (largest, 2rem). Values must include a CSS unit (px, rem, em, %, pt, vh, vw).

Font weight

Property	Description
regular	Normal text weight (100–900 or normal, bold, lighter, bolder)
medium	Bold/emphasized text weight (100–900 or normal, bold, lighter, bolder)

Border radius

Four levels from 1 (small, for buttons and inputs) to 4 (extra large, for modals). Values must include a CSS unit.

Spacing

Seven levels from 0_5 (4px) to 6 (48px). Values must include a CSS unit.

---

Minimal example

Customize only the primary brand color:

{
  "customTheme": {
    "color": {
      "brand": {
        "primary": "210, 79%, 40%"
      }
    }
  }
}

---

Editor features

The branding editor provides:

• Insert template — Adds a minimal theme template as a starting point
• Upload JSON — Import a configuration from a file
• View schema — Opens a reference modal with all available properties and examples
• Copy — Copies the current JSON to the clipboard
• Clear — Clears the editor content
• Format — Formats the JSON (available when there are unsaved changes and the JSON is valid)
• Reset — Reverts to the last saved configuration (available when there are unsaved changes)
• Validation — Real-time JSON syntax and schema validation with error details

You can also use the Customization Playground to visually build a theme configuration, then upload the generated JSON.

---

Notes

• All properties are optional. An empty object {} clears any custom branding.
• Branding applies at the organization level to all flows.
• Changes take effect on the next flow session.