---
schema_version: "1"
id: 431627923d81d7d035be4cafd7140cd02939ea9c6be88c974ab69ac46b0ef8fa
title: Apply Global Branding to Vlocity Cards (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_apply_global_branding_to_vlocity_cards.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_apply_global_branding_to_vlocity_cards.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 25776dc7e2bd38fafa63529ea59eb3fc5c89f45c20dc4b0d7f601bbc3f1865e4
description: For the managed package runtime, apply global style changes to all Vlocity Cards in your org by using the Newport Design System. The Newport Design System enables you to download, edit, and override the existing Newport CSS styles with your own styles.
products:
  - Omnistudio
release: "264"
---
# Apply Global Branding to Vlocity Cards (Managed Package)

For the managed package runtime, apply global style changes to all Vlocity Cards in your org by using the Newport Design System. The Newport Design System enables you to download, edit, and override the existing Newport CSS styles with your own styles.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d131295e46">
              <p style="margin-bottom:0;">Required Versions</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Required Versions" class="slds-cell-wrap" style="vertical-align:top;" headers="d131295e46 ">
              <p style="margin-bottom:0;">Available beginning with Vlocity Insurance and Health Summer '19 and CME
                Fall '19.</p>
            </td>

          </tr>
        </tbody>
      </table>

Before You Begin

- If you are unfamiliar with using command-line interfaces, see [Command Line 101](https://www.git-tower.com/learn/git/ebook/en/command-line/appendix/command-line-101) (git-tower documentation).
- System Requirements:
    
    - [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) (git-scm documentation)
    - [nodeJS v12.0 or higher](https://nodejs.org/en/download/package-manager/) (Node documentation)
    - Gulp CLI: `npm install --global gulp-cli`

1. Ensure that Node and NPM are installed on your local computer using the commands NPM outlines in their documentation [https://www.npmjs.com/get-npm](https://www.npmjs.com/get-npm). If you do not have Node or NPM, download them from [https://nodejs.org/en/download/](https://nodejs.org/en/download/).
2. Clone the latest Newport Design System package from [newport-design-system](https://github.com/vlocityinc/newport-design-system), and follow the instructions outlined in the GitHub repo.
3. Edit the CSS in a local text editor and save your changes.
4. Preview the changes using Storybook. For more information, see the instructions found in the [newport-design-system](https://github.com/vlocityinc/newport-design-system).
5. To deploy the CSS to Salesforce, see [Deploy Card Template Changes with the Newport Design System (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_deploy_card_template_changes_with_the_newport_design_system.htm&release=264.0.0&type=5 "For the managed package runtime, the Newport Design System allows you to apply custom changes to the Newport templates that can then be applied to any Card using a Newport Design System template.").
6. Preview the changes in your Salesforce org in the Card Designer Preview.

- **[Deploy Card Template Changes with the Newport Design System (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_deploy_card_template_changes_with_the_newport_design_system.htm&release=264.0.0&type=5)**  
    For the managed package runtime, the Newport Design System allows you to apply custom changes to the Newport templates that can then be applied to any Card using a Newport Design System template.