RH-ISAC Website Style Guide

For consistent design and brand standards

The Retail & Hospitality ISAC is committed to being the most trusted community voice in cybersecurity intelligence and information for organizations in the retail and hospitality sector. At RH-ISAC it’s beyond sharing intelligence data, it’s about empowering and building confidence in everyone who battles it.​

RH-ISAC delivers valuable, relevant cybersecurity data to consumer facing organizations by creating engaging share channels, routine threat briefings, an impactful national Summit and empowering regional workshops.

Typography

Headings are defined from H1 through H6 sizes. Additional heading options are provided through the Elementor ‘title’ element, including: sizing attribute separate from HTML tag, heading styles for paragraphs, extra-large H1 size, and custom heading font-weights.

Typographic styles were created using a major-third type scale. The Raleway google font was selected for headings from the current RH-ISAC web style. Open-type stylistic alternatives are set with the font, to provide some differentiation from competitors using the same font-family. A new font was selected for body copy – the free google font IBM Plex Sans, which has been renamed for web-use as ISAC sans, to remove any brand confusion within the font name.

All fonts used on the site are free, downloadable Google fonts, which can be installed on any computer. Here are links to access your heading font, Raleway, and your body font, IBM Plex Sans.

H1 - XL size

Font Family: Raleway, stylistic alternates;
Font Weight: Bold;
Font Size: 6.104rem (61.04px)

The quick brown fox jumps over a lazy dog.

H1, H1-size

Font Family: Raleway, stylistic alternates;
Font Weight: Bold;
Font Size: 4.883remrem (48.83px)

The quick brown fox jumps over a lazy dog.

H2, H2-size

Font Family: Raleway, stylistic alternates;
Font Weight: Bold;
Font Size: 3.906rem (39.06px)

The quick brown fox jumps over a lazy dog.

H3, H3-size

Font Family: Raleway, stylistic alternates;
Font Weight: Bold;
Font Size: 3.125rem (31.25px)

The quick brown fox jumps over a lazy dog.

H4, H4-size

Font Family: Raleway, stylistic alternates;
Font Weight: Bold;
Font Size: 2.5rem (25px)

The quick brown fox jumps over a lazy dog.

H5, H5-size

Font Family: Raleway, stylistic alternates;
Font Weight: Normal;
Font Size: 2rem (20px)

The quick brown fox jumps over a lazy dog.

H6, H6-size

Font Family: Raleway, stylistic alternates;
Font Weight: Bold;
Font Size: 1.6rem (16px)

The quick brown fox jumps over a lazy dog.

Paragraphs

Font Family: ISAC Sans;
Font Weight: normal;
Font Size: 1.6rem (16px)

The quick brown fox jumps over a lazy dog.

Sit a ante parturient dapibus vestibulum primis justo curabitur sodales eget parturient consectetur pulvinar convallis vestibulum a molestie cras tortor. Mi justo leo non praesent est ut morbi netus a vestibulum a torquent euismod adipiscing condimentum velit ullamcorper suscipit condimentum a et ridiculus est interdum hac rhoncus. A ac ornare fames condimentum vestibulum lorem nam facilisis potenti nam duis orci eu gravida cum. Aliquam in a adipiscing at euismod ut nec a volutpat cubilia a ad elementum cubilia ante vestibulum elementum rhoncus natoque adipiscing tincidunt a ultricies in montes.

Paragraphs, at heading sizes

Element Used: Text Editor;
Classname Used: h5-size;
HTML Example:

Font Family: ISAC Sans;
Font Weight: normal;
Font Size: 2rem (20px)

The quick brown fox jumps over a lazy dog.

Erat suspendisse adipiscing aliquam vestibulum dapibus ullamcorper diam mi vitae in a nisi himenaeos ut a consectetur. Felis laoreet sociis bibendum nisl vestibulum dis cursus interdum fringilla a a convallis vestibulum adipiscing curae amet. Lacinia scelerisque tristique vestibulum a conubia enim ullamcorper scelerisque faucibus a aliquam dui eleifend ultrices adipiscing ac hendrerit a parturient elit feugiat inceptos.

Paragraphs, using the title element

Element Used: Title;
Size: H4 Size;
HTML Tag: p
HTML Example: <p class=”elementor-heading-title elementor-size-h4″>

Font Family: Raleway, stylistic alternates;
Font Weight: normal;
Font Size: 2.5rem (25px)

The quick brown fox jumps over a lazy dog. Lorem ipsum dolore ismet.

Blockquotes and Testimonials

Blockquotes

Blockquotes and stand-alone testimonials are created using the Elementor ‘Testimonial’ element. Settings should be set to left-aligned text, deleting the placeholder image to remove it from the flow.

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
John Doe
Designer

