> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sprig.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling Studies with Custom CSS

**You can add and override the CSS applied to Sprig In-Product Surveys and Feedback to completely re-work its appearance to match your branding guidelines and requirements.**

Some look and feel styling is built into the Sprig dashboard by default. Other customizations require CSS styling. The guidance here is a deeper dive into how the CSS editor works and how to safely override default rules.

Custom CSS styling is done separately for In-Product Surveys and Feedback, and can be done in:

* Settings > Surveys > Look & Feel > CSS OR
* Settings > Feedback > Look & Feel > CSS

<Note>
  **Note:** currently Sprig only supports 1 CSS styling theme per Sprig Product. Per study styling is coming soon!
</Note>

<Note>
  **Styling for dark mode?** Sprig studies can follow the respondent's system appearance. The code shown in the editor below is a **light-mode-only snapshot** and does not include the CSS variables the dark stylesheet relies on. See [Dark Mode](/docs/developer-center/styling/dark-mode) before adding any color rules.
</Note>

### Introduction

A single CSS file applies to all survey question types, although some CSS selectors only apply to HTML elements on specific survey types. **Any un-commented out CSS you add will override the default styling to all surveys when saved, including any in-progress studies. Do proceed with caution when applying.**

When you open the Custom CSS editor, you’ll see a block of commented-out code. These aren’t “extra” styles you need to delete or modify, they’re simply the default Sprig styles shown for reference. You can ignore them if you like or choose to clear the window.

### Basic instructions:

* **Add your own CSS below the comments, or replace selectors with your own.**
  * The default file is organized by general styles and question-type-specific styles.
  * You can make modifications directly in this editor or paste in your own CSS.
* **Use the preview panel to test changes across question types.**
  * The preview will update with the changes you make to your CSS. You can select each of the question types from underneath the preview to see how your custom CSS changes their appearance. Note that not all changes will be shown in previews until the CSS styling configurations are saved. We encourage testing in a development environment and then copy and pasting the curate styling into production.
  * Defaults will remain unless overridden.
  * Custom CSS applies to all surveys within a product, including active surveys.

### CSS variables

Underneath the selectors shown in the editor, Sprig's stylesheets are built on **CSS custom properties** (variables) for color, e.g. `--text-color`, `--background-color`, `--selection-background-color`. Every selector below reads its color from one of these variables rather than a hardcoded value.

You don't need to touch variables to use custom CSS; overriding a selector directly (as shown throughout this page) works fine. Variables matter once you want the same color change to apply automatically in both light and dark mode, since a variable you set once is picked up everywhere Sprig uses it.

