Skip to main content
Webpage interface displaying TINE design system with sections for designers, developers, and more.
TINE — KREM Design System — image 2

1 / 2

DevelopmentTINE

KREM Design System

Completed2023–2024111

Overview

One shared component library, three brand themes and a token layer that teams could use without React. I led frontend development for TINE’s KREM design system from November 2023 to September 2024, working with the internal team on components, tokens and package releases.

TINE needed a shared UI foundation across brands and codebases. KREM combined React components with a separate design-token layer, supporting three brand themes while giving teams on other stacks a way to adopt the foundations.

I led frontend development from November 2023 to September 2024, working with TINE’s internal team on the component library, token workflow and releases.

Starting with what teams needed

Workshops and an inventory of existing interfaces helped us prioritise components with designers, developers and stakeholders. We started with shared foundations and a Button component in production by the end of Q1 2024, then expanded through feedback from early adopters.

One API, three brand themes

TINE Handel, Fjordland and Diplom-Is Handel shared a component API, with their visual differences expressed through brand token modes. Global and semantic tokens covered colour, spacing, radius, shadows and breakpoints. Figma was the source of truth for tokens, with designer changes opening pull requests into code.

Adoption without a full migration

Legacy stacks meant not every team could use the React components. Keeping the token layer separate let those teams adopt shared styling without replacing their frontend framework.

Releasing early and learning from integration

Preview packages let teams try changes before stable releases. One integration exposed CSS cascade-layer problems in an older Chrome version outside our test coverage. We fixed the issue and clarified browser support—a reminder that adoption depends on the environments teams actually use.

A Turborepo monorepo held tokens, React components and shared configuration. Changesets coordinated versioning, changelogs and releases to Azure Artifacts. Strict TypeScript, Storybook and Chromatic checks on pull requests supported API consistency, documentation and visual review.

What we delivered

KREM gave React teams a shared component foundation with three brand themes, while other products could use the tokens independently. The most useful part of the approach was the feedback loop: release something usable, learn from integration and improve the next version.

Explore the components and brand themes in the public Storybook.