You are here:
Newport Design System
Use the Newport Design System to design, customize, and preview your Omniscripts directly within the designer canvas without switching between design and preview modes. The system offers Newport and Newport Storybook themes in addition to the existing Lightning theme. The Newport theme is available in the designer canvas and preview alongside the Lightning theme. The Newport Storybook theme is available only in the designer preview, alongside the Newport and Lightning themes. Previously, the Omniscript Designer canvas supported only the Lightning theme, while preview mode supported both Newport and Lightning.
Switch between the Lightning, Newport, and Newport Storybook themes in real time to get instant visual feedback in the designer preview, similar to the package designer. Additionally, override default styles and upload custom design files to align with your branding requirements.
The Newport Design System is designed for both designers and web developers. It provides a centralized framework with custom, optimized CSS files for consistent rebranding and restyling of Omniscripts. Use this integration to streamline your design process.
-
For designers: Use the new Design System to review all components and download a Sketch library to accelerate your design process.
-
For developers: Visit the Vlocity Github repository to customize and rebrand all Vlocity Newport-based templates in one place.
The Newport design system offers these features:
- Real-time theme preview in the Omniscript designer canvas, with the ability to switch between Lightning, Newport, and Newport Storybook themes
- Seamless customization of Omniscripts and Flexcards, with support for overriding default styles to ensure consistent branding
- Consistent styling of components, with asynchronous style loading for a smooth design experience
- Streamlined design process, reducing the need to toggle between design and preview modes
- 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.