Testimonial Sliders

Testimonials Sliders are created using the livemesh addon ‘Testimonials Slider’ element. Settings should be set to display navigation, hide direction navigation controls.

I am testimonial text. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Customer #1

CEO, Invision Inc.
I am testimonial text. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Customer #2

Lead Developer, Automattic Inc
I am testimonial text. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Customer #3

Store Manager, Walmart Inc

Buttons

Buttons have been created for both light and dark backgrounds, with three styles of button provided for each.

Primary Buttons

Use for: Primary calls-to-action on  light background. Shown in two sizes (Medium, Small) use Small in most instances. It is recommended you do not use Large or Extra Small predefined sizes.

Icons: When used with icons, set the icon to ‘After’ placing it after the button text. Set a spacing of 15px between button text and icons. Right arrow icon (shown) will be the most frequently used button icon, but others are available for use in appropriate situations (document download, back button/arrow, etc.)

Click here
Click here
Click here
Click here

Secondary Buttons

Use for: Secondary calls-to-action on  light background. With very few exceptions: ONLY USE WHEN A SECOND CALL-TO-ACTION IS PRESENTED ALONGSIDE A PRIMARY BUTTON/CALL-TO-ACTION. An example of proper usage can be seen in the navigation, or for the back buttons on the Membership Application form.

Shown in two sizes (Medium, Small) use the same size set with the primary button this button accompanies. It is recommended you do not use Large or Extra Small predefined sizes.

Icons: When used with icons, set the icon to ‘After’ placing it after the button text. Set a spacing of 15px between button text and icons. Right arrow icon (shown) will be the most frequently used button icon, but others are available for use in appropriate situations (document download, back button/arrow, etc.)

Click here
Click here
Click here
Click here

Text Buttons

Use for: On-page links, and non-converting calls-to-action, calls-to-action between paragraph sections, links for more information/learn-more.

Shown in one sizes (Small), it is recommended you do not use Medium, Large or Extra Small predefined sizes for text buttons.

Icons: When used with icons, set the icon to ‘After’ placing it after the button text. Set a spacing of 15px between button text and icons. Because of the icon motion on hover, the right arrow icon (shown) should be the only icon added to this button style.

Click here
Click here

Text Buttons

All button options are also available on a dark background, shown below. The same suggestions and rules above apply to buttons displayed over a dark background.

Click here
Click here
Click here
Click here
Click here
Click here
Click here
Click here
Click here
Click here

Media

Icons

Icons have been developed for use alongside text elements.

The icons shown to the right were created for each of the benefits listed und the ‘Why RH-ISAC?’ navigation heading. All icons are simple white line illustrations, presented on a lime-green (#c2d42e) circle background. All future icons should follow this same style.

Illustrations

Illustrative, line-icons have been created for various sections throughout the website. These should be used as background elements, within image boxes, containing only titles and no body text, or in larger sections where no appropriate image can be selected.

These illustrative elements should be composed heavily of lines, allowing for some filled-in, full-colored sections. The can come in either lime green (#c2d42e) or teal (#00a89e.) With more intricate illustrations, multiple tones of the selected color can also be applied.

RH-ISAC Pattern

The hexagon pattern from the previous site has been retooled and updated a bit for the new website. It is used less frequently in its entirety throughout the site, but frequently appears in smaller components.

Image Styles

When adding an image to the site using the Elementor ‘Image’ element, various styles have been pre-built for RH-ISAC. These options include: Default, RH-ISAC, Mobile-Only, and Hidden. Of these, the RH-ISAC style is the one you will most frequently use throughout the site.

RH-ISAC Style: Images with the preselected RH-ISAC style are placed within boxes that have rounded corners on the top-right, and bottom-left (designed to mimic the gradient bar within the RH-ISAC logo.) This image style can be used with a single image, or to create an image-mosaic using multiple images of varying sizes.

When creating an image mosaic, be sure to align images toward one another, and add additional spacer elements for interest.

Finally, when the RH-ISAC image style is selected, an additional option, ‘Image Background’ appears in the Elmentor Image element.

A man carries a briefcase at his side.
Two women and a man are engaged in conversation at a business conference.
A woman works on her laptop with a disposable cup on the table.

Image Backgrounds

An image background option is available within the Elementor Image element, only when the RH-ISAC image style is selected. Various options for backgrounds are provided, with descriptive labels to indicate where the background will be placed.

All image backgrounds add a clipped variation of the updated RH-ISAC hexagon pattern behind their images. Try out the variations for yourself, mix and match them while building image mosaics.

Small groups of men and women converse with one another.