...
| 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 designer and developer, and providing clear, discoverable guidance around design and development best practices.
LUX is maintained by the core UX team 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.
<<Link to Zeplin>>
Developers
LUX is also built for developers. Our front-end library is continuously maintained by the core UX team and serve as a fully functional example off the Verint Design Language. This library can be used in production if the development environment/ framework is suitable.
...
<<We are also working with development teams to create other>>
<<Platform agnostic>>
Usage
Looking to quickly add Verint components for design concepts and prototypes? Use the internal Verint CDN, hosted at <<ux.verint.com>>. For production usage, download the source files from <<TBD>>.
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> before after our stylesheets to load the font icon CSS. More information about icons can be found in the Iconography.
| 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 icons can be found in the Accessibility.
| Code Block | ||
|---|---|---|
| ||
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script> |
...