The goal of this document is to facilitate the creation of a common UI / UX experience for all UL web applications; it provides a set of guidelines that can be applied to both existing and new applications and features.
Find the foundational attributes of the Design System under Fundamentals, which provides the building blocks for all system components. Details for implementation, as well as usage, context and citation, can be found for each individual module under the Component section. The documentation included throughout Fundamentals and Components functions as a practical guide to implementing the desired outcome.
Implementing the following elements into an application is intended to achieve high percentage of a common look and feel quickly and easily.
- Header color and UL logo: Implement a white background with UL Solutions logo and application name (or wordmark) on the left and high-level navigation to the right;
- Footer color: Dark grey, common link styles and elements (copyright, etc.) where possible;
- Font: Adopt Poppins for headers (h1-h6) and buttons, at minimum;
- Icons: Material Icons;
- Button styles: Padding / border radius, shape, border, shadow, mouse-overs (transitions, relative lightness/brightness). Prefer the color palette included in the design system where possible.
Within this document you find information on implementing the design system, as well as detailed specs, sample code and some explanation of when and how to use each component. Most components allow you to view HTML and CSS classes, and their variations, on their “Code” tab, which is the primary mechanism for relaying the relevant class names and node structure for the reusable nodes.
Design and code associated with the Design System aims for accessibility, and we include accessible implementation notes for most components. Because the Design System does not provide functional script, however, technical teams should follow and test to their own accessibility standards.
Please submit a Github issue or otherwise inform us if you discover inaccessible code or design issues.
The design system aims to support modern browsers (i.e. Firefox, Chrome, Safari and Edge). Supporting older browser versions may be required where audience usage warrants, which may lead to the need to disregard some style guidelines.
UL is a global company operating in many international markets. Consequently, designers and developers may need to accommodate for localization, internationalization and translations. The Design System components and layouts have been designed to work responsively, which also allows for accommodation of varying text length resulting from these processes.
If you have questions or input for the Design System team, email LST.UL.DesignSystem@ul.com or submit a Github issue (to gain access to the Git repo, see Resources: Developer Toolkit).