Since Q‑SYS Designer introduced UCI Styles, you can restyle an entire user control interface — colors, buttons, faders, typography — by applying a stylesheet, instead of hand-formatting every control. The same style can be reused across every UCI and every design your shop ships, which is how you get a consistent house look without a front-end developer on staff.
You need three things: a .css style file, Q‑SYS Designer, and a UCI to apply it to. Here's the process.
Get a UCI style
A UCI style is a CSS file written against Q‑SYS's UCI class structure. You can write one from scratch if you know CSS — QSC publishes a CSS class reference — but the fastest start is a ready-made style. Our Starter style is free and production-ready, with light and dark variants (there's a download form at the end of this guide). QSC also offers styles through the Q‑SYS Library (Tools → Open Q‑SYS Library in Designer).
Put the file where Designer looks
Q‑SYS Designer scans a specific folder for installable styles. Copy your .css file (and any assets that came with it) into:
Documents\QSC\Q-SYS Designer\Styles
If Designer was open, the style appears the next time it refreshes the folder — reopening the design is the reliable way to make sure it's picked up.
Install the style into your design
Styles are installed into the design file, not just referenced from disk — which means the style travels with the design when you archive it or hand it to a colleague. In your design, install the style from the styles list so it shows up as available to the design's UCIs.
Apply it to the UCI
Select your UCI and set its style to the one you just installed in the UCI's properties. The UCI editor re-renders immediately with the new look — every control that the stylesheet targets picks up its styling in one step.
Fine-tune with CSS class names
A good style does most of its work automatically, but you can go further: select any element in the UCI and use its CSS Class Name property to assign one or more classes defined in the stylesheet. This is how you mark one button as the "danger" action, give a specific fader an accent color, or opt an element out of a treatment — without touching the CSS itself.
Save to the Core and check the real panel
Push the design to your Core (or run the emulator) and review the UCI on the actual touchpanel or the UCI Viewer app. Fonts, spacing, and contrast read differently on a 10-inch panel at arm's length than in the editor — always do one pass on real glass before handover.
Documents\QSC\Q-SYS Designer\Styles (not a subfolder of it), the design has been closed and reopened since you copied it, and the style has actually been installed into the design — step 3 is the one everyone skips.What a style can and can't do
A UCI style controls the look of what's on the page: backgrounds, buttons, faders, meters, text styling, borders, states. It doesn't create the layout or the logic — the controls, pages, and navigation still come from your UCI design. That's the honest boundary of CSS styling: it makes a well-built UCI look professional, but it can't rescue a layout that fights the user. (If you want the layout, logic, and look pre-built, that's what a complete UCI template is for.)
Start with a free, production-ready style
The UCI Kit Starter style is the fastest way through step 1: clean light and dark variants plus a quick-start guide, free forever. Enter your email and we'll send the download link.
Check spam if it doesn't arrive in a minute.