Giant Eagle Styleguide

This Giant Eagle UI toolkit is a highly-modular design system for rapid web page development. It contains different materials that can be assembled into more complex page layouts.

This guide contains real working examples, code snippets, documentation, and style guidelines for www.gianteagle.com

Colors

Color: $red, $primary

Hex: #C8102E

Color: $blue, $secondary

Hex: #2071ce

Color: $green

Hex: #2e722b

Color: $yellow

Hex: #fbd40f

Color: $white

Hex: #ffffff

Color: $black

Hex: #000f15

Color: $dark-gray, $gunmetal

Hex: #2d3a40

Color: $medium-gray, $stormcloud

Hex: #5b666a

Color: $silver

Hex: #8a9194

Color: $light-gray, $gray

Hex: #b9bdbf

Color: $platinum

Hex: #e7e9e9

Icons for Gianteagle.com

New Icons Post 2020

icon-tiktok

icon-pharmacy2

icon-myPerks

icon-myPerks-text

icon-myPerks-gray

icon-myPerks-filled

icon-Giant-Eagle-lowercase

icon-md-white

Icons Pre-2020

icon-user-circle

icon-shopping-bag

icon-phone-laptop

icon-map-marker-sm

icon-advantage-pay

icon-bars

icon-car-wash

icon-contact

icon-getgo-home

icon-getgo-locator

icon-menu

icon-history

icon-Pill-Arrow

icon-Curbside

icon-Fuel

icon-Curbside-G

icon-Fuel-G

icon-fuelperks

icon-perks

icon-Services

icon-Store-copy

icon-Weekly-Ad

icon-Call

icon-Catering

icon-Groceries

icon-Sale

icon-User

icon-GetGo

icon-List

icon-Store

icon-eCoupons

icon-Edit

icon-Gift-Cards

icon-Weekly-Ad-G

icon-Cakes

icon-Recipes

icon-curbside-cart

icon-fuel-pump

icon-store

icon-icon-takeout

icon-fb

icon-pinterest

icon-twitter

icon-youtube

icon-angle-down

icon-angle-left

icon-angle-right

icon-angle-up

icon-apple

icon-bell

icon-cake

icon-card

icon-caret-down

icon-caret-left

icon-caret-right

icon-caret-up

icon-Cart

icon-cart

icon-Directions

icon-chat

icon-close

icon-coupon

icon-curbside

icon-eye

icon-list

icon-location

icon-market-district

icon-menu

icon-piggy

icon-planner

icon-search

icon-user

icon-icon_ecoupons

icon-icon_weekly_ad

icon-directions-light

icon-directions-solid

icon-pharmacy

icon-Pharmacy

icon-transfer-prescription

icon-manage-prescription

icon-refill-prescription

icon-Refill

Typography

Heading Font Family: Avant Garde

Paragraph Font Family: Inter

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.

Headings:
***These need to be used properly and not just to assign styles or sizes to heading text. Assign headers correctly then if need be change styles and sizing.

Heading Level 1

h1, ONE per page. Always need one at top of page

Heading Level 2

h2, Use sparingly as the "chapter headings" of the page

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Typography Classes

Add the following classes to headings and paragraphs to achieve the desired results

inter - Add class for font-family: inter

avant-garde - Add class for font-family: Avant Garde

Font Family: Avant Garde

header-xl

Desktop: 56px/64px, Mobile: 48px/52px

header-lg

Desktop: 48px/56px, Mobile: 42px/48px

header-md

Desktop: 40px/44px, Mobile: 35px/40px

header-sm

Desktop: 32px/36px, Mobile: 28px/32px

Font Family: Inter

header-xs

Desktop: 24px/28px, Mobile: 21px/24px

header-xxs

Desktop: 20px/24px, Mobile: 18px/20px

paragraph-lg

Desktop: 18px/28px, Mobile: 16px/24px

paragraph-md

Desktop: 16px/24px, Mobile: 14px/22px

paragraph-sm

Desktop: 14px/22px, Mobile: 12px/18px

paragraph-xs

Desktop: 12px/18px, Mobile: 10px/16px