Roberto Viana

Design system · 2024

Malty design system

Architecting a design system

Malty, the Carlsberg design system cover

Beyond a UI kit

At Carlsberg, the digital landscape was fragmented: inconsistent UI slowed every launch and diluted the brand. Rather than build a UI kit, we built a living ecosystem of shared language, components, and code.

100% unified UI across all B2B and B2C touchpoints, with full WCAG 2.1 accessibility and developer parity.

The mission: an open-source design system that supports dozens of projects while guaranteeing accessibility and developer parity, not just a folder of screens.

Malty components: form fields, buttons, sliders, empty states, status chips
Malty components: notifications, toggles, checkboxes, radios, date picker

Design principles

We established nine core pillars as organizational guidance. Principles are the structural integrity of a design system: they keep decisions consistent long after the first release.

Nine Malty design principles: understand, empathise, include, analyse, collaborate, reuse, scalable, innovate, iterate
Nine pillars, from understand and empathise to innovate and iterate.

The foundation

We moved from arbitrary names like "Yellow-500" to semantic tokens. Change a brand's primary from green to blue, and one token updates the whole ecosystem. Transparent state layers handle interaction, so consistency holds without hundreds of hard-coded colors.

Malty type scale across heading and body levels
The type foundation: one scale, applied consistently across every product.
Color and contrast tokens checked against WCAG AA and AAA
Color tokens, every pair checked against WCAG AA and AAA.
The Malty icon library
A single icon library, drawn on one grid.

The systems architect

It fixes the common failures of popular design systems with a foundation that stays intuitive for designers and seamless for engineers. Every property reads from one place: element, tone, emphasis, and state.

Semantic token model: element, tone, emphasis, and state
Component anatomy with semantic token annotations on an account menu
Every element bound to a semantic token: fill, text, stroke, and state.

Light and dark mode: consistency in contrast

The same component renders correctly in both themes from one source of truth. For dark mode we built a surface-elevation system: the higher an element sits, the lighter its background becomes, so depth reads without a single extra hard-coded color.

The same account menu rendered in light and dark mode
One component, both themes, no divergence.
Base, raised, and overlay surfaces in light and dark mode
Surface elevation: base, raised, overlay, lighter as it lifts.

Overlays over duplication

We built a scalable interaction-state system to speed up both prototyping and engineering handoff. Standard transparent overlays handle hover and press, which removed hundreds of redundant "hover-specific" color tokens.

Feedback stays uniform across the whole suite, consistent for users and lean for the asset library. And because only the base reacts to color, the interactions never change.

Interaction states default, hover, pressed, focus, disabled, built from transparent layers
States built from layers, not duplicated color sets.

Intuitive component architecture

A design system is only successful if designers actually use it. We built using a strict Atomic Design methodology, starting from Atoms (icons, tokens) to Molecules (pills, forms) to Organisms (product cards).

We utilized Auto-layout, Component Properties, and Variants to make components "smart." Instead of searching through a layer list, designers use simple toggle switches to change states, add icons, or swap layouts.

We also used flexible "Slot" components, allowing designers to inject custom content into complex organisms (like Modals or Accordions) without detaching the main instance.

A product card component with its full set of properties
One product card, every variation driven by properties.

Spacing and interaction

A 4-point grid removed arbitrary spacing choices: every value is a multiple of four. The result is a reliable visual rhythm that scales seamlessly across the global product suite.

Animated 4-point spacing grid applied to a layout
The 4-point grid in motion, every gap a multiple of four.
Spacing tokens annotated on a product card
The same rhythm applied down to a single card.

Interaction and motion

Motion is a token too. Transitions, feedback, emphasis, and expression are defined once and reused, so the system feels alive and predictable rather than decorated case by case.

Animated component interactions across the product card and buttons
Components reacting in real time, all from shared motion tokens.
Motion principles: transitional, feedback, emphasis, and expressions
Four motion principles: transitional, feedback, emphasis, expression.

Scalability at speed

New market launches dropped from months to weeks, with around 80% of the UI pre-built and pre-tested.

Malty reached 100% unified UI across all B2B and B2C touchpoints, and open-sourcing it established Carlsberg as a leader in the design community.

Malty applied across multiple Carlsberg product screens

See another project

Carlshop Plus
B2B2024 — present

Carlshop Plus

Scaling an e-commerce ecosystem for Asian markets.
Cadi field-sales app
B2B and B2C2023

Cadi

A field-sales app for reps on the move.
← Back to all projects