grid grid small list close gear menu search external_link linkedin bio twitter leader-area

Grid

Responsive Design & Flexible Grids

Responsive design adapts the layout to the viewing environment by using fluid, proportion-based grids and flexible images. Defined breakpoints determine how content should be displayed across mobile, tablet and desktop.

A grid provides a structure for content elements and promotes consistency. Utilize a 12-column grid when possible to allow for easy layout variation.  

 

Headers and Navigation

Desktop Header  

Our desktop header serves as a strong foundation for our brand, and effectively communicates the different levels of navigation.

Our menu should be concise and clearly structured. If there are more than four menu items and multiple sublevels, a hamburger menu should be used. 

All menu items should be right-aligned. Please ensure enough space between items for legibility. Headers can be either black or white.

Breadcrumbs (TBD) 

Breadcrumbs provide a trail for the user to follow back to their starting point. They should be used only when there are several levels within the navigation.  Due to size restrictions, breadcrumbs will not appear on mobile screens.

 

Desktop header on black

Background: #000000 

Contents: #FFFFFF

Hover: #989898

 

Desktop header on white

Background: #FFFFFF 

Contents: #000000

Hover: #787878

Link text: GT Walsheim Bold and Regular 

Utility link text: 11px

Main link text: 16px

Breadcrumbs text: 14px

 

Desktop header structure

Mobile Header

Our mobile header menu simplifies the navigation experience and provides up to four tap-friendly utilities such as menu, search and a link (a login, for example), depending on which logo is used.

Mobile header with logo

Background: #FFFFFF / Contents: #000000

Background: #000000 / Contents: #FFFFFF

Mobile header with symbol only

Background: #FFFFFF / Contents: #000000

Background: #000000 / Contents: #FFFFFF

Link text: GT Walsheim Bold, 14px

Mobile Menu

The mobile menu is easily tappable and has a clear structure to help users navigate quickly.

Allow at least 40px around any item. 

Mobile menu

Background: #FFFFFF

Contents: #000000

Link text: GT Walsheim Bold and Regular, 18px 

Footer

The footer is made up of links that allow quick access to key parts of the site, as well as the ability to link out to other related sites, such as social networks. 

The footer can be either black or white and is designed to stack correctly on mobile device screens.

 

Desktop footer on black

Desktop footer on white

Mobile Footer

The same elements are included in the mobile footer, but are stacked vertically.

Mobile footer

Background: #FFFFFF

Contents: #000000

Link underline: #FFED00 

Banners

Banners appear at the top of a page to offer a bold introduction to the content below. When using a banner, allow adequate spacing around content for legibility.

DXC graphic shapes can be used to hold content and provide separation from photography. Choose images that work well within the banner’s shape. 

For more information, see photography guidelines.

Header without image

Background: #000000

Header title text: GT Walsheim Bold, 60px / Line height: 64px #FFFFFF 

 

Header with image - Option 1

Background: #000000

Contents: #FFFFFF

Header title text: GT Walsheim Bold, 68px / Line height: 72px

Descriptive copy text: GT Walsheim Regular, 24px / Line height: 34px

 

Header with image - Option 2

Background: #000000

Contents: #FFFFFF

Header title text: GT Walsheim Bold, 68px / Line height: 72px

Descriptive copy text: GT Walsheim Regular, 24px / Line height: 34px

 

Typography

GT Walsheim Pro is our primary typeface. It is clearly legible at both large and small scales. When GT Walsheim Pro is not available for use, Arial is our default font.

It is important to use limited type sizes and proper type styles to establish a clear information hierarchy. Use GT Walsheim Bold for headers and Regular for body copy. 

When designing for mobile, we recommend the minimum font size of 16px to ensure that the content is easily readable on smaller devices.

For more information, see typography guidelines.

Primary Typeface

 

Alternate Typeface

 

Typographic scale

This serves as general guidance to support the establishment of a clear type hierarchy. Additional styles may be required, depending on application.

Color

The DXC color palette is bold and graphic, with a focus on black and white. 

 

DXC black and DXC white are our primary colors. DXC Yellow is our primary action color and should be used for primary buttons.

 

For extended guidelines about using additional accent colors and ensuring accessibility standards, see color palette guidelines. 

DXC Black
CMYK: 0/0/0/100
RGB: 0/0/0
HEX: #000000

DXC Yellow
CMYK: 0/0/100/0
RGB: 255/237/0
HEX: #FFED00

DXC White
CMYK: 0/0/0/0
RGB: 255/255/255
HEX: #fffff

Buttons

Buttons clearly identify primary actions for users. It is important to create a hierarchy for buttons to clearly distinguish main calls-to-action from less critical interactions. In a black-and-white environment, the yellow button is the primary call-to-action and should be used to direct attention to the desired action on the page.

 

If using more than one button together is necessary (Submit and Cancel, for instance), differentiate buttons through color and spacing.

 

Our button shape is rectangular with straight corners, with the button label centered within. Button labels should be as concise as possible and use GT Walsheim Bold in all caps.

Button style

Background: #FFED00

Lable text: GT Walsheim Bold, 20px #000000

 

Button specifications

Primary button on white

Normal background: #FFED00. Label: #000000

Hover background: #000000. Label: #FFED00

Disabled background: #E9E9E9. Label: #787878

 

Primary button on black

Normal background: #FFED00. Label: #000000

Hover background: #FFFFFF. Label: #000000

