Change Colors, Fonts & Design
Make your survey look like your brand — colors, fonts, backgrounds, and all.
- You need admin access to do this. About roles
The Design tab lets you style how your survey looks on an ExpressTab tablet, a Feedback Link, or a Website Widget. Two modes are available: Simple (visual controls) and CSS (raw code).
Keep it consistent. Using the same colors and fonts across all your touchpoints reinforces your brand — and makes feedback collection feel like a natural part of the experience.
Open the Design Tab
- Go to Admin > Touchpoints in the sidebar.
- Navigate to the Location or Website that holds the Touchpoint.
- Single-click it to open the details panel, then click the pencil icon.
- Go to Step 2 — Touchpoints and click the Touchpoint you want to edit.
- Switch to the Design tab at the top of the modal.
Simple Mode
Visual controls. No code needed. The editor breaks down into four sections.
- Upload image — Drag and drop or select a file. Only available on tablets.
- Select your color — A color overlay on top of the background image (or the sole background on widgets).
- Color overlay transparency — Controls how much of the image shows through.
- Positioning — How the image is sized and placed:
| Option | What it does |
|---|---|
| Fill | Covers the entire area, may crop the image |
| Fit | Shows the entire image, may leave empty space |
| Tilted | Repeats the image as a pattern |
| Centered | Places the image at its original size in the center |
Pick a font from the dropdown. 29 options are available (including Google Fonts such as Lato, Roboto, Montserrat, Open Sans, and Poppins). The default is Lato.
Six color pickers control different parts of the survey:
| Label | What it controls |
|---|---|
| Question and description text color | The main text for questions and descriptions |
| Theme color 1 | Navigation icons, free-text button icons. Hover over the info icon for the full list. |
| Theme color 2 | Active answer button highlight, scrollbar, progress bar. Hover over the info icon for the full list. |
| Answer background color | The background of answer buttons |
| Answer text color | The text on answer buttons |
| Smiley face line color | The outlines, eyes, and mouths of smiley faces |
Click any of the five smiley faces to select it, then use the color picker to set its fill color. From left to right: Very Negative, Negative, Neutral, Positive, Very Positive.
The outline color (eyes, mouth, border) is controlled separately by the Smiley face line color picker in the Colors section above.
Switch to CSS mode for full control. Write custom CSS directly in the text area.
Advanced CSS is a premium feature — it gives you full creative control over your survey's look and feel. Interested? Reach out to your account manager to get it enabled.
Differences by Touchpoint Type
The Design tab works the same way across all types, with a few exceptions:
- Background image — Tablets support image upload. Links and widgets only support a background color.
- Image position — Only available on tablets (links and widgets have no image).
- Theme color 1 and 2 — Control slightly different elements depending on the touchpoint type. Hover over the info icon next to each color to see what it affects.
Good to Know
After you update a widget's or link's design, it can take up to 20 minutes for the changes to go live. Tablet changes apply on the next sync.
Was this helpful?