Theming
Overview
You can customize the ID and Selfie flow visuals without forking components by passing uiConfig to renderCaptureId and renderCaptureFace . Theming is done via design tokens applied by the design-system ThemeProvider. If you provide uiConfig.theming.designTokens, those tokens are used; otherwise, tokens are derived from your dashboard theme.
const UiConfig = {
branding: {
logo: { src: 'www.youlogourl.com', height: '50px' },
hideFooterBranding: true,
},
theming: {
designTokens: {
colors: {
brand: {
500: '#fda9cc',
},
positive: {
500: '#5ba66e',
},
negative: {
500: '#b80046',
}
},
button: {
primary: {
surface: { default: '#fda9cc', hover: '#fa91bd' },
text: { default: '#ffffff' },
}
},
typography: {
fontSize: { base: '16px', lg: '1.125rem' },
fontWeight: { medium: '300', bold: '700' }
}
}
},
closeButton: { show: true, position: 'right' }
};Minimal usage
const UiConfig = {...};
incode.renderCaptureId(container, {
session: session,
onSuccess: (e) => { nextStep(); },
onError: nextStep,
forceIdV2: true,
uiConfig: UiConfig,
});
Examples
You can override any value with your own.
Brand Overrides
{
colors: {
brand: { 500: '#0041d9', 600: '#0036b3' }
}
}
Buttons
{
button: {
primary: {
surface: { default: '#0041d9', hover: '#0036b3' },
text: { default: '#ffffff' },
border: { default: '#0041d9' }
}
}
}Tokens Reference
{
primitives: {
color: {
neutral: {
light: '#ffffff',
dark: '#000000'
},
brand: {
50: '#e5f0ff',
200: '#99c3ff',
300: '#66a6ff',
400: '#3388ff',
500: '#006aff',
600: '#0055cc',
900: '#21273b'
},
gray: {
50: '#fcfcfd',
100: '#ebecef',
200: '#c6c8d2',
300: '#a3a8B8',
500: '#60667c',
700: '#3a3e4b',
800: '#262831',
900: '#14151a'
},
brandSecondary: {
50: '#f2e2fe',
500: '#820AD1'
},
positive: {
50: '#E4FBF0',
600: '#189F60',
800: '#0C5030'
},
warn: {
50: '#FFF7EB',
400: '#FFB647',
500: '#ff9900',
950: '#523100'
},
negative: {
50: '#FFF0F0',
500: '#FF5A5F',
600: '#E71111',
950: '#240001'
}
},
typography: {
fontSize: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '3.75rem'
},
fontWeight: {
normal: '400',
medium: '500',
semibold: '600',
bold: '700'
},
lineHeight: {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2'
},
letterSpacing: {
tighter: '-2px',
tight: '-1px',
normal: '0',
wide: '1px',
wider: '2px',
widest: '4px'
},
fontFamily: {
sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace']
}
},
spacing: {
'-1': '-0.25rem',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '1.75rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
'40': '10rem',
'48': '12rem',
'56': '14rem',
'64': '16rem'
},
shadow: {
none: 'none',
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
base: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)'
},
animation: {
duration: {
fast: '150ms',
normal: '300ms',
slow: '500ms'
},
easing: {
linear: 'linear',
ease: 'ease',
'ease-in': 'ease-in',
'ease-out': 'ease-out',
'ease-in-out': 'ease-in-out'
}
}
},
reference: {
colors: {
brand: {
brand: '#006aff'
},
surface: {
neutral: {
light: '#ffffff',
dark: '#000000'
},
primary: {
'50': '#e5f0ff',
'400': '#3388ff',
'500': '#006aff',
'600': '#0055cc'
},
secondary: {
'0': '#ffffff',
'50': '#fcfcfd',
'100': '#ebecef',
'200': '#c6c8d2',
'300': '#a3a8B8',
'500': '#60667c',
'700': '#3a3e4b',
'800': '#262831',
'900': '#14151a'
},
statusSoft: {
negative: '#FFF0F0',
warning: '#FFF7EB',
positive: '#E4FBF0'
},
status: {
negative: '#E71111',
warning: '#ff9900',
positive: '#189F60'
}
},
icon: {
primary: '#60667c',
secondary: '#262831',
accent: '#006aff',
negative: '#FF5A5F',
warning: '#ff9900',
positive: '#189F60',
invert: '#ffffff'
},
border: {
primary: '#ebecef',
disabled: '#a3a8B8',
focus: '#60667c',
accent: '#006aff',
negative: '#FF5A5F',
warning: '#ff9900',
positive: '#189F60'
},
text: {
body: {
primary: '#262831',
secondary: '#60667c',
tertiary: '#a3a8B8',
invert: '#ffffff'
},
brand: {
accent: '#006aff',
brandSecondary: '#820AD1'
},
status: {
negative: '#FF5A5F',
warning: '#ff9900',
positive: '#189F60'
}
}
},
spacing: {
component: {
xs: '0.25rem',
sm: '0.5rem',
md: '0.75rem',
lg: '1rem',
xl: '1.5rem'
},
layout: {
xs: '1rem',
sm: '1.5rem',
md: '2rem',
lg: '3rem',
xl: '4rem',
xxl: '6rem'
},
container: {
xs: '0.75rem',
sm: '1rem',
md: '1.5rem',
lg: '2rem',
xl: '3rem'
},
stack: {
xs: '0.5rem',
sm: '0.75rem',
md: '1rem',
lg: '1.5rem',
xl: '2rem'
},
inline: {
xs: '0.25rem',
sm: '0.5rem',
md: '0.75rem',
lg: '1rem'
}
},
typography: {
heading: {
h1: { fontSize: '2.25rem', fontWeight: '700', lineHeight: '1.25' },
h2: { fontSize: '1.875rem', fontWeight: '700', lineHeight: '1.25' },
h3: { fontSize: '1.5rem', fontWeight: '600', lineHeight: '1.375' },
h4: { fontSize: '1.25rem', fontWeight: '600', lineHeight: '1.375' },
h5: { fontSize: '1.125rem', fontWeight: '600', lineHeight: '1.5' },
h6: { fontSize: '1rem', fontWeight: '600', lineHeight: '1.5' }
},
body: {
large: { fontSize: '1.125rem', fontWeight: '400', lineHeight: '1.625' },
default: { fontSize: '1rem', fontWeight: '400', lineHeight: '1.5' },
small: { fontSize: '0.875rem', fontWeight: '400', lineHeight: '1.5' }
},
ui: {
buttonLarge: { fontSize: '1rem', fontWeight: '600', lineHeight: '1' },
buttonDefault: { fontSize: '0.875rem', fontWeight: '600', lineHeight: '1' },
buttonSmall: { fontSize: '0.75rem', fontWeight: '500', lineHeight: '1' },
label: { fontSize: '0.875rem', fontWeight: '500', lineHeight: '1.5' },
caption: { fontSize: '0.75rem', fontWeight: '400', lineHeight: '1.5' }
},
code: {
inline: { fontSize: '0.875rem', fontFamily: ['Fira Code', 'monospace'], fontWeight: '400' },
block: { fontSize: '0.875rem', fontFamily: ['Fira Code', 'monospace'], fontWeight: '400', lineHeight: '1.625' }
}
}
},
color: {
brand: {
brand: '#006aff'
},
surface: {
neutral: {
light: '#ffffff',
dark: '#000000'
},
primary: {
'50': '#e5f0ff',
'400': '#3388ff',
'500': '#006aff',
'600': '#0055cc'
},
secondary: {
'0': '#ffffff',
'50': '#fcfcfd',
'100': '#ebecef',
'200': '#c6c8d2',
'300': '#a3a8B8',
'500': '#60667c',
'700': '#3a3e4b',
'800': '#262831',
'900': '#14151a'
},
statusSoft: {
negative: '#FFF0F0',
warning: '#FFF7EB',
positive: '#E4FBF0'
},
status: {
negative: '#E71111',
warning: '#ff9900',
positive: '#189F60'
}
},
icon: {
primary: '#60667c',
secondary: '#262831',
accent: '#006aff',
negative: '#FF5A5F',
warning: '#ff9900',
positive: '#189F60',
invert: '#ffffff'
},
border: {
primary: '#ebecef',
disabled: '#a3a8B8',
focus: '#60667c',
accent: '#006aff',
negative: '#FF5A5F',
warning: '#ff9900',
positive: '#189F60'
},
text: {
body: {
primary: '#262831',
secondary: '#60667c',
tertiary: '#a3a8B8',
invert: '#ffffff'
},
brand: {
accent: '#006aff',
brandSecondary: '#820AD1'
},
status: {
negative: '#FF5A5F',
warning: '#ff9900',
positive: '#189F60'
}
}
},
typography: {
fontSize: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '3.75rem'
},
fontWeight: {
normal: '400',
medium: '500',
semibold: '600',
bold: '700'
},
lineHeight: {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2'
},
letterSpacing: {
tighter: '-2px',
tight: '-1px',
normal: '0',
wide: '1px',
wider: '2px',
widest: '4px'
},
fontFamily: {
sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace']
}
},
spacing: {
'-1': '-0.25rem',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '1.75rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
'40': '10rem',
'48': '12rem',
'56': '14rem',
'64': '16rem'
},
button: {
primary: {
surface: {
default: '#006aff',
hover: '#3388ff',
pressed: '#0055cc',
disabled: '#ebecef'
},
text: {
default: '#ffffff',
disabled: '#a3a8B8'
},
border: {
default: '#006aff',
hover: '#3388ff',
pressed: '#0055cc',
disabled: '#ebecef'
}
},
secondary: {
surface: {
default: '#ffffff',
hover: '#e5f0ff',
pressed: '#0055cc',
disabled: '#c6c8d2'
},
text: {
default: '#006aff',
disabled: '#60667c'
},
border: {
default: '#006aff',
hover: '#3388ff',
pressed: '#0055cc',
disabled: '#ebecef'
}
}
}
}
Updated 1 day ago