How the Norwegian Food Safety Authority uses Designsystemet without React

From shared foundation to custom adaptations

At the Norwegian Food Safety Authority, we’ve long held high ambitions for user experience and accessibility. To achieve this effectively, we chose to build on top of the components, tokens, and principles from Designsystemet instead of starting entirely from scratch.

By maintaining a local copy of Designsystemet’s Figma library and importing classes from the Design System CSS package via CSS modules composition, we’ve gained a solid foundation that can freely be adapted to our brand and needs. This approach has saved us significant time and resources, while also supporting several requirements for universal design and scalability.

Technology that fits every team

At the Norwegian Food Safety Authority, each development team chooses its own tech stack. For the design system to work in practice, it therefore needs to be framework-agnostic.

By using CSS Modules, we can extend Designsystemet's classes and provide an object of hashed class names that prevents name collisions. Regardless of the technology, our teams can then import class names into their code:

import { styles } from '@mattilsynet/design';

const MyButton = () => {
  return <button className={styles.button}>Klikk meg</button>;
};

For those using React, we also offer components that essentially just apply the correct class name:

import { Button } from '@mattilsynet/design/react';

const MyButton = () => {
  return <Button>Klikk meg</Button>;
};

We also use HTML attributes to offer component variations:

import { styles } from '@mattilsynet/design';

const MyButton = () => {
  return (
    <button className={styles.button} data-variant="primary" aria-busy="true">
      En primærknapp med lasteindikator
    </button>
  );
};

Interactivity

While most aspects of a design system only affect appearance, we sometimes need JavaScript to handle interactivity.
In these cases, we use vanilla JavaScript that listens for events on the document:

document.addEventListener('toggle', (event) => {
  if (event.target.closest(`.${styles.popover}`)) {
    if (event.newState === 'open') {
      // Attach positioning logic for popover
    } else {
      // Detach positioning logic for popover
    }
  }
});

More than just technology

Although many associate Designsystemet with React components, it’s much more than that. For us at the Norwegian Food Safety Authority, the Figma library, CSS tokens, and documentation are invaluable resources.

Curious to take a look under the hood of the Norwegian Food Safety Authority’s solution?

Visit design.mattilsynet.no or github.com/mattilsynet/design

– We’re proud to be part of a project that benefits the whole of Norway.

Bidragsytere

Eirik BackerStein Olav PettersenGøril Torske