Producing Premium Sites: A Focus on the Design System

Your agency produces between twenty and a hundred showcase sites a year, and you face a structural dilemma. Fully custom work delivers beautiful, unique sites, but every project starts from zero. How many hours go into writing CSS, building templates, making a site work on every screen and fine-tuning typography? A template speeds up production, but the result is interchangeable with ten thousand other sites. You also know that WordPress quickly exposes you to technical debt.

You are looking for an economically viable way to meet your clients' design needs without compromising on technical quality, while keeping the platform simple for your clients to use. Solutions exist.

There is a third way. It industrializes the technical foundation and the visual consistency while preserving the uniqueness of every result. This is the principle behind the derived design system and web factories like Lugor.

The trap of the two extremes

Pure custom work

Every project starts with a blank sheet. Your designer produces a unique mockup, your developer writes CSS from scratch, you test on twelve breakpoints, and you fix visual regressions every time a page is added. The result is excellent. The cost is proportional.

The problem is not quality. It is the lack of reuse. Typographic choices, spacing, interactive states and contrast rules are not carried over from one project to the next. Your team reinvents the wheel twenty times a year. Across fifty sites, that adds up to thousands of hours of work that could have been shared.

The marketplace template

You buy a WordPress or Webflow theme for forty-nine euros, swap the colors and images, and deliver in three days. The client is happy at first. Six months later, they run into a competitor with the same theme. Their trust erodes. Your reputation as a premium agency suffers.

A template solves the speed problem but creates a differentiation problem. It is built to be sold to ten thousand people, and your client is one of them. That does not fit a high-end positioning.

What is a derived design system?

A derived design system starts from a unified technical base and automatically generates all the visual rules from a handful of input variables. You provide four colors and two fonts. The system calculates the derived shades, drop shadows, hover states, gradients, dark mode and accessible contrasts. You get thirty ready-to-use components that adapt instantly to these rules.

Each client gets a visually unique site because the four colors and two fonts are theirs. The underlying technical structure, however, is identical. Your team does not rewrite the CSS. It configures the system.

The result is measurable. What used to take a hundred and fifty hours of CSS and responsive work now takes five minutes of configuration in the CMS. The time saved goes back into content, client strategy and SEO optimization.

Deriving visual atmospheres from the brand guidelines with the design system

Derivation does not stop at colors. An advanced design system can easily offer several visual atmospheres that change the character of the components without changing their structure. They range from frosted glass to animated gradients, floating color orbs and deep matte surfaces. Each atmosphere stays consistent with the client's brand guidelines and adds depth and distinction compared to competitors, at no development cost.

This means two sites built on the same website builder can look completely different. One will be sober and corporate. The other will be expressive and bright. Visitors will never guess that they share the same technical foundation.

The economics for an agency

Take an agency that produces forty sites a year. With the custom approach, each site costs a hundred and fifty hours of technical work: sixty hours of CSS, forty hours of responsive work and fifty hours of CMS integration. That adds up to six thousand hours a year of repetitive technical work.

With a derived design system, the visual configuration takes five minutes. Assembling the pages takes four to eight hours depending on complexity. The rest of the time goes to content, strategy and personalization. The yearly gain is counted in thousands of hours.

Those hours do not disappear. They move to higher-value work: strategic advice, conversion optimization and authority content for the client. The agency delivers a better result with a team of the same size. Or it produces more with a smaller team.

Why doesn't the client notice the standardization?

The client does not see the code. They see the result. If the result is pixel-perfect, true to their brand guidelines, smooth on mobile and desktop, with subtle animations that reinforce their identity, they perceive custom work. The technical standardization is invisible because it is flawless.

It is the same principle as the architecture of a skyscraper. The foundations are standardized. The facades are unique. The occupant does not care about the foundations. They care about the view, the light and the comfort.

How does Lugor answer this equation?

Lugor takes derivation to its operational extreme. The colors and fonts configured in the CMS generate, by derivation, more than eight thousand lines of CSS, thirty ready-to-use components, sixteen visual atmospheres and a self-adapting responsive layout with no explicit breakpoints. Every site is delivered with a Lighthouse score of 100/100 for SEO and 100/100 for accessibility by default, verified at every deployment, along with 1,600 automatically audited criteria (56 WCAG 2.2, 102 SEO and GEO of which 18 are specific to AI engines, 10 OWASP 2025, 1,331 unit tests). The license is on-premise, with no volume-based subscription and no dependence on a third-party vendor. We have documented our architecture and the advantages of Lugor. For a demo and an estimate of the margin gain on your current production volume, feel free to contact us.