Thirty mock interfaces, generated from one script
Clients ask what the system will look like. Describing it never lands. So we built thirty sample interfaces — and learned that making them look genuinely different is the hard part.
Every proposal hits the same wall. You write "a dispatch board with live vehicle positions and SLA alerts", the client nods, and neither of you is picturing the same screen. The gap only closes when they can look at something.
So we built one static mock interface for each kind of platform we deliver — thirty of them, from a payments console to a restaurant point of sale to a SCADA line view. They live on this site under /demos, and they are generated: one Python script owns the data, the widgets and the themes.
The first version failed
We shipped all thirty sharing one dark dashboard shell, with only the accent colour changing per page. The verdict came back in five words: they look mostly alike. And they did. A hospital chart and a crypto terminal cannot credibly be the same navy sidebar with a different blue.
The fix was not more colours. It was admitting that a theme is three separate decisions — palette, typography and density — and that layout is a fourth decision sitting on top of all of them.
Tokens make light themes possible
The rewrite made every colour inside a mock a CSS custom property. Nothing hardcodes a hex value any more, so a single skin class flips the whole interface from near-black to clinical white and every widget follows — including the status greens and ambers, which need different values on white than they do on navy.
.frame{
--f-bg:#050915; --f-panel:rgba(8,13,32,.6);
--f-tx:#EAF0FF; --f-line:rgba(130,160,230,.14);
}
.frame.sk-clinical{
--f-bg:#F3F6FA; --f-panel:#FFFFFF;
--f-tx:#16233A; --f-line:#DBE3EE;
--ok:#128A4C; /* the dark-theme green is invisible on white */
}Layout matters more than colour
Six structural archetypes did more work than twenty-seven palettes. A point of sale renders in a tablet bezel with big touch targets. A technician app renders in a phone bezel. A tracking system makes the map the entire screen and floats its panels over it. A trading terminal drops the sidebar entirely for a ticker tape and a dense grid.
Every figure and company name in those mocks is invented, and each page says so in both languages. A sample that quietly implies a client you do not have is a different kind of lie.
The generator is about 3,000 lines and produces 870 KB of static HTML with no JavaScript beyond the language switch. Adding a thirty-first system is one entry in a list.