A common language and platform
The Coloplast Design System provides a common visual language for designers, developers, and stakeholders. It allows everyone to speak the same design language, and provides the tools and resources to create and build consistent digital experiences.
Step 1: Install the design system
The design system package is available to anyone within the Coloplast organisation in Azure DevOps, where you’ll find guidance on how to generate an authentication token to access the design system. Once you’ve updated your .npmrc file with a valid authentication token, you can get started by running:
npm install @coloplast/design-system
This command adds the design system package to your front end project, and gives you access to all the styles, helpers and components you’ll need.
Step 2: Import a theme
Themes are the foundation on which the design system is built, they provide the set of variables needed to provide an on-brand experience.
To get started, let’s import the default theme, the themes are created as CSS files, so you can either reference the CSS file, or import it into your main SCSS file, e.g.
@import "@coloplast/design-system/dist/theme-default";
This will provide you with a set of CSS variables for values like colours and spacing.
Step 3: Reference the Coloplast font
The ‘Coloplast Sans’ web font is hosted on a CDN, you can reference it as follows:
<link rel="stylesheet" href="https://www.coloplast.com/cdn/css/coloplast-sans.css">
Step 4: Access style tools
A number of style tools are exported by the design system to provide an interface for the CSS variables, these are provided as SCSS functions and mixins and can be imported into your SCSS files like this:
@import "@coloplast/design-system/dist/scss/core";
Step 5: Use components
The design system provides a set of Vue 3 components that map 1:1 with design components in Figma. Refer to the component documentation to understand which components are available, and how to import them into your project.
import { DsButton } from "@coloplast/design-system";
Step 6: Give feedback
Any feedback you have around improvements, challenges, or ideas for new components are always welcome. Reach out to the design system team, and we’ll do our best to support you.