The full variable reference, and the three patterns for using them, live on the [Dark Mode](/docs/developer-center/styling/dark-mode#css-variable-reference) page rather than duplicated here.

## The Practical Guide

The 600+ lines of default CSS have JSDoc style comments that organize all the selectors.

* [Base Typography](#base-typography)
* [Universal Elements](#universal-elements)
* [Card Component](#card-component)
* [Rich Text](#rich-text)
* [Choice Elements](#choice-elements)
* [Buttons](#buttons)
* [Matrix Questions](#matrix-questions)
* [One to Five Scale (Likert)](#one-to-five-scale-likert)
* [NPS Question](#nps-question)
* [Open Text Card](#open-text-card)
* [Text or URL Prompt](#text-or-url-prompt)
* [Consent or Legal Card](#consent-or-legal-card)
* [Rank Order](#rank-order)
* [AI Follow-Up & AI Dynamic Question](#ai-follow-up-and-ai-dynamic-question)
* [Thank You Card](#thank-you-card)
* [Feedback Button & Container](#feedback-button-and-container)

Sprig has also curated 2 different quick "Choose-your-own-theme" [recipes](#quick-recipes), shown below!

<br />

#### Base Typography

What it controls: global text feel.

```css Try: theme={null}
/* Brand font */
html, body { font-family: 'Georgia', serif; }
```

<Accordion title="All selectors in this section">
  `html`, `body`, `b`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/_ephcOEAcdx-CRO7/images/0bac27fa4533b5fd27a82ecc3be89966eb03ceeacc147ce9546c83047c1a67b3-unnamed.png?fit=max&auto=format&n=_ephcOEAcdx-CRO7&q=85&s=efb871f776b2ec393d9c7b927e81bb8c" data-path="images/0bac27fa4533b5fd27a82ecc3be89966eb03ceeacc147ce9546c83047c1a67b3-unnamed.png" />

<br />

#### Universal Elements

What it controls: the little bits around the card (footers, dots, close button).

```css Try: theme={null}
/* Increased footer spacing & add color */
.ul-footer { margin-top: 12px; background-color: #e97451; }

/* Increase size of the close icon */
.close-btn { height: 18px; width: 18px;}
```

<Accordion title="All selectors in this section">
  `.ul-footer`, `.ul-footer-bubble`, `.close-container`, `.close-btn`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/_ephcOEAcdx-CRO7/images/220a2e2d8c135c48a8df8057b29f5e6ee42dd7e2d81a9116e164159ef04e5eb9-Screenshot_2025-11-17_at_2.24.41_PM.png?fit=max&auto=format&n=_ephcOEAcdx-CRO7&q=85&s=cc9424d1dca69957fb1c21de8974fed4" data-path="images/220a2e2d8c135c48a8df8057b29f5e6ee42dd7e2d81a9116e164159ef04e5eb9-Screenshot_2025-11-17_at_2.24.41_PM.png" />

<br />

#### Card Component

What it controls: the survey “card”, padding, shadow, radius.

```css Try: theme={null}
/* Rounded, no heavy shadow */
.ul-card__container--desktop, .ul-card__container--mobile {
  border-radius: 10px;
  box-shadow: none;
}

/* Headline + subcopy tone */
.ul-question { font-size: 20px; font-weight: 700; color: #1f2937; }
```

<Accordion title="All selectors in this section">
  `.ul-card`, `.ul-card__container--desktop`, `.ul-card__container--mobile`, `.ul-card__container`, `.ul-card-main-content`, `.ul-question`, `.ul-caption`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/_1uWncsTBTa1sJbM/images/ca17407dd0eb98d1f0c3d89feb16a090ab2797cdee700fbc7d49d3acc34833bf-Screenshot_2025-11-17_at_11.20.01_AM.png?fit=max&auto=format&n=_1uWncsTBTa1sJbM&q=85&s=5f6ab6308f701043cbc6be7d53ab4567" data-path="images/ca17407dd0eb98d1f0c3d89feb16a090ab2797cdee700fbc7d49d3acc34833bf-Screenshot_2025-11-17_at_11.20.01_AM.png" />

<br />

#### Rich Text

What it controls: paragraphs and lists in rich text cards.

```css Try: theme={null}
/* Visual focus on rich text */
.ul-rich-text-body p, .ul-rich-text-body li { 
  text-align: center;
  padding: 5px;
  border: #b18187 3px solid;
}
```

<Accordion title="All selectors in this section">
  `.ul-rich-text-body`, `.ul-rich-text-body p`, `.ul-rich-text-body li`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/_ephcOEAcdx-CRO7/images/0bb579782b6968133d997ea098a0b4328601024ddd28ee2a583a2bbb8cf787e3-Screenshot_2025-11-17_at_11.26.49_AM.png?fit=max&auto=format&n=_ephcOEAcdx-CRO7&q=85&s=c697a01de59cd0bb8ddfb6c2ca2a16df" data-path="images/0bb579782b6968133d997ea098a0b4328601024ddd28ee2a583a2bbb8cf787e3-Screenshot_2025-11-17_at_11.26.49_AM.png" />

<br />

#### Choice Elements

What it controls: option "buttons," spacing, radio dots, labels (multiple choice, multi-select, matrix options).

```css Try: theme={null}
/* Space the list a bit */
.ul-card__choices--desktop { margin-top: 16px; }

/* Button-like options */
.choice { background: #f9f9f8; border-radius: 12px; }

/* Hide radio circles for a cleaner look */
.select-radio { display: none; }
```

<Accordion title="All selectors in this section">
  `.ul-card--multiple`, `.ul-card__choices--desktop`, `.ul-card__choices--mobile`, `.ul-card__choices`, `.choice--mobile`, `.choice--desktop` (has `:hover`/`:active` states), `.choice`, `.select-label`, `.select-radio`, `.ul-select-active-dynamic-style .select-radio`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/_1uWncsTBTa1sJbM/images/d40575bdca400dcf8a331317eb77c40d1a751723f490063aaca3b9c15c55eb9e-Screenshot_2025-11-17_at_2.50.34_PM.png?fit=max&auto=format&n=_1uWncsTBTa1sJbM&q=85&s=4ea4aef5909c5ac0878364bc8b2a5573" data-path="images/d40575bdca400dcf8a331317eb77c40d1a751723f490063aaca3b9c15c55eb9e-Screenshot_2025-11-17_at_2.50.34_PM.png" />

<br />

#### Buttons

What it controls: primary/secondary actions (finish/submit). Buttons appear across nearly every question type, not just one, so this section sits with the other general-purpose selectors above.

```css Try: theme={null}
/* Rounded (pill-shape) primary action */
.ul-card-text__button {
  border-radius: 20px;
  background: #e97451; 
  color: #fff;
}
```

<Accordion title="All selectors in this section">
  `.ul-card-text__button`, `.ul-card-text__button:disabled`, `.ul-card__button-wrapper`, `.ul-card-skip__button`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/_ephcOEAcdx-CRO7/images/0f5812b3860f055a4678a87888570b33831f4291db0a1a6820893fc94df236a9-Screenshot_2025-11-17_at_3.07.35_PM.png?fit=max&auto=format&n=_ephcOEAcdx-CRO7&q=85&s=d45d9327199430f92164c8e713300ac1" data-path="images/0f5812b3860f055a4678a87888570b33831f4291db0a1a6820893fc94df236a9-Screenshot_2025-11-17_at_3.07.35_PM.png" />

<br />

#### Matrix Questions

What it controls: row/column labels and cells.

```css Try: theme={null}
/* Colorful matrix background & label text */
.ul-matrix-option-wrapper { 
    background-color: #e97451; 
    margin: 4px; 
    border-radius: 3px; 
}

.ul-matrix-row-label, .ul-matrix-column-label { 
    background: white; 
    color: #e97451; 
}
```

<Accordion title="All selectors in this section">
  `.ul-card--matrix_grid`, `.ul-card--matrix_container`, `.ul-matrix-column-label`, `.ul-matrix-option-wrapper`, `.ul-matrix-last-option`, `.ul-matrix-row-label`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/IibAYOcivdkTylH0/images/701387c9c1590ad425d7e786f7f0d234a420fd07457db03a9ad0eb7884a9f8d5-Screenshot_2025-11-17_at_2.49.49_PM.png?fit=max&auto=format&n=IibAYOcivdkTylH0&q=85&s=ff522a38c6196b61704671502923480a" data-path="images/701387c9c1590ad425d7e786f7f0d234a420fd07457db03a9ad0eb7884a9f8d5-Screenshot_2025-11-17_at_2.49.49_PM.png" />

<br />

#### One to Five Scale (Likert)

What it controls: the row of numbers and labels beneath.

```css Try: theme={null}
/* Dotted borders on each number & mauve labels */
.likert-number--desktop { border: 2px #f1e1e7 dotted; }
.ul-card--likert__labels { color: #b18187; }
```

<Accordion title="All selectors in this section">
  `.ul-card--likert`, `.ul-card--likert__numbers`, `.likert-number--mobile`, `.likert-number--desktop` (has `:hover`/`:active` states), `.likert-number`, `.ul-card--likert__labels`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/_ephcOEAcdx-CRO7/images/31503c3fe89527e630e8498b390ce8f61757c9ad63434d050f927df374604018-Screenshot_2025-11-17_at_2.55.48_PM.png?fit=max&auto=format&n=_ephcOEAcdx-CRO7&q=85&s=f4b101125c306c8006d58ca59f72fd49" data-path="images/31503c3fe89527e630e8498b390ce8f61757c9ad63434d050f927df374604018-Screenshot_2025-11-17_at_2.55.48_PM.png" />

<br />

#### NPS Question

What it controls: the number grid and label row.

```css Try: theme={null}
/* Same visual language as Likert */
.ul-card--nps__numbers { border: 2px #f1e1e7 dotted; }
.ul-card--nps__labels { color: #b18187; }
```

<Accordion title="All selectors in this section">
  `.ul-card--nps`, `.ul-card--nps__numbers`, `.nps-number--mobile`, `.nps-number--desktop` (has `:hover`/`:active` states), `.nps-number`, `.ul-card--nps__labels`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/IibAYOcivdkTylH0/images/496ab8221745c7e32eed50d08db447835c6ba9290ab87d6400a27be3d5da62e5-Screenshot_2025-11-17_at_2.55.55_PM.png?fit=max&auto=format&n=IibAYOcivdkTylH0&q=85&s=b4d4fb1efa396eba3a6a5cd17c15696c" data-path="images/496ab8221745c7e32eed50d08db447835c6ba9290ab87d6400a27be3d5da62e5-Screenshot_2025-11-17_at_2.55.55_PM.png" />

<br />

#### Open Text Card

What it controls: text areas and their container.

```css Try: theme={null}
/* Peach background, rounder corners */
.ul-card-text__input { background: #fad6c3; border-radius: 8px; }
```

<Accordion title="All selectors in this section">
  `.ul-card--text`, `.ul-card-text`, `.ul-card-text__container`, `.ul-card-text__input--mobile`, `.ul-card-text__input--desktop` (has a `:hover` state), `.ul-card-text__input` (has `::placeholder`/`:focus` states)
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/8rOBJC6NeyY76ru8/images/b61995252d7b22e32b87a8b92671c77c7c2ea902ffd511a2eec164b6161d6aa5-Screenshot_2025-11-17_at_2.56.01_PM.png?fit=max&auto=format&n=8rOBJC6NeyY76ru8&q=85&s=3b5bcd765da317d8eaf8b47a48eee8c4" data-path="images/b61995252d7b22e32b87a8b92671c77c7c2ea902ffd511a2eec164b6161d6aa5-Screenshot_2025-11-17_at_2.56.01_PM.png" />

<br />

#### Text or URL Prompt

What it controls: the prompt button styling.

```css Try: theme={null}
/* Make prompt feel like a primary action */
.ul-card__text-url-prompt-button { background-color: #e97451 }
```

<Accordion title="All selectors in this section">
  `.ul-card__text-url-prompt`, `.ul-card__text-url-prompt-button`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/_1uWncsTBTa1sJbM/images/ef82a0d914aad3e3965c70ba1572758086a4b00146631c6adb9aef4059ac5b32-Screenshot_2025-11-17_at_2.57.13_PM.png?fit=max&auto=format&n=_1uWncsTBTa1sJbM&q=85&s=187e70d1ef9b73de777944a631badd42" data-path="images/ef82a0d914aad3e3965c70ba1572758086a4b00146631c6adb9aef4059ac5b32-Screenshot_2025-11-17_at_2.57.13_PM.png" />

<br />

#### Consent or Legal Card

What it controls: name input and consent choices.

```css Try: theme={null}
/* Peach background, rounder corners */
.ul-consent-legal__name-input { background: #fad6c3; border-radius: 6px; }
```

<Accordion title="All selectors in this section">
  `.ul-consent-legal__name-input--mobile`, `.ul-consent-legal__name-input--desktop` (has a `:hover` state), `.ul-consent-legal__name-input` (has `::placeholder`/`:focus` states), `.ul-card__consent-legal .choice`, `.ul-card__consent-legal .choice--desktop` (has `:hover`/`:active` states), `.ul-card__consent-legal .choice--mobile` (has an `:active` state)
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/8rOBJC6NeyY76ru8/images/a573edad72c46b14fa3c718ae37a390ca45d5ae9f33c0c49221081928ac8aa90-Screenshot_2025-11-17_at_3.01.09_PM.png?fit=max&auto=format&n=8rOBJC6NeyY76ru8&q=85&s=a6873eb8fd5e6f52ecbc36d7874d3350" data-path="images/a573edad72c46b14fa3c718ae37a390ca45d5ae9f33c0c49221081928ac8aa90-Screenshot_2025-11-17_at_3.01.09_PM.png" />

<br />

#### Rank Order

What it controls: draggable rows, drag handle, and the rank select dropdown.

```css Try: theme={null}
/* Rounder rows with a colored drag handle */
.ul-card-rank__option { border-radius: 12px; border-color: #b18187; }
.ul-card-rank__drag-btn { color: #b18187; }

/* Custom-colored rank select */
.ul-card-rank__select { border-color: #b18187; border-radius: 8px; }
```

<Accordion title="All selectors in this section">
  `.ul-card-rank__labels`, `.ul-card--rank__question-inner-container`, `.ul-card-rank__list`, `.ul-card-rank__option` (has an `:active` state, plus `.is-dragging` and `.is-drop-target` modifier classes), `.ul-card-rank__option.is-drop-target select, .ul-card-rank__option.is-drop-target span, .ul-card-rank__option.is-drop-target button`, `.ul-card-rank__drag-btn` (has an `:active` state), `.ul-card-rank__option svg`, `.ul-card-rank__option span`, `.ul-card-rank__select`, `.ul-card-rank__select.ul-card-rank__select--placeholder`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/_1uWncsTBTa1sJbM/images/dae76c72b9767331b40335af138090648103a57c8bb14abee26861bc34ab933b-Screenshot_2025-11-17_at_3.01.21_PM.png?fit=max&auto=format&n=_1uWncsTBTa1sJbM&q=85&s=7aa16afc1a3d8fe20f94efe5ac9501b9" data-path="images/dae76c72b9767331b40335af138090648103a57c8bb14abee26861bc34ab933b-Screenshot_2025-11-17_at_3.01.21_PM.png" />

<br />

#### AI Follow-Up & AI Dynamic Question

What it controls: the loading indicator shown while an AI Follow-Up or AI Dynamic Question is generated. Everything else on these question types shares styling with the [Open Text Card](#open-text-card).

```css Try: theme={null}
/* Slower, brand-colored shimmer */
.ul-card-text__input__loading {
  background-image: linear-gradient(70deg, #b18187 0%, #f1e1e7 50%, #b18187 100%);
  animation-duration: 3s;
}
```

<Accordion title="All selectors in this section">
  `.ul-card-text__input__loading`
</Accordion>

<br />

#### Thank You Card

What it controls: closing screen layout and text.

```css Try: theme={null}
/* Colored checkmark, tighter closing copy */
.ul-thanks-check { color: #21522e; }
.ul-card--thanks .ul-question { font-weight: 700; }
.ul-card--thanks .ul-caption { color: #575653; }
```

<Accordion title="All selectors in this section">
  `.ul-card--thanks`, `.ul-thanks-check`, `.ul-card--thanks-content`, `.ul-card--thanks .ul-question`, `.ul-card--thanks .ul-caption`
</Accordion>

<img align="center" width="300px" src="https://mintcdn.com/sprig/IibAYOcivdkTylH0/images/737a499da64e3f458162ac5a06235394e9c015718acdd3cb6de28728cb061320-Screenshot_2025-11-17_at_3.09.23_PM.png?fit=max&auto=format&n=IibAYOcivdkTylH0&q=85&s=2a82700041351d4e348226722dc42f14" data-path="images/737a499da64e3f458162ac5a06235394e9c015718acdd3cb6de28728cb061320-Screenshot_2025-11-17_at_3.09.23_PM.png" />

<br />

#### Feedback Button & Container

What it controls: the floating Feedback button and the container it opens into. These selectors are only relevant to the Feedback tab's CSS editor, not surveys.

```css Try: theme={null}
/* Rounder floating button */
#sprig-feedback-button { border-radius: 24px; }
```

<Note>
  **`.sprig-feedback-button-light` / `.sprig-feedback-button-dark` are not the same as the dark mode covered on the [Dark Mode](/docs/developer-center/styling/dark-mode) page.** These two classes correspond to the Feedback button's own **Light/Dark theme** setting in Look & Feel — a manual choice you make once for the button, not something that responds to the respondent's system appearance. If you want the Feedback button itself to follow `prefers-color-scheme`, you'll need to write that media query yourself against these selectors.
</Note>

<Accordion title="All selectors in this section">
  `#sprig-feedback-button`, `.sprig-feedback-button-label`, `.sprig-feedback-button-right`, `.sprig-feedback-button-bottom`, `.sprig-feedback-button-light`, `.sprig-feedback-button-dark`, `#sprig-feedback-container`, `.sprig-feedback-container-left`, `.sprig-feedback-container-center`, `.sprig-feedback-container-bottom`
</Accordion>

<br />

## Quick Recipes

“Choose-Your-Own-Theme” recipes designed to help you tailor the look and feel of your studies.

<Note>
  These recipes are light-mode only. If dark mode is enabled for your product, pair them with a `@media (prefers-color-scheme: dark)` block — see [Dark Mode](/docs/developer-center/styling/dark-mode) for the patterns to use.
</Note>

```css Minimal Branded Look theme={null}
body { font-family: Optima; }
.ul-card__container { border: #5a6b5f 2px solid; border-radius: 0; box-shadow: none; }
.ul-question { font-weight: 700; color: #21522e; text-align: center}
.choice { background: white; border-radius: 24px; }
.select-radio { display: none; }
.ul-card-text__button { border-radius: 16px; padding: 8px;}
```

<img align="center" width="300px" src="https://mintcdn.com/sprig/_1uWncsTBTa1sJbM/images/c0566493164bd19ce2570da9e3e028fafc2ecd9397f63c9a7a9a82a760d57f3f-Screenshot_2025-11-17_at_3.46.05_PM.png?fit=max&auto=format&n=_1uWncsTBTa1sJbM&q=85&s=3520eb654e6dbf07df241e9e1bb4f618" data-path="images/c0566493164bd19ce2570da9e3e028fafc2ecd9397f63c9a7a9a82a760d57f3f-Screenshot_2025-11-17_at_3.46.05_PM.png" />

<br />

```css High Contrast for Accessibility theme={null}
.ul-question { font-weight: 700; font-family: Verdana; color: #25283D; font-size: 22px; }
.choice { background: white; font-size: 16px; border: 2px solid #25283D; }
.ul-card-text__button { background: #25283D; color: #fff; border-radius: 16px; }
```

<img align="center" width="300px" src="https://mintcdn.com/sprig/cSu4rGtDA9Bxd6HT/images/f72ae06a7975277484ea8b8f0734ca03e0b1516ad258a3160d044e765169edf7-Screenshot_2025-11-17_at_3.57.27_PM.png?fit=max&auto=format&n=cSu4rGtDA9Bxd6HT&q=85&s=a67f37783af53831f523c8ec96d61637" data-path="images/f72ae06a7975277484ea8b8f0734ca03e0b1516ad258a3160d044e765169edf7-Screenshot_2025-11-17_at_3.57.27_PM.png" />