# Active24.cz > For Active24 we built a new website on a multi-brand design system made for an international group’s hosting brands. Active24.cz was the first to go live on it. ## One foundation. Many brands. For Active24, we built a new website on a platform that separates shared functionality from each brand’s visual identity. Each brand can have its own design, while the technical foundation, CMS and integrations stay shared. Active24.cz was the first website launched on this foundation. [active24.cz](https://www.active24.cz/) 470+ design tokens 55 editorial blocks 2 countries from one codebase 2022 partnership began Screenshot: active24.cz ### It started with a single design The design was originally created in Figma for a new website for one of the hosting group’s brands. The project was then put on hold for a while. But the design was built on variables and components so well that it didn’t have to serve just one website. We decided to turn it into a generic design system for the group’s entire brand portfolio. Active24.cz became the first website where we proved the concept in live operation. **Not another standalone website, but a foundation for the whole group.** ### Unique design, no copied code Each brand was meant to look like itself, but it didn’t need its own technical foundation to do so. So we built the design system on variables that work the same way in Figma and in code. Colours, typography, buttons and other components can change by brand without rewriting the whole theme. Stays shared Technical foundation and generic theme CMS and blocks Integrations with central systems Further development of the platform Changes by brand Colours and typography Buttons and components Content and language Market configuration **New brand = configuration, not a rebuild.** ### One technical base for several brands We built the platform as a WordPress multisite, so a single installation serves multiple brands and countries. **Platform architecture** - **Figma** (Design system): variables for colours, typography and components - (tokens 1:1) → **WordPress multisite** (Shared foundation): generic theme and shared functionality - (data via API) → **Central systems** (Data source): products, hosting and domain prices, basket - (brand configuration) → **Brand websites** (Output): localised content and each brand’s own look Shared code means less duplication and simpler further development. Each brand still has room for its own visuals and content. Active24.cz and Active24.eu now run on the same technical foundation, yet each can have localised content and its own brand configuration. ### A design system that works as it does in Figma The platform’s visuals are built from 470+ design tokens. Colours, typography and components are defined by shared variables. A single change no longer has to be made separately in the front end, the editor and the admin. For a new brand, the design parameters change. The functional foundation stays the same. **A rebrand does not have to mean a new front end.** ### Editors got their own building blocks We built the website on the native Gutenberg editor and added 55 custom blocks. The blocks have responsive settings right in the editor, so the editorial team can change both the content and how it is presented without a developer. What editors build pages from Hero sections Product cards Comparison tables FAQ Campaign blocks Scroll animations ### Products and prices are not updated by hand The website is connected to the company’s central systems. Products, hosting and server prices, domain prices and other data sync directly via API. Editors don’t have to retype data that is created and changed in other systems. The website shows current information straight from the source. **Editors manage content. Systems supply current data.** ### Domain pricing nobody updates by hand Active24 offers registrations, renewals and transfers for hundreds of domain extensions. Prices load directly from the central registry. Editors handle the copy and page content; the prices themselves update automatically. The result is a price list nobody has to check and rewrite on a regular basis. ![Active24 domain price list with prices incl. and excl. VAT](https://webikon.sk/cdn-cgi/image/width=3060,format=auto,fit=scale-down/https://media.webikon.sk/originals/59/cc/59ccffd7d62def9f.jpg) Screenshot: active24.cz. Domain extension price list with prices incl. and excl. VAT. **Prices straight from the source.** ### Configurators with instant price updates Visitors configure hosting plans and virtual and dedicated servers to suit their needs. They choose parameters such as the operating system, add-ons or billing period. The price is recalculated directly via API without reloading the page. The visitor then sends the finished configuration straight to the basket. ![Active24 web hosting plan configurator with sliders and live prices](https://webikon.sk/cdn-cgi/image/width=3060,format=auto,fit=scale-down/https://media.webikon.sk/originals/ea/bd/eabd09280c1313c2.jpg) Screenshot: active24.cz **Every parameter change recalculates the price without reloading the page.** ### Users do not see how many systems sit behind it The platform works with central systems, APIs, configurators and multiple brands. What the user sees is a simple website that responds instantly. The technical complexity stays inside the platform. Users get current prices, product configuration and information without unnecessary steps. **Complexity belongs in the architecture, not in the user interface.** ### One website became a long-term partnership We delivered the implementation based on the Figma design, working closely with Active24’s in-house team. We keep working on the platform after launch. New campaign blocks, product pages and other changes are added as the client needs them. **Design in Figma** The design was created in Figma. We delivered the technical foundation and the implementation. **Agile development** We worked in iterations so priorities could be adjusted during the project. **Working with the in-house team** We worked on the implementation directly with Active24’s in-house team. **Ongoing development and support** The partnership has been running since 2022, and the platform keeps evolving. ### The result is more than a new website Active24.cz was the first website built on the new shared foundation. Live operation proved that a single technical foundation can combine a brand’s own design, shared functionality and data from central systems. The platform is now the foundation for the client’s other websites. So a new brand doesn’t have to mean a new development project: the foundation stays shared, and only the design and content configuration change. ![Active24 domain registration page with a domain availability check](https://webikon.sk/cdn-cgi/image/width=3060,format=auto,fit=scale-down/https://media.webikon.sk/originals/67/a2/67a281b8e337832e.jpg) Screenshot: active24.cz. Domain registration with an availability check right on the website. **Active24 now runs on a platform that further websites can grow from.** ### Technology and architecture Active24 needed a foundation that could carry multiple brands without duplicating code. Design system #### Figma design system The design is built on variables and components rather than static screens. That is why it could serve multiple brands. #### Design tokens More than 470 tokens for colours, typography, spacing and components. They are defined once and apply to the front end, the editor and the admin. #### Generic theme + brand configuration The theme carries the functionality; the configuration carries the look. So a new brand doesn’t need its own copy of the theme. CMS #### WordPress Multisite One installation serves multiple brands and countries with shared code, design and media library. Localisation is part of this foundation and does not need a separate project branch. #### Gutenberg Instead of a custom page builder, we used the native editor. Editors work in an environment that is part of WordPress and survives its updates. #### Custom blocks for editors 55 blocks designed for this website, with responsive settings right in the editor. The design is not dictated by generic plugins. Data and integrations #### Integrations with central APIs Products, hosting and server prices, and domain prices come from the systems where they originate. The website does not keep them in its own database. #### Hosting and server configurators Parameters are recalculated via API without reloading the page, so the price responds to every change instantly. #### Basket integration The finished configuration goes straight into checkout, and the user doesn’t have to enter it a second time. ### More long-term partnerships [All projects](/en/projects/) - [Sharp · Electronics](/en/projects/sharp-consumer-electronics/) - [WebSupport · Hosting](/en/projects/websupport/) ### A website for another brand need not be a new project. We’ll design a technical foundation that grows with your product, your team and your brand portfolio. [Discuss your project](/en/contact/) No-obligation consultation. We reply within 24 hours. --- Source: https://webikon.sk/en/projects/active24/