Customizing Your Osano DSAR Form

How styling works

You can restyle almost everything on your DSAR form, from a quick color swap with no code to a full redesign with your own stylesheet. Changes stack in three layers, and each one overrides the one before it.

1. Palette (no code). Set brand colors in the form's styling settings in Osano. Good for most customers.
2. Design tokens (light CSS). Redefine Osano's --osano- CSS variables in your stylesheet. One line can recolor every button, border, or font on the form.
3. Component classes (full CSS). Write rules against the form's osano- class names to change layout, corners, spacing, hover effects, and visibility.

Adding your stylesheet

1. Write a .css file and host it at a public https:// URL your site visitors can reach.
2. Paste that URL into the stylesheet URL field in the form's styling settings.
3. Save, then hard refresh the form preview (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows).

Your stylesheet loads after Osano's built-in styles, so your rules win whenever the selectors are equally specific. If the URL can't be read, Osano skips it silently and shows the default form. Full technical reference: Customizing the DSAR Form.

Palette settings (no code)

These eight settings live in the form's styling settings in Osano. Set them even if you also use a stylesheet: Osano uses the background color to pick readable arrow and checkmark colors, and CSS alone can't do that.

Tip: if your primary color is a medium gray or a muted tone, set the readable color yourself. The auto-pick leans toward white text.

Color tokens

Redefine any of these inside a :root { } block in your stylesheet. Each one recolors everything that uses it across the form. Fill in the last column as you plan your theme.

:root {
  --osano-color-primary: #0a7cff;
  --osano-color-bg-light-gray: #f4f7fb;
}

Some pieces of the form, like individual cards, may set their own background directly. If a token change doesn't show up on a piece, style that piece with its class (see Component classes).

Shape and typography tokens

These control corners, shadows, and type across the whole form. Radius values accept any CSS border-radius, so you can use four values for asymmetric corners (for example 0 24px 0 24px).

Corners and shadow

Typography

The form ships with DM Sans. To use your own font, load it at the top of your stylesheet with @import (for example from Google Fonts), then set --osano-font-family.

Careful with caption letter spacing. Request descriptions use it, so wide values like 1.5px make them hard to read.

Component classes

Every osano- class below is a stable hook you can style safely. Ignore the random-looking classes next to them (like VVnr1s_k); those are generated and can change with any Osano release.

To beat Osano's defaults without !important, start your selectors with .osano-root, for example .osano-root .osano-card { }.

Double class names (a / b) point at the same element. Use either one.

Elements without an osano- class

A few elements only carry a generated class. Don't target those, because they break on the next Osano release. Use one of these three approaches instead.

1. Test IDs. Some elements carry a data-testid attribute that stays stable.

.osano-root [data-testid="form-title"] {
  color: #ffffff;
}

2. The parent of a known element. :has() selects an element by what's inside it. This is how you reach an unnamed wrapper, like the box around the jurisdiction message.

/* the element that directly contains the jurisdiction message */
.osano-root :has(> .osano-localization-message) {
  display: none;
}

3. Position in a list. :nth-child() styles items by order, which is how you give each request tile its own color.

