How the Ettex design system holds twenty products together: one accent variable per product, a theme registry of 37 entries, and shared interaction primitives rather than shared screens.
AS
Alex S.Jun 20, 2026 · 3 min read
Share
EngineeringT
A suite has a problem a single app does not: twenty products have to feel like one thing while each remains recognisably itself. Solve it by making everything identical and the products become indistinguishable; solve it by letting each team choose and you get twenty applications in a trenchcoat. The design system is the answer to that tension, and most of it comes down to deciding what is shared and what is deliberately not.
What is shared
Interaction primitives: the same menu, table, empty state, toast and dialog behaviour everywhere, used across roughly fifty files rather than reimplemented per product.
A theme registry — 37 entries, from Light and Sepia to Nord, Dracula, Solarized and Gruvbox — applied globally rather than per product.
Layout conventions: the same header, the same place for search, the same rails on wide screens.
Typography and spacing, which are the things people notice only when they are inconsistent.
What is deliberately not
Colour is the exception that makes the rest work. Each product carries its own accent, applied through a single CSS variable rather than through forked components, so the same button is the product's colour wherever it appears. That one variable does the work people usually attempt with separate component libraries: you always know which product you are in, and nothing had to be duplicated to achieve it. The second deliberate difference is the shape of the main workspace — a grid, a canvas and a document are not the same problem, and pretending otherwise produces a spreadsheet that behaves like a word processor.
Thirty-seven themes sounds like indulgence until you watch somebody with low vision switch to a high-contrast one and keep working. The cost of a theme is low when colour lives in variables; the cost of not having one is that a person stops using the product.
What we would tell anyone building one
Start with behaviour, not with colour. Agreeing how a menu opens matters more than agreeing on a blue.
Put the thing that varies in a variable, once. If a difference needs a forked component, it is usually not the difference you think it is.
Write the rule where the code is, not in a separate document nobody opens.
Make the system easier than the workaround — adoption is a usability problem, not a policy problem.
Expect to delete things. A design system that only ever grows is a catalogue of everything anybody tried.
The result is a suite where moving from a document to a spreadsheet to a board feels continuous, without the products losing their identity. Ettex Docs and the rest share the primitives and the themes; what they do not share is the workspace itself, because that is the part that should differ.
Frequently asked
How many themes are there?
The registry holds 37 entries, including light, dark, sepia and several high-contrast and developer-familiar palettes.
How does each product get its own colour?
Through a single accent variable set per product, which the shared components read. No component is forked to change colour.
Does a design system slow teams down?
Only when it is enforced as policy. When the shared primitive is genuinely easier to use than rebuilding one, people reach for it without being told.
AS
Written by Alex S.
Part of the Ettex team — writing about product, engineering and the future of work.