Q-SYS UCI CSS Creator
Polished UCI stylesheets, generated — not hand-tweaked at 1 a.m.
Q-SYS UCIs can be styled with CSS — but most integrators ship the stock look because hand-writing UCI stylesheets is slow, fiddly, and nobody budgets for it. The UCI CSS Creator generates polished, client-ready UCI stylesheets fast, shipping with a library of ready-made UX/UI sample sets you can apply and adapt instead of starting from a blank file.
It pairs with qsys-rewrite as the other half of a Q-SYS Toolkit: one generates the system, the other makes the touch panel look like someone cared.
Three steps. No drama.
Describe the panel
A short brief plus the UCI’s real width and height. Room, client, mood, whatever you would have told a designer.
Get three directions, not one
Every brief returns three complete stylesheets — warm, editorial, and technical — so you are choosing between options instead of nudging a single guess.
Preview at the real size
The preview canvas matches the panel dimensions you entered, so what you approve is what the touch panel shows. Download the CSS and drop it into Designer.
What it does.
- 01Generates polished UCI stylesheets for Q-SYS touch panels
- 02Ships with a library of ready-made UX/UI sample sets (~20 planned)
- 03Apply, adapt, ship — no more blank-file CSS at the deadline
- 04Pairs with qsys-rewrite as a Q-SYS Toolkit
The full kit.
- 01Brief-to-CSS generation, three variants per run
- 02A canvas-accurate preview sized to your actual UCI, not a generic phone frame
- 03A CSS validator that strips anything Q-SYS will not render, so you are not debugging a stylesheet on site
- 04A growing library of sample sets to start from instead of a blank file
Q-SYS renders a subset of CSS, so a stylesheet that looks right in a browser can quietly fall apart on a panel. Every generated file is stripped down to what the panel will actually honor before you ever see it. That validator is why the output is worth downloading.
The honest answers.
Does the CSS actually work in Q-SYS Designer? +
That is the whole design constraint. Q-SYS supports a subset of CSS, and generated output runs through a validator that removes anything outside it. You are downloading a stylesheet built against the panel, not a web page.
Why three variants every time? +
Because picking is faster than editing. One result invites an hour of tweaking. Three distinct directions usually means one is close enough to ship.
Do I need to know CSS? +
Not to get a result. It helps if you want to adapt one afterward, and the output is readable rather than minified for exactly that reason.
How does it pair with qsys-rewrite? +
qsys-rewrite generates the design file. This styles the interface on top of it. System and UI, both generated, which is the Q-SYS Toolkit those two are becoming.
When can I buy it? +
It runs internally today and is not yet packaged for outside use. Email hello@boringlabs.online and we will tell you when it is.
Q-SYS UCI CSS Creator.
On the bench, in active development. Say hello and we’ll tell you the moment it ships — nothing else.