Customizing the DSAR Form
The DSAR form is styled at runtime from a set of design tokens that are emitted as CSS custom properties. A subset of those tokens can be overridden per-form through the palette the customer configures in the Osano webapp, and an entire external stylesheet can be appended on top for full control.
This page documents the tokens you can target and the palette fields that override them.
How the CSS is assembled
When the form loads, two things are injected into the page:
- An inline
<style>block containing the design tokens as CSS custom properties on:root, plus a few dynamic rules that need JavaScript (the chevron / checkmark icon colors are picked from the chosen background, and the calendar picker icon is inverted on dark backgrounds). - An optional
<link rel="stylesheet">pointing at the URL configured for the form. This stylesheet is loaded after the inline<style>block, so its rules win on equal specificity.
You can therefore customize the form at three layers, from least to most invasive:
- Change the palette — the per-form configuration in the Osano webapp.
- Redefine CSS custom properties in your external stylesheet.
- Override the shared BEM classes (
osano-button,osano-input,osano-field, …) with your own selectors.
Design tokens
Every CSS custom property emitted by the form is namespaced under the
--osano- prefix so it cannot collide with variables defined by your
host page. Use the same prefix from your external stylesheet.
Colors
| CSS variable | Default | Palette override |
|---|---|---|
--osano-color-primary | #7a3ff1 | primaryColor |
--osano-color-primary-dark | derived from primary (-2% lightness) | — |
--osano-color-primary-readable | auto (black or white based on primary) | primaryReadableColor |
--osano-color-primary-transparent | --osano-color-primary at 50% alpha | — |
--osano-color-primary-text | #190E43 | fieldTextColor |
--osano-color-text-secondary | #403653 | — |
--osano-color-text-subtle | #726A82 | — |
--osano-color-text-super-subtle | #A099AF (input placeholder) | — |
--osano-color-grayscale-950 | #0E0D10 | — |
--osano-color-bg-light-gray | #FAF9FB (page area) | formBackgroundColor |
--osano-color-bg-table-header | #F5F0FF | — |
--osano-color-bg-default | #FFFFFF (form input background) | — |
--osano-color-bg-card | #FFFFFF | — |
--osano-color-bg-button-secondary | #FFFFFF | — |
--osano-color-background | #FFFFFF (alias of --osano-color-bg-default) | — |
--osano-color-background-dark | derived from input bg (-2% lightness) | — |
--osano-color-disabled-bg | #D5D1DC | — |
--osano-color-disabled-readable | auto (black or white based on disabled bg) | disabledReadableColor |
--osano-color-disabled-text | --osano-color-primary-text at 50% alpha | — |
--osano-color-border-subtle | #E7E5EB | — |
--osano-color-border-default | #D5D1DC | — |
--osano-color-error | #ef4444 | errorColor |
--osano-color-error-dark | derived from error (-2% lightness) | — |
--osano-color-required | #ef4444 | requiredColor |
--osano-color-helper-text | #6b7280 | helperTextColor |
--osano-color-success-bg | #DCFCE7 | — |
--osano-color-text-success | #016630 | — |
Radii & shadows
| CSS variable | Default |
|---|---|
--osano-radius-md | 6px |
--osano-radius-lg | 10px |
--osano-shadow-xl | 0 8px 24px 0 rgba(0,0,0,0.09), 0 16px 56px 0 rgba(0,0,0,0.08) |
Typography
The form ships with DM Sans, self-hosted as variable woff2 files (normal
and italic axes covering the full 100–1000 weight range). The fallback chain
is Arial, sans-serif.
| CSS variable | Default |
|---|---|
--osano-font-family | "DM Sans", Arial, sans-serif |
--osano-heading-lg-size / weight / line-height / letter-spacing | 20px / 700 / 24px / -0.4px |
--osano-heading-sm-size / weight / line-height / letter-spacing | 16px / 700 / 22px / -0.2px |
--osano-body-size / weight / line-height | 14px / 400 / 20px |
--osano-caption-size / weight / line-height / letter-spacing | 12px / 500 / 16px / 0.12px |
--osano-font-weight-medium | 600 |
Palette overrides
The palette is part of the form's styling payload returned by the API:
{
"styling": {
"palette": {
"primaryColor": "#0a7cff",
"primaryReadableColor": "#ffffff",
"formBackgroundColor": "#f4f7fb",
"fieldTextColor": "#1a1a1a",
"errorColor": "#cf1f1f",
"requiredColor": "#cf1f1f",
"helperTextColor": "#5b6472",
"disabledReadableColor": "#000000"
},
"stylesheetURL": "https://example.com/dsar-form.css"
}
}
| Field | Maps to | Notes |
|---|---|---|
primaryColor | --osano-color-primary | Drives buttons, focus ring, checked checkboxes/radios, links. |
primaryReadableColor | --osano-color-primary-readable | Foreground used on top of the primary color (e.g. button label). Auto-picked from luminance if omitted. |
formBackgroundColor | --osano-color-bg-light-gray | Page background behind the form card. Inputs, cards, and secondary buttons stay neutral by default. |
fieldTextColor | --osano-color-primary-text | Primary text color used inside form fields and labels. |
errorColor | --osano-color-error (and --osano-color-error-dark is derived) | Validation error borders, helper text, captcha message. |
requiredColor | --osano-color-required | The * indicator on required field labels. |
helperTextColor | --osano-color-helper-text | Helper text under fields. |
disabledReadableColor | --osano-color-disabled-readable | Foreground on disabled controls (e.g. button spinner color). Auto-picked from luminance if omitted. |
Auto-picked contrast colors
primaryReadableColor and disabledReadableColor are computed from each
color's luminance when they aren't provided. The luminance threshold is
intentionally higher than the WCAG default (0.4 instead of 0.179) so
medium-dark grays receive white text rather than borderline black, which
matches user expectation more closely. Set the readable colors explicitly
when the auto-pick isn't right for your brand.
stylesheetURL
stylesheetURL is a fully qualified URL to a CSS file that you host. It is
loaded after the inline tokens, so:
- Plain selectors override the defaults at the same specificity (later in source order wins).
- Targeting the same CSS variables with
:root { --osano-color-primary: …; }redefines the tokens for both the form and your own rules. - The shared BEM classes (
osano-button,osano-input,osano-field, …) are stable hooks for component-level overrides.
If the URL fails to parse, the link is silently dropped and only the inline styles are applied.
Worked example: branding the form
/* hosted at https://example.com/dsar-form.css */
:root {
/* swap the brand color and force white text on it */
--osano-color-primary: #0a7cff;
--osano-color-primary-readable: #ffffff;
/* tone down the page background */
--osano-color-bg-light-gray: #f4f7fb;
/* match your design system's radii */
--osano-radius-md: 4px;
--osano-radius-lg: 8px;
/* use the brand font instead of DM Sans */
--osano-font-family: "Inter", system-ui, sans-serif;
}
/* Tighten the card padding to match a denser layout */
.osano-form {
padding: 2rem 1rem;
}
Pair the file with the matching palette configured in the Osano webapp and the form will render with both your tokens and your overrides applied.