Powering Quality and Speed: A Multi-Brand Design System for S&S

Tasked with unifying two distinct product brands, I led the creation of a scalable design system to eliminate inconsistency, accelerate development, and strengthen the brand across the entire ecosystem.

One of the key reasons I was brought on board was to create and maintain a unified design system that would streamline collaboration between the marketing, graphics, and development teams. Working closely with one other designer and a small group of front-end developers, I led the creation of the S&S Design System (S&S DS).

The company's two main products, Devmio (serving the international community) and Entwickler.de (focused on the German market), had evolved into robust platforms with their own sub-brands. While each product maintained a distinct identity, they were closely connected. This growing complexity created an urgent need for a scalable design system that could adapt to each brand's unique characteristics while maintaining consistency across the entire ecosystem.

Tools

Scope

• Improved accessibility - Components now meet color contrast and sizing standards.
• Faster design-to-dev handoff - Clear documentation and tokens allowed developers to implement designs without delays or guesswork.
• Cross-platform consistency - UI now looks and behaves consistently across conference sites, the main platform, and marketing assets.
• Increased design efficiency - Designers no longer spend time reinventing components or resolving conflicts in visual language.

My initial focus was on building a flexible yet consistent component system for our suite of conference websites, including DevOpsCon, iJS, MLCon, JAX, and BASTA!. Each brand had its own color palette and location-based themes, layered on top of global brand styles. I began by auditing existing UI components, identifying inconsistencies and accessibility issues across brands. From there, I created modular, reusable components that could adapt visually without compromising layout integrity or readability.

Close collaboration with developers early in the process ensured smoother handoffs and integration. To maintain alignment across the graphics, marketing, and dev teams, I documented design usage, component behaviors, and brand mappings, including color roles, states, spacing rules, and responsive logic. The system was built to scale: new sub-brands or tone shifts could be accommodated without reinventing the foundation.

• Brand and Corporate Identity Alignment - A single source of truth for brand colors across platforms ensures consistency and strengthens brand identity.
• Enhanced Design Efficiency - By using pre-designed components, we could focus on solving real problems for the conference websites, rather than reinventing the wheel.
• Consistency in Marketing and Brand Design - With both designers and the marketing team working in WordPress, we maintained a consistent tone and format, allowing them to focus on solving problems rather than creating new components.

The first attempt covered a lot of ground especially across our conference websites and marketing needs but it didn't scale beyond that. The system lacked support for other key areas like our platform website, print materials, and social media assets, which led to inconsistencies in execution and brand expression.

We also noticed a disconnect between design and development. Even when components were implemented correctly, the turnaround time was long. In some cases, developers had to interpret missing details or rely heavily on clarification, slowing down the build process. It became clear that the system needed to be updated, extended, and made more practical for day-to-day implementation across all touchpoints.

Platform Developers: Emphasized the need for redesigned components, improved accessibility, and more structured color application. While entwickler.de required a serious, editorial CI, devmio needed to preserve its friendly, playful tone.

Marketing & Web Teams: Noted that existing components lacked uniform structure and were often rebuilt for different campaigns. They needed a shared language to better align with the design system across CMS and custom builds.

Graphic Design Team: Expressed concerns about visual inconsistency, with assets feeling disconnected due to varying fonts, colors, and layouts. There was confusion around what should be reused versus newly created for specific use cases.

With the knowledge of how broad and unique our product was, we decided to conduct a component audit and document findings. This helped us identify inconsistencies in existing components and redesign patterns across all platforms.

We then prioritized high-impact components across platforms (buttons, forms, typography, spacing) and aligned with the development team on feasibility and implementation gaps. We built over 300 components, with more actively in development. Each component included comprehensive usage guidelines, relevant links, and practical examples, enabling the team to work effectively and confidently with minimal oversight.

Our audit revealed deep inconsistencies across the platforms both visually and functionally:

• Icons were misaligned in stroke weight, size, and style, lacking visual harmony.
• Shared components such as cards, modals, and input fields had different implementations across each platform, leading to fractured user experiences.
• The color system had grown overly complex; many colors were undocumented, redundant, or failed to meet WCAG accessibility standards, making design decisions slower and inconsistent.
• There was no single source of truth for spacing, typography scale, or component states, which made it difficult for teams to collaborate or reuse components effectively.
• Buttons varied in font size, corner radius, color, and hover states across websites.

We redesigned the button system to be visually cohesive across all platforms while allowing for brand-specific adaptations. States (hover, active, disabled) are clearly defined, contrast ratios have been improved for accessibility, and documentation provides guidance on sizing, spacing, and usage context.

We drastically reduced and restructured the color palette, colors are now grouped into global (neutral, semantic) and brand-specific categories with defined use cases. We also reviewed all colors for accessibility and ensured contrast levels meet WCAG AA/AAA where applicable.

Documentation now includes usage examples, tokens, and naming conventions to reduce ambiguity for designers and developers alike.

The typography is also very important (around 90% of designs are text). This was hard to curate because different typography was used across different platforms. We used Open Sans Condensed for both Entwickler.de and Devmio. We also adapted Open Sans for the conference platforms. All these fonts are well labeled and can be easily interpreted by any designer and developer out there.

We standardized icons using Material Design's icon set to ensure consistency in stroke weight, sizing, and alignment. This helped unify the UI language across platforms and reduce visual noise.

• Build incrementally - Tackling components one by one and validating them through real use cases ensured higher adoption.
• Involve stakeholders early - Engaging platform developers, brand designers, and marketing teams from the start helped identify hidden friction points.
• Don't underestimate documentation - Clear and visual documentation is just as important as the components themselves.

• Expand the component library to cover edge cases and future needs.
• Develop color variants for light/dark modes and seasonal themes.
• Establish tokenized design variables for easier dev integration and theming.
• Introduce a feedback loop and governance model to evolve the system continuously.