For most visual customization needs, use the Branding & Styling tab — it covers colors, fonts, logo, field style, and button appearance without writing any code. Use CSS only when you need to go beyond what the Styling tab offers.
To inject CSS, add a <style> block in the Head code panel of the Custom code tab. See Custom Code for details.
📘 CSS changes apply to the live Privacy Center page and are not reflected in the builder preview. Always test on the draft version before publishing.
Selector What it targets bodyThe full page background .app__headerThe hero block at the top of the form .app__contentThe white form card container .app__footerThe footer area below the form
Selector What it targets .form__company-iconThe company logo image .form__titleThe form title text .form__subtitleThe form description/subtitle text
Selector What it targets .form__labelField labels above inputs .form__detailsThe form fields section below the rights selector .form__custom-question-titleLabels on custom elements .input__headerInput field header label .dropdown__headerDropdown field header label .file__titleFile upload field label
Selector What it targets .input__elementText input fields input.input__element:focusText input on focus input.input__element:hoverText input on hover .input__errorValidation error message below inputs .input__element::placeholderPlaceholder text in inputs
Selector What it targets .dropdown__wrapperDropdown container .dropdown__wrapper:focusDropdown on focus .dropdown__placeholderDropdown placeholder text .dropdown__optionIndividual dropdown option .dropdown__option:hoverDropdown option on hover .dropdown__option--activeCurrently selected dropdown option
Selector What it targets .form__rightsThe rights card container .form__request-typeThe rights selection section .form__request-itemIndividual right card .form__radio-hidden:checked + .form__request-itemSelected right card state .form__request-item-titleRight card title text .form__request-item-subtitleRight card subtitle/description text
Selector What it targets .button-primaryThe Submit button .button-primary spanSubmit button text .button-primary:hover:not(.button-primary__disabled)Submit button hover state
The screen shown after a data subject successfully submits a request.
Selector What it targets .sent__titleThe confirmation screen title
Here's a starting point you can paste into the Head code panel and adapt:
HTML
<style>
/* Background */
body { background: #f9f9f9; }
.app__header { background: #1a1a2e; }
/* Logo */
.form__company-icon { width: 120px; height: 60px; object-fit: contain; }
/* Title and text */
.form__title { color: #1a1a2e; }
.form__subtitle { font-size: 16px; color: #555; }
/* Labels */
.form__label,
.form__custom-question-title { color: #333; font-weight: 600; }
/* Input fields */
.input__element,
.dropdown__wrapper { border-color: #ccc; border-radius: 8px; }
.input__element:focus,
.dropdown__wrapper:focus { border-color: #6c63ff; }
/* Submit button */
.button-primary { background-color: #6c63ff; border-radius: 50px; }
.button-primary span { color: #fff; }
.button-primary:hover:not(.button-primary__disabled) { background-color: #574fd6; }
/* Rights cards */
.form__radio-hidden:checked + .form__request-item { border: 2px solid #6c63ff; }
</style>