Foundation

Color

To be able to offer a world-class gaming experience and tackle the pleasant challenge of Svenska Spel having 20+ different products and brands that are incredibly strong in their own right, we have developed a robust, systematic color system.

The system is built on primitives, variables and themes that are mapped to and from all UI components. By offering hierarchical theming with Svenska Spel at the base, Svenska Spel can be present even deep within a heavily themed and colorful product.

Architecture of the color system

A cohesive system – from palette to component. Each product's color palette is connected to a shared logic via color mapping and semantic tokens. This makes the system scalable, consistent and flexible – every component always knows which color to use, and why.

Themes

Each theme comes in 4 variants – Light, Light-secondary, Vibrant and Dark. They are built on the same architecture, but with different color palettes and contrast levels to suit different use cases and preferences.

Below are some examples of how it can look when we build up an interface structure using surface layers in the system. The surface layers are like layers that create depth and contrast, and help guide the user through the interface. Content and components are then added on top, where each part has a clear role in the structure. The shared foundation keeps the design cohesive – whether the theme is light, dark or vibrant.

Surfaces and layers

In this example, the interface has been built up using only Surfaces – i.e. surface layers in the system. Base, Standard and various layers that create depth and contrast.

• Contrast layer – Placed on top of Base or Standard to enhance focus and guide the user.
• Neutral layer – Has adaptive transparency (alpha/opacity) and adapts to the underlying surface.

Content

This is how it looks when we start adding content to our surfaces – and how it translates between different themes.

• The structure is built on containers with content, where each part has a clear role.
• The shared foundation keeps the design cohesive – whether the theme is light, dark or vibrant.

Combined themes

Here we see how Light and Vibrant themes can work together.

• By combining them, we create contrast, dynamics and guidance — a visual language that engages and helps the user.
• Each product team gets support in how, when and where vibrant should be used. It is entirely optional, but can elevate the experience where it fits.

Variables and tokens

The system is built on variables and tokens that connect the color palette with components and patterns. This makes it easy to maintain a consistent design, while providing the flexibility to customize and evolve the design over time. By using semantic names and a clear structure, it becomes easier to understand and use the system – for both designers and developers.

Variables in action

We use variables and color tokens to create structure, contrast and clarity. Here you can see how each color has a clear function — and how to choose the right one based on context. Now we look at how the names break down into a logical and simple structure.

Depth and layers

The surface layers in the system are like layers that create depth and contrast, and help guide the user through the interface.

Let us look at the layers in the interface from a new perspective to better understand how a UI is structured and the logic behind it.

States

We also have different states where each color points to the primitives of the respective product.

We have developed an adjustment model for states that adapts to themes. Each state – hover, pressed, selected – adjusts the color with a plus or minus value depending on the color mode (light, dark, vibrant). This creates a consistent visual rhythm and optimal contrast, regardless of theme.

Figma

All primitives, variables and tokens in Figma are fetched from code which then generates a Tailwind-friendly .css file for each product with its 4 themes.

The structure in Figma makes it easy to manage variables, components and styles. By organizing them in clear groups and libraries, we create faster workflows, better reuse and a consistent visual identity. It saves time and simplifies collaboration within the team.