--- schema_version: "1" id: b509fe664340f7d80c220b4f76529c535ee8890a1799873b6ae29084068e4c51 title: Use the Newport Design System collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_use_nds.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_use_nds.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 932413b4ca510ed96d160ad602082e3d754de10ddfc8d7abba74906c80b81f2e description: The Newport Design System allows you to customize the appearance and behavior of Omniscript elements. Newport includes Storybook.js, a browser-based preview tool, that enables you to see your design changes in action. products: - Omnistudio release: "264" --- # Use the Newport Design System The Newport Design System allows you to customize the appearance and behavior of Omniscript elements. Newport includes Storybook.js, a browser-based preview tool, that enables you to see your design changes in action. Before You Begin If you're unfamiliar with using command-line interfaces, refer to the [Command Line 101 guide](https://www.git-tower.com/learn/git/ebook/en/command-line/appendix/command-line-101). System requirements: - Git. See [Git documentation](https://git-scm.com/) - Node.js v12 or higher. See [Node documentation](https://nodejs.org/). - Gulp CLI: `Install via npm install --global gulp-cli` Install the Newport Design System: 1. Clone the vlocityinc/newport-design-system repository from [GitHub](https://github.com/vlocityinc/newport-design-system) using a command-line interface. To see what components are provided by Newport, check the contents of the UI/components directory. 2. Change your current directory to newport-design-system: ``` cd newport-design-system ``` 3. To work with the correct version of the Salesforce package, switch to the corresponding branch: ``` git checkout release_version ``` 4. Install the dependencies: ``` npm install ``` 5. Launch the Storybook.js preview: ``` npm start ``` 6. Use the Storybook preview to review the available components and configurations. 7. Add customizations to your theme. See [Customize Your Omniscripts Using the Newport Design System](https://help.salesforce.com/s/articleView?id=xcloud.os_customize_omniscripts_and_flexcards_with_the_newport_design_system.htm&language=en_US&type=5). 8. Apply your customizations either to individual Omniscripts, or globally across your organization. See [Deploy and Apply Global Styling Changes using the Newport Design System](https://help.salesforce.com/s/articleView?id=xcloud.os_deploy_and_apply_global_styling_changes_using_the_newport_design_system.htm&language=en_US&type=5). ## Customize Your Omniscripts Using the Newport Design System To customize the appearance of your Omniscripts, edit the CSS and HTML files in the UI subdirectory of the directory where you cloned Newport. Themes are stored in the design-tokens folder. To create a new theme for your Omniscripts: 1. Copy the vlocity-newport-skin folder to a new folder. 2. Edit the files in the new folder as required. 3. To change the color scheme, modify the color.yml files. Colors are defined using hex RGB codes or tokens that resolve to hex values, which are defined in the aliases/color.yml file. For example, to change the color of a specific component, such as the input element’s orange underline: 1. Edit design-tokens/vlocity-newport-skin/background-color.yml. 2. Update **COLOR\_BORDER\_INPUT\_ACTIVE** to a different color token defined in /aliases/color.yml. When you change colors, the Newport components are recompiled, so there is a slight delay before your changes are reflected in the Previewer. To verify your change, view the input component using the Previewer. For optimal rendering on all platforms, set the control width to 6. Smaller widths may not render correctly on every platform. 4. To preview the effect of Newport Design System styles on an Omniscript: 1. Edit the Script Configuration and paste the path to the top-level CSS file (by default, xxx.css) into the **CUSTOM HTML TEMPLATES** field. The Newport Previewer allows you to see how components render across desktops, tablets, and smartphones. 2. To preview an element or utility, choose it from the lists on the left pane. To view the code behind it, click ****. 3. To navigate the component hierarchy, use the restriction tree, which shows element definitions from base to derived implementations. 4. To view a specific definition, click the corresponding node in the restriction tree. ## Deploy and Apply Global Styling Changes using the Newport Design System Apply modifications to the Newport Design System by adding a static resource that overrides the Newport theme wherever it's available. After it's uploaded, the changes are applied to all Omniscripts that are on the Newport Design System. 1. Download the Newport Design System. See [Apply Global Branding to Omniscripts](https://help.salesforce.com/s/articleView?id=xcloud.os_deploy_and_apply_global_styling_changes_using_the_newport_design_system.htm&language=en_US&type=5). 2. Create a distribution folder containing your changes by issuing this command: `npm run-script dist` 3. In versions before Vlocity Spring '19, change (cd) to the dist folder and zip its contents. (Do not zip the top-level dist folder: cd into it and zip its contents.) 4. In Salesforce, upload the zip file as a static resource. 5. In your Salesforce org, go to **Setup** and, in the Quick Find box, enter **Custom Settings**. 6. Find **UISettings**, click **Manage > New**. 7. Configure these settings: - **Name**: Enter `newportZipUrl` for the changes to be applied. - **Key**: Enter a custom name. - **Value**: Enter the relative URL for the static resource containing your custom styles. To get this URL, go to **Static Resource** (see 4 in the Before You Begin section), hover over the **View File** link, right-click and copy the URL. Enter the relative URL after the domain name, removing the query string (question mark) at the end, leaving just the relative path. For example, the bold text would be copied in this URL: [https://MyDomainName--c.vf.force.com/resource/16679825000/vloc\_customNewport?](https://MyDomainName--c.vf.force.com/resource/16679825000/vloc_customNewport) 8. To enable Newport or Newport Storybook theme on an Omniscript, open an Omniscript and select **Newport** or **Newport Storybook** from the dropdown on the designer canvas or Preview page. After selecting the Newport theme in the designer canvas, the Omniscript automatically appears in the Newport theme when previewed. Switching to Lightning in the preview page displays the Omniscript in the Lightning theme in the designer canvas. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png) Note When creating a new version of an Omniscript originally built with the Newport theme, the new version opens in the designer canvas with the Lightning theme selected by default.