WGI's Digital Color System

This color system is crafted to support Dell’s extensive range of digital experiences, offering recommended use cases for consistency.

Accessibility First

Ensuring accessibility in color usage is crucial. Colors must meet contrast ratio standards and should not be the sole means of conveying meaning. Always verify compliance with accessibility guidelines below.

Color Usage Guidelines

This page provides overarching guidance on color application. For component-specific color recommendations, refer to the relevant component guidelines.

Core Color Palette

WGI’s signature blue tones establish brand identity while creating a cohesive user experience. Blue 600 serves as the primary UI color for key interactions. This palette also defines states such as hover, focus, selection, and activation. For further details, see component-specific guidance.

Elevation values

Different elevation levels create a three-dimensional effect by adding shadows and blur. As the elevation increases from 1 to 4, the shadows and blur expand along the X and Y axes, enhancing the sense of depth along the Z-axis. There are three shadow placement options: left, bottom, and right. See lighting guidelines for more details.

Baseline grid

The 4-pixel grid is the Design System standard. The recommended space between every element should be a multiple of 4 pixels, horizontally and vertically. Designing with a 4-pixel grid provides more flexibility and granularity for things like spacing text and icons.

Design system is using special horizontal & vertical spacing utilities (margin and padding) with predefined values:

• m-0 / p-0 – 0px
• m-1 / p-1 – 4px
• m-2 / p-2 – 8px
• m-3 / p-3 – 16px
• m-4 / p-4 – 24px
• m-5 / p-5 – 48px

mb-3 (16px) – recommended for spacing between text elements.

px-3 py-2 (16px x 8px) – commonly used for buttons and cards.

p-3 p-lg-5 (16px/48px) – used for content containers.

12-column grid

Most breakpoints are designed using the 12-column grid.

• sm- Small: 576px;
• md- Medium: 768px;
• lg- Large: 992px;
• xl- Extra Large: 1200px;
• xxl- Extra-Extra-Large: 1400px;

Standard 12-column grid with margins and placeholder content spaced across the columns and gutters of the grid.

Mix and match column widths by spanning multiple columns for a wide variety of layout options.

Make sure the content spans all of the columns in the layout (whether it is 2, 6, or 12 columns), rather than using columns as margins or padding. Following this methodology will keep layouts uniform and prevent unreliable responsive behavior.

Typography

Typography is a deliberate system of letters, numbers, and characters. Good typography ensures legibility, clean aesthetics, and a well-defined information hierarchy.

The default styles apply to all breakpoints, except for displays and headers with breakpoints under 1024 pixels. That ramp is featured in the responsive font ramp section. Note that styles do not correspond to a specific HTML tag. An H1 tag can be assigned to any header style and size, as long as a logical hierarchy is maintained throughout the page and throughout your application.

Text modifiers

All classes apply to text:

Line height