Problem

Børsen’s digital products had grown organically across editorial and commercial teams, resulting in inconsistent UI patterns and interaction behaviours across the platform. With multiple products and user roles sharing the same interface, the lack of a shared design foundation made it harder for users to recognise interactive elements, navigate efficiently, and complete tasks, reducing overall predictability and usability.

The system had to serve two fundamentally different verticals.

The system had to serve two fundamentally different verticals, editorial and commercial, each with their own needs, workflows and visual expectations. The design system became the shared foundation that allowed both to operate consistently without compromising either.

My role

UX/UI Designer & Design System Owner

Responsible for establishing a scalable design foundation, defining interaction patterns, and ensuring consistency across products.

Approach

Focused on creating a clear and consistent design foundation across the platform:

• Reviewed the existing codebase and interfaces to map the full extent of fragmentation
• Collaborated with editorial and marketing graphic artists to establish shared foundations across print and digital
• Aligned stakeholders around a shared direction through a workshop before component work began
• Built the component library in close collaboration with the head of development to ensure design and implementation stayed aligned

Solution

The work was structured around three interdependent layers: a design foundation covering typography, colour and icons, a token architecture to make the system implementation-ready, and a component library built on top of both. Each layer depended on the one before it, ensuring the system was coherent from the most abstract values down to the most specific UI components.

Foundation / Typography

Typography was one of the first foundations established in the system. Rather than picking sizes arbitrarily, the scale follows a minor thirds progression, rounded to the nearest interval of 4. Line heights are calculated from the font size using a consistent factor, 1.2 for display and headlines and 1.3 for body and labels, ensuring a harmonious vertical rhythm across the platform.

Approximately following the Minor Thirds logarithmic function rounded to the closest 4-interval.
Next size = Current size x k
k = 1.2 / 1.3

Two typefaces carry the system: Tiempos Headline and Tiempos Text for editorial content, and GT America Condensed for UI elements such as labels. Tiempos brings editorial weight and personality to the content, while GT America Condensed keeps the interface layer neutral and functional.

Foundation / Color system

The colour palette is divided into two distinct layers, each serving a different role in the system.

DNA colours define Børsen’s visual identity across all platforms. These are the brand’s core colours, black, beige and pink, applied consistently to establish recognition and personality.

Semantic colours communicate system state and feedback to the user. By separating identity from function, the system remains flexible without compromising either.

All colour combinations in the system were validated against WCAG accessibility requirements. The compliance matrix below documents which pairings meet the contrast thresholds for text and UI elements, ensuring the system is accessible by default rather than as an afterthought.

Every colour in the palette was tested against every other to identify the combinations that meet WCAG contrast requirements.

Icons

The existing icon set had been curated from multiple sources over time, resulting in inconsistent visual styles and sizes across the platform.

All icons were remade from scratch to establish a unified visual language. Each icon is built on a 24×24px grid with a 2px safe zone. A consistent 2px stroke weight ensures the icons read clearly across sizes and remain visually aligned with the rest of the system.

All icons remade from scratch on a unified 24×24px grid with a 2px stroke weight and 2px safe zone, ensuring visual consistency across the platform.

Foundation / Tokens

The token architecture follows a three-layer model: primitive tokens define raw values, alias tokens assign intent, and component tokens apply them to specific contexts. To make the system predictable and self-documenting across design and implementation, tokens follow a consistent naming convention built from the component, its role, variant and state.

Used when the role unambiguously defines the value type, such as surface or text.

Used when a role can carry multiple value types, such as border, which may define both colour and width.

Component System

The component library was built on top of the foundation layer, ensuring every component inherits the typographic scale, colour tokens and interaction patterns established earlier in the process.

A key part of this work was defining a consistent interaction language across the platform. Interactive elements were aligned visually and behaviourally to make them easier to recognise and use. Clickable elements were given a consistent, subtle corner radius to distinguish them from static content, and all components were built with a full set of states, default, hover, focus, active and disabled, ensuring predictable behaviour regardless of context.

The same component across its full range of configurations, combining labels, helper text and validation states to cover the needs of the entire platform.

Consistency across context

The same components and token structure were applied across different parts of the platform, ensuring predictable behaviour regardless of context. Rather than building custom solutions for each section, token modes allowed individual sections to express their own visual identity within the shared system

Impact

• Established a shared design language across editorial and commercial products for the first time
• Significantly reduced design time by providing a reusable foundation to build from
• Created the groundwork for faster development time to market, pending full implementation
• Reduced the need for one-off solutions by providing scalable, well-documented components