.osano-root .osano-card-list > :nth-child(odd)  { --tile-bg: #F0E7FA; }
.osano-root .osano-card-list > :nth-child(even) { --tile-bg: #DDF6EA; }
.osano-root .osano-card-list__card { background: var(--tile-bg); }

To find what an element carries, right-click it in your browser, choose Inspect, and look for osano- classes or a data-testid on it or its parent.

Recipes

Copy any of these into your stylesheet and change the values to match your brand.

Brand color and font

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");
 
:root {
  --osano-color-primary: #0a7cff;
  --osano-color-primary-readable: #ffffff;
  --osano-font-family: "Inter", Arial, sans-serif;
}

Match your site's page background

:root { --osano-color-bg-light-gray: transparent; }
body { background: #f4f7fb; }

Gradient background with see-through panels

body {
  min-height: 100vh;
  background: linear-gradient(155deg, #180D43, #7A3FF1, #F09F92);
  background-attachment: fixed;
}
.osano-root .osano-card {
  background: rgba(24, 13, 67, 0.4);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Square or asymmetric corners

:root {
  --osano-radius-md: 0;
  --osano-radius-lg: 0 32px 0 32px;
}

Colorful request tiles with a hover lift

.osano-root .osano-card-list__card {
  background: #F0E7FA;
  border: 2px solid #0E0416;
  box-shadow: 6px 6px 0 #0E0416;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.osano-root .osano-card-list__card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #0E0416;
}

Pill-shaped buttons

.osano-root .osano-button {
  border-radius: 999px;
  padding: 0.85rem 2rem;
  font-weight: 700;
}

Add your logo to the top right

This logo is decorative only. Screen readers skip it, and it can't be a link.

.osano-root .osano-root__container::before {
  content: "";
  display: block;
  width: 100%;
  height: 36px;
  margin-bottom: 1rem;
  background: url("https://yourcompany.com/logo.svg") no-repeat right center / contain;
}

Hide the jurisdiction banner

Visitors can no longer change their location, so anyone on a VPN or traveling sees the rights for wherever they were detected. Restyling the banner is usually the better choice.

.osano-root :has(> .osano-localization-message),
.osano-root .osano-control-header {
  display: none;
}

Change text color on the request form page

.osano-root [data-testid="form-title"],
.osano-root [data-testid="form-description"] {
  color: #ffffff;
}

Underline-style fields

.osano-root .osano-input {
  border: 0;
  border-bottom: 2px solid #D5D1DC;
  border-radius: 0;
  background: transparent;
}
.osano-root .osano-input:focus {
  border-bottom-color: var(--osano-color-primary);
  outline: none;
}

Best practices and troubleshooting

Best practices

• Start with the palette and tokens. Reach for component classes only for things tokens can't do, like corners on one element or hover effects.
• Keep all your colors, fonts, and corner values in one :root block at the top of your file, so a rebrand is a few edits.
• Scope rules under .osano-root instead of using !important. It keeps your file predictable and easy to change.
• Never target generated class names. Use osano- classes, data-testid, or :has().
• Check contrast. Body text should hit at least 4.5:1 against its background. A free checker like WebAIM's works well.
• Keep a visible focus outline on tiles, fields, and buttons so keyboard users can see where they are.
• Wrap motion like hover tilts in @media (prefers-reduced-motion: reduce) and turn it off there.
• Test on a phone. The request tiles stack to one column on small screens.

Troubleshooting

AI prompting

You don't need to write CSS yourself. Paste this guide into an AI assistant like Claude along with the prompt below, describe what you want in plain words, and it will write the stylesheet for you.

How to use it

1. Copy the prompt below into a new chat with your AI assistant.
2. Replace the guide placeholder with the full text of this document. Exporting it as Markdown keeps the code and tables intact.
3. Replace the request placeholder with what you want, in your own words.
4. Attach a screenshot of your current form and, if you have them, your brand colors, fonts, or logo URL.
5. Host the CSS it gives you, paste the URL into your form settings, and hard refresh to check the result.

The prompt

You are a front-end developer helping me style an Osano DSAR (privacy request) form with a custom CSS stylesheet. Below is the full customization guide for this form. Use only what it documents.
 
<guide>
[PASTE THIS ENTIRE GUIDE HERE]
</guide>
 
Here is what I want my form to look like, in plain words:
 
<request>
[DESCRIBE YOUR CHANGES HERE]
</request>
 
Rules for the stylesheet you write:
- Return one complete CSS file I can host as-is.
- Put all colors, fonts, and corner values in a single :root block at the top.
- Change --osano- design tokens first. Use component classes only when a token can't do the job.
- Target only osano- classes, data-testid attributes, or :has(). Never use random-looking generated class names.
- Start component selectors with .osano-root instead of using !important.
- Load any custom fonts with @import on the very first line.
- Keep text contrast at 4.5:1 or higher, keep visible focus outlines, and turn off motion inside @media (prefers-reduced-motion: reduce).
- Add a short comment above each section explaining what it changes.
 
After the CSS, tell me:
1. Which palette settings I should also set in Osano, and the values.
2. Anything you couldn't do with the documented classes, and what I should inspect in my browser and send you to finish it.
 
If my request is unclear or conflicts with accessibility, ask me before writing the CSS.

Example requests

• "Match our website: navy background, white text, our blue #0a7cff for buttons, and the Poppins font. Square corners everywhere."
• "Keep it clean and light, but give each request option a different soft pastel color and make them lift a little on hover."
• "Add our logo at https://example.com/logo.svg to the top right and make the buttons pill-shaped."
• "Make the page background a purple-to-orange gradient and make the cards see-through so the gradient shows behind them."

Always preview the result before publishing. If something doesn't change, send the assistant a screenshot plus the HTML of that element (right-click, Inspect, then right-click the highlighted line and Copy element).