Disabled background: #E9E9E9. Label: #787878 

 

Secondary button on white

Normal background: #000000. Label: #FFFFFF

Hover background: #000000. Label: #FFED00

Disabled background: #E9E9E9. Label: #787878

 

Secondary button on black

Normal background: #FFFFFF. Label: #000000

Hover background: #FFFFFF. Label: #787878

Disabled background: #E9E9E9. Label: #787878

 

Secondary button on white

Normal stroke: #000000. Label: #000000

Hover stroke: #FFED00. Label: #000000

Disabled stroke: #CCCCCC. Label: #787878

Stroke: 4px

 

Secondary button on black

Normal stroke: #FFFFFF. Label: #FFFFFF

Hover stroke: #FFED00. Label: #FFFFFF

Disabled stroke: #CCCCCC. Label: #787878

Stroke: 4px

Link List

For lists, use an arrow to the left of the link to create a uniform left alignment.

Link list on white

Normal arrow: #000000

Normal text: GT Walsheim Bold, 14px #000000

Hover arrow: #FFED00

Link list on black

Normal arrow: #FFFFFF

Normal text: GT Walsheim Bold, 14px #FFFFFF

Hover arrow: #FFED00

Call-to-Action Links

These links explicitly call out actions for the user to take, such as read more, and indicate that the user will be taken to a new page.

Call-to-action link on white

Normal button: #000000

Arrow: #FFED00

Normal text: GT Walsheim Bold, 12px #000000

Hover underline: #000000

Call-to-action link on black

Normal button: #FFED00

Arrow: #000000

Normal text: GT Walsheim Bold, 12px #FFFFFF

Hover underline: #FFFFFF

Forms and Dropdowns

Forms

Forms use default (hint) text to label the field, and prompt the user to fill it in with the required information. Users can track their progress through visual cues provided by the form, such as color changes to typography and form fields.  

 

Forms on white

Normal text field: #F5F5F5

Normal text: GT Walsheim Regular, 14px #666666

Selected text field: #FFFFFF, Stroke 2px #000000

Selected text: GT Walsheim Regular, 14px #000000

Disabled text field: #F5F5F5 

Disabled text: GT Walsheim Regular, 14px #CCCCCC

Error text field: 20% #D0021B, Stroke 2px #D0011B

Error text: GT Walsheim Regular, 14px #000000

Error message: GT Walsheim Regular, 11px #D0011B

Top, bottom and left padding: 16px 

Dropdowns on black

Dropdowns

Dropdowns give site visitors a predetermined list of options to select from. 

Dropdowns on white

Normal/Selected text field: 

#FFFFFF, Stroke 2px #000000

Normal/Selected text: GT Walsheim Bold, 

14px #000000

List text: GT Walsheim Regular, 14px #000000

Hover text field: #F5F5F5

Hover text: GT Walsheim Bold, 14px #000000

Dropdowns on black

Checkboxes & Radio Buttons

You can prompt users for specific input with checkboxes and radio buttons. 

Checkboxes 

Normal: Stroke 1px #000000

Label text: GT Walsheim Bold, 12px #000000

Selected: #FFED00

Checkmark: #000000

Checkboxes specifications

Radio buttons

Normal: Stroke 1px #000000

Label text: GT Walsheim Bold, 12px #000000

Selected circle: #000000

Radio buttons specifications 

Controls

Pagination

Pagination is the control line that lets users jump to a particular page. 

If there are more than five pages, arrows are needed on both sides of the page numbers.

 

Pagination on white

Normal/Selected square field: #000000

Normal/Selected text: GT Walsheim Regular,

12px #FFFFFF

Hover square field: #FFED00

Hover text: GT Walsheim Regular, 12px #000000

Pagination on black

Normal/Selected square field: #FFFFFF

Normal/Selected text: GT Walsheim Regular,

12px #000000

Hover square field: #FFED00

Hover text: GT Walsheim Regular, 12px #000000

Carousel 

A carousel is a user-controlled or auto-rotating slide show, depending on the platform. Auto-rotating can help spread exposure across its slides but requires special considerations when implemented. We recommend using no more than three stories within a carousel. Slides should not rotate too quickly and auto-rotation should pause on hover. 

When using the DXC shape to hold content, it should remain static while the background image and text change. 

Depending on the content and context of the carousel, stand-alone arrows can be used for carousel navigation and a series of dots can be used to indicate how many carousel items there are.

Carousel within banner

Normal circle: #FFFFFF

Selected circle: #FFED00

Header title text: GT Walsheim Bold, 68px / Line height: 72px

Descriptive copy text: GT Walsheim Regular, 24px / Line height: 34px 

Carousel within content

Arrows: #000000

Headline text: GT Walsheim Bold, 24px #000000

Body copy text: GT Walsheim Regular, 14px #000000

Tabs

There are two types of tabs: vertical and horizontal. Their use depends on the amount of content.

Vertical tabs should be used when content is minimal and easily accommodated to the right of the tab items. Horizontal tabs should be used when their selection affects the entire page content below.

Labels within tabs should be kept brief when possible, and have two lines maximum.

Tab specifications

Vertical tabs

Same as horizontal tabs

Horizontal tabs

Normal tab link field: #F0F0F0

Label text: GT Walsheim Bold, 20px #000000

Selected tab link field: #000000

Selected label text: GT Walsheim Bold, 20px #FFED00

© DXC Technology