> ## 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 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>

### 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.

## 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)
* [Matrix Question](#matrix-question)
* [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)
* [Buttons](#buttons)
* [Thank You Card](#thank-you-card)

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\
Key selectors: `html, body,  b`

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

<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) \
Key selectors: `.ul-footer, .ul-footer-bubble, .close-btn`

```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;}
```

<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.\
Key selectors: `.ul-card, .ul-card__container, .ul-card-main-content, .ul-question, .ul-caption `

```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; }
```

<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.\
Key selectors: `.ul-rich-text-body, .ul-rich-text-body p, .ul-rich-text-body li`

```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;
}
```

<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) Key selectors:

```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; }
```

<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 />

#### Matrix Questions

What it controls: row/column labels and cells.\
Key selectors:`.ul-matrix-row-label, .ul-matrix-column-label, .ul-matrix-option-wrapper `

```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; 
}
```

<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.\
Key selectors:`.ul-card--likert__numbers, .likert-number--desktop|--mobile, .ul-card--likert__labels`

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

<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.\
Key selectors: `.ul-card--nps__numbers, .nps-number--desktop|--mobile, .ul-card--nps__labels  `

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

<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" />

#### Open Text Card

What it controls: text areas and their container.\
Key selectors: `.ul-card-text__container, .ul-card-text__input(--desktop|--mobile) `

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

<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" />

#### Text or URL Prompt

What it controls: the prompt button styling.\
Key selectors: `.ul-card__text-url-prompt-button  `

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

<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" />

#### Consent or Legal Card

What it controls: name input and consent choices.\
Key selectors: `.ul-consent-legal__name-input, .ul-card__consent-legal .choice  `

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

<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" />

#### Rank Order

What it controls: draggable rows, handles, and select.\
Key selectors: `.ul-card-rank__option, .__drag-btn, .__select  `

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

<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" />

#### Buttons

What it controls: primary/secondary actions (finish/submit)\
Key selectors: `.ul-card-text__button, .ul-card-skip__button, .ul-card__button-wrapper  `

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

<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 />

#### Thank You Card

What it controls: closing screen layout and text.\
Key selectors: `.ul-card--thanks, .ul-thanks-check, .ul-card--thanks .ul-question, .ul-card--thanks .ul-caption  `

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

<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 />

## Quick Recipes

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

```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" />