Verint's LUX (Live User eXperience) is our design system for digital products and experiences.
With the LUX Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
| Info |
|---|
LUX is a living breathing design system and is always changing and improving. Make sure to revisit this space regularly to ensure you are designing and implementing with the current guidelines. |
Intro
As Verint's official design system, LUX serves a wide range of designers and developers building digital products and experiences. The goals of the system include improving UI consistency and quality, making the design and development process more efficient and focused, establishing a shared vocabulary between designers and developers, and providing clear, discoverable guidance around design and development best practices.
LUX was designed, built and maintained by the Product Design Group at Verint.
Who is LUX for?
Designers
LUX is the official implementation of Verint's Design Language for product and web designers, and represents an ever-growing ecosystem of design assets and guidance. With a comprehensive set of human interface guidelines, design kits, and documentation, LUX helps designers work faster and smarter.
Developers
LUX is also built for developers. Our front-end library is continuously maintained by the Product Design Group, and serves as a fully functional example of the Verint design language. This library is a platform-agnostic UI implementation of our components and patterns which can be used in production if your chosen development environment and framework is suitable.
Our platform-agnostic implementation is a fork of the open source Bootstrap JavaScript library. The library is written in ES6+, SCSS, and HTML and ships deliverables in vanilla JavaScript in ES5 as well as ES6, CSS, SCSS and HTML.
As this is a superset of Bootstrap, any developers already familiar with this library can design screens instantly. The guidelines included here are to ensure consistency and best practice across all newly designed screens within the Verint suite. Further detailed examples of runtime, class, and usage documentation can be found from the Bootstrap JavaScript library documentation.
We will work with specific design teams to help them implement LUX for specific platforms and frameworks. We hope to be able to share and reuse those specific implementations in the future across different development teams within Verint. LUX platform-specific implementations in Ext JS and React are currently in the pipeline.
Usage
Looking to quickly add Verint components for design concepts and prototypes? For quick usage, copy the code samples included below. For production usage, download the source files here:
| View file | ||
|---|---|---|
|
CSS
Copy-paste the stylesheet <link> and <meta> into your <head> before all other stylesheets to load our CSS.
| Code Block | ||
|---|---|---|
| ||
<meta charset="utf-8" /> <link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css"> |
JS
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.
| Code Block | ||
|---|---|---|
| ||
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/jquery.min.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script> |
Icons
Copy-paste the stylesheet <link> into your <head> after our base stylesheets to load the font icon CSS. More information about icons can be found in the Iconography section.
| Code Block | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css"> |
Accessibility
By default, all our components come pre-built for WCAG AA and Section 508 accessibility standards. To use our default accessibility settings, include the following in your <head> section. More information about accessibility can be found in the Accessibility section.
| Code Block | ||
|---|---|---|
| ||
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script> |