1 / 2
TINE had an estimated 20–30 different button implementations across brands and repos — same intent, different code every time. KREM was TINE's initiative to regain control, keep UI consistent, and speed up delivery. I was frontend lead from Nov 2023 to Sep 2024 (a lighter stretch over summer), working målstyrt with the internal team: workshops and content inventory first, then tokens, then Button in production by end of Q1 2024.
Turborepo monorepo — tokens, React components, shared TypeScript and ESLint packages — with Figma as token source of truth, three brand themes (TINE Handel, Fjordland, Diplom-Is Handel), trunk-based dev, Changesets releases to Azure Artifacts, Chromatic on every PR, and public Storybook. Not every product ran React; the token layer still gave value. Early adopters tested preview packages before stable releases — surfacing real issues like CSS cascade layers on older Chrome builds outside our test matrix.
KREM is TINE's multi-brand design system — named through an internal democratic competition (K.R.E.M; the acronym expansion was chosen by TINE). I led frontend for roughly ten months on the calendar, with a quieter summer in the middle. The public Storybook is still the best place to browse what we shipped: tokens, components, and three brand themes side by side.
TINE runs many brands and many codebases. Buttons alone had an estimated 20–30 implementations — built differently, styled differently, maintained separately. That cost speed, consistency, and confidence. The initiative came from TINE itself: one shared foundation instead of reinventing UI per team and per brand.
We ran workshops and a content inventory with TINE's internal team — designers, developers, and stakeholders — to learn what mattered most and catalog what already existed. That shaped a pragmatic backlog: critical components first, not the full wish list sitting in the corner of someone's Figma file.
Ship value early, iterate in production. Foundations first — global tokens plus per-brand themes covering color, spacing, radius, shadow, semantic component tokens, and breakpoints. Then Button in production by end of Q1 2024. Then core components and replacement in selected target TINE projects. Early adopters got preview packages (Pokémon codenames) before we promoted stable releases through Changesets.
One component API, three brand token modes on top of shared global tokens: TINE Handel, Fjordland, and Diplom-Is Handel. Figma was the source of truth for tokens — designer changes opened a PR into code. Token modes per brand; components consumed the same typed token layer.
Not every brand or repo could adopt React components — legacy stacks and older browsers were real constraints. Those teams could still get value from the token layer: shared colors, spacing, radius, and semantic CSS without a full component migration. Preview packages surfaced integration pain early — including CSS cascade layers breaking on a Chrome ~2020 build that was not in our test suite. We fixed forward and tightened what "supported" meant.
KREM gave TINE a shared foundation for React teams, while non-React products could still adopt the token layer. What I am proudest of is the iteration rhythm: go to production early, learn from real adopters, release again. Less catalogue, more shipping.