Style Guide

Typography

Typography for Intel.gov uses Oswald and Maitree Google Fonts.

Header One

Oswald, 5.5em, 500, #333, Uppercase

Header Two

Oswald, 2.15em, 500, #a68449

Header Three

Maitree, 1.43em, 700, #333

Header Four

Oswald, 1.2em, 500, #333

Body Copy

Maitree, 1.15em, 400, #333

Utility ClassDescriptionDemo
.font_text Applies body font styles

Body text

.font_title Applies title font styles

Title font

.font-title-extra-light Extra light title font

Title font: 200 weight

.font-title-light Light title font

Title font: 300 weight

.font-title-medium Medium title font

Title font: 500 weight

.font-title-semi-bold Semi-bold title font

Title font: 600 weight

.font-title-bold Bold title font

Title font: 700 weight

.uc Uppercase font

Uppercase text

.lc Lowercase font

Lowercase text

.text-shadow Adds a shadow to body copy

Copy with shadow

.heading-text-shadow Adds a shadow to headings

Heading with shadow

.deemphasized Adds deemphasized styles to copy

Deemphasized text

.center Center aligns text

Centered text

.left Left aligns text

Left-aligned text

.hashtag Applies hashtag (#text) styling to text

#Hashtag styled text

Color Palette

@clr_black

#000

@clr_gray

#595e61

@clr_light_blue

#e4edf2

@clr_gray_blue

#637f8b

@clr_teal

#4e6e79

@clr_light_yellow

#b88426

@clr_mustard

#c09e64

@clr_white

#fff

@clr_dark_gray

#424b50

@clr_pale_blue

#d1e5f2

@clr_navy

#2d425d

@clr_yellow

#a68449

@clr_mustard_darker

#ad8642

@clr_light_gray

#b0c9da

@clr_slate

#61818c

@clr_sky_blue

#b0c9da

@clr_blue

#4e6e79

@clr_dark_yellow

#B9862B

@clr_light_gold

#d0b161

Buttons

The Intel.gov website utilizes a variety of button classes. These buttons have a transparent background with a color border, which changes dependent upon the background utility class that is being used. Buttons should be contained within the ".btn-container" class, unless specified otherwise.

Icons

Icons used on the Intel.gov website are used to represent social media sites, as well as tools such as search, copy action, and the hamburger menu. Below are visual representations of the sprite icons and seals on the website:

Icons

IG sprite icons 1000px

Sprites

IG sprite seals 1000px

All icons are in SVG file format, and have the following dimensions:

Menu Bar

Icon TypeDimensions
Twitter (black version) 150px x 150px
Search 114px x 109px
Hamburger Menu 135px x 112px

Social Icons and Copy

Icon TypeDimensions
Twitter (gold version) 129px x 129px
Facebook and Copy action 133px x 135px

Lists

Lists are used throughout the Intel.gov website to call attention to specific points of interest. These lists are generally used on internal pages, such as Our Values.

The following is the applied style for internal pages:

  • List item 1
  • List item 2
  • List item 3

Grid System

The Intel.gov websites uses Bootstrap 3.37, and therefore utilizes its grid system as well. The internal pages of the intel.gov website uses the following as its primary structure:

  • col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12

Further documentation on how to use the Bootstrap grid system can be found on the Bootstrap website.

Layout

Featured Items

Throughout the website, there are sections that use Featured K2 items to display content. These sections are "highlighted" on the page, and should display no more than three items at a time as featured. The sections referenced here are listed below:

Barrier Breakers in History

The items in this section should always display chronologically, including featured items. This may change for a specific timeframe, such as during African American History Month.

External Link Icon

Throughout the website, hyperlinks to external websites will appear with a designated icon next to them. These external links are handled via a custom JavaScript script that is activated when the hyperlink's URL does not share the same domain as Intel.gov. When this occurs, the icon will be added automatically and will appear next to the hyperlink on the page. If there is a situation when an exception is needed (i.e. - a link on an image), use the following in your a tag:

a class="no-ext-link-icon" which will generate the icon:

Blockquotes

Blockquote tags are displayed primarily on the "Day in the Life" section of the website, and are used to emphasize a quote from the employee. A working example of this can be found here. The code and applied style can be seen below:

CodeExample
<blockquote>
"Quote from employee displayed here"