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 best practices.
Requires Figma account (free or paid). - 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
Get Started
OneDesign-Styles
Choose one of these options to add Onedesign-Styles quickly to your project.
- Add this import to the
<head>section of your html:
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.9.2/oneDesign.min.css" integrity="sha384-6a0LwerCw7XkjtcY3xyX4q3yflTehtgmiRY2h8DopYeWir9DK/oO6MvkYg8NeDCs" crossorigin="anonymous">
- Go to OneDesign-Styles Storybook to get code component samples and start building!
- Create a new
.npmrcfile 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
- 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.