Hatco Style Guide

Brand Color Palettes

#EF4135

.brand

#FF6055

.brand-light

#AB1F22

.brand-dark

#631416

.brand-darker

#2B090A

.brand-darkest

Neutral Color Palettes

#FAFAFA

.gray-lightest

#F3F4F4

.gray-lighter

#D6D6D6

.gray-light

#A3A5A8

.gray

#363636

.gray-dark

#191616

.gray-darker

#000000

.black

Gradients

Gradient GrayBlue

.gradient-x.gradient-x-hover.gradient-x-grayblue

Gradient Primary

.gradient-x.gradient-x-hover.gradient-x-primary

Gradient Purple

.gradient-x.gradient-x-hover.gradient-x-purple

Gradient Green

.gradient-x.gradient-x-hover.gradient-x-green

Gradient Blue

.gradient-x.gradient-x-hover.gradient-x-blue

Gradient LightBlue

.gradient-x.gradient-x-hover.gradient-x-lightblue

Gradient Orange

.gradient-x.gradient-x-hover.gradient-x-orange

Buttons

	Primary	Primary Dark	Secondary	Text Only	Primary Alt	Secondary Alt	Text Only Alt
Default	Button	Button	Button	Text Button	Button	Button	Text Button
Default - Small	Button	Button	Button	Text Button	Button	Button	Text Button
Icon Left	Button	Button	Button	Text Button	Button	Button	Text Button
Icon Left - Small	Button	Button	Button	Text Button	Button	Button	Text Button
Icon Right	Button	Button	Button	Text Button	Button	Button	Text Button
Icon Right - Small	Button	Button	Button	Text Button	Button	Button	Text Button
Icon Only
Icon Only - Small

Heading Utility Classes

Display

.heading-display.--as-title

Heading 1

.heading-display.--as-h1

Heading 2

.heading-display.--as-h2

Heading 3

.heading-display.--as-h3

Heading 4

.heading-display.--as-h4

Heading 5

.heading-display.--as-h5

Heading 6

.heading-display.--as-h6

Font Scale

.text-9xl

.text-8xl

.text-7xl

.text-6xl

.text-5xl

.text-4xl

.text-3xl

.text-2xl

.text-xl

.text-lg

.text-base

.text-sm

.text-xs

.text-xxs

Body Text

Text xLarge

Esse, nostrud magna dolore laboris. Dolore laboris lorem nisi, duis incididunt laborum. Nisi duis incididunt laborum tempor. Incididunt laborum tempor enim, ipsum. Enim, ipsum enim laborum voluptate qui nulla. Laborum voluptate qui nulla. Qui, nulla laboris culpa. Culpa non lorem non.

Text Large

Text Medium

Text Regular

Text Small

Inputs

Swiper (off-canvas)

Buffet Warmers

Built-Ins

Carving Stations

Drawer Warmers

Fry Stations

Holding Cabinets

Induction Warmers

Lamps

Light Cooking

Merchandisers

Sneeze Guards

Strip Heaters

Toasters

Warming Drawers

Water Heating

Wells

Category Icons (SVG)