For designing

Resources, guidelines, and tools to create solid and consistent prototypes for your projects.

UI Guidelines

UI Components library and best practice on how / where to use them

  • Components

    User interface (UI) patterns and descriptions of best practices within user interface design.

  • Colors

    Color patterns and codes for different use cases.

  • Foundation

    Guidelines and recommendations on how to structure information during the design process.

  • Mobile Design

    Guidelines for creating and adapting better mobile user interfaces.

For developing

Resources, documentation, and guides on how to get started and stay up-to-date with OneDesign.

Component Libraries and Code Samples

Latest Releases

  • OneDesign-Styles - 3.8.2

    December 9th, 2024

    Minor bugfixes and dependency updates

    Read more
  • OneDesign-Vue - 3.6.6

    Breaking changes!
    December 9th, 2024

    Minor bugfixes and dependency updates

    Read more

Get Started

OneDesign-Styles

Choose one of these options to add Onedesign-Styles quickly to your project.

CDN
  1. Add this import to the <head> section of your html:
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.min.css" integrity="sha384-sXu3vZrgAm282lSyafTkZutGdmEXGj9rjmSuViN9BoNGtlENDsA4bjBGfpPXLvAl" crossorigin="anonymous">
  1. Go to OneDesign-Styles Storybook to get code component samples and start building!
NPM
  1. Create a new .npmrc file on your project root and set up the following registry:
@fortawesome:registry=https://pkgs.dev.azure.com/dnvgl-one/_packaging/dnvgl/npm/registry/
@dnvgl-onefoundation:registry=https://pkgs.dev.azure.com/dnvgl-one/_packaging/dnvgl/npm/registry/
always-auth=true
  1. Install the OneDesign-Styles package
npm i @dnvgl-onefoundation/onedesign@latest

click here if you need more help with authentication

OneDesign-Vue

After loading OneDesign-Styles, install OneDesign-Vue component library:

npm i @dnvgl-onefoundation/onedesign-vue@latest

Import either the whole library or individual components as needed.

And explore the OneDesign-Vue Storybook for all the component samples and documentation.