PLEASE DO NOT EDIT

Last Updated: Jun 4, 2021

AKC Pet Rx Style Guide

AKC pet Rx Logos

SVG logo with different sizes

Primary logo

Large size logo class="logo-large"

Medium size logo class="logo-medium"

Small size logo class="logo-small"

xSmall size logo class="logo-xsmall"

Secondary logo

Spacing and Gaps - with Margins

Following classes can be used with any tag

class="margin-10" is for 10px margin for All the sides
class="margin-15" is for 15px margin for All the sides
class="margin-20" is for 20px margin for All the sides

class="margin-top-bottom-10" is for 10px margins from Top and Bottom while Left and Right 0px
class="margin-top-bottom-15" is for 15px margins from Top and Bottom while Left and Right 0px
class="margin-top-bottom-20" is for 20px margins from Top and Bottom while Left and Right 0px

class="margin-top-bottom-10-auto" is for 10px margins from Top and Bottom while Left and Right auto
class="margin-top-bottom-15-auto" is for 15px margins from Top and Bottom while Left and Right auto
class="margin-top-bottom-20-auto" is for 20px margins from Top and Bottom while Left and Right auto

class="margin-left-right-10" is for 10px margins from Right and Left while Top and Bottom 0px
class="margin-left-right-15" is for 15px margins from Right and Left while Top and Bottom 0px
class="margin-left-right-20" is for 20px margins from Right and Left while Top and Bottom 0px

class="margin-left-right-10-auto" is for 10px margins from Right and Left while Top and Bottom auto
class="margin-left-right-15-auto" is for 15px margins from Right and Left while Top and Bottom auto
class="margin-left-right-20-auto" is for 20px margins from Right and Left while Top and Bottom auto

class="margin-left-10, 15, 20" is for 10px, 15px, 20px margin from Left
class="margin-right-10, 15, 20" is for 10px, 15px, 20px margin from Right
class="margin-top-10, 15, 20" is for 10px, 15px, 20px margin from Top
class="margin-bottom-10, 15, 20" is for 10px, 15px, 20px margin from Bottom

class="no-margin" is for 0px margin for All the sides
class="no-margin-left" is for 0px margin from Left
class="no-margin-right" is for 0px margin from Right
class="no-margin-top" is for 0px margin from Top
class="no-margin-bottom" is for 0px margin from Bottom

Spacing and Gaps - with Padding

Following classes can be used with any tag

class="padding-10" is for 10px padding for All the sides
class="padding-15" is for 15px padding for All the sides
class="padding-20" is for 20px padding for All the sides

class="padding-top-bottom-10" is for 10px padding for Top and Bottom while Left and Right 0px
class="padding-top-bottom-15" is for 15px padding for Top and Bottom while Left and Right 0px
class="padding-top-bottom-20" is for 20px padding for Top and Bottom while Left and Right 0px

class="padding-top-bottom-10-auto" is for 10px padding for Top and Bottom while Left and Right auto
class="padding-top-bottom-15-auto" is for 15px padding for Top and Bottom while Left and Right auto
class="padding-top-bottom-20-auto" is for 20px padding for Top and Bottom while Left and Right auto

class="padding-left-right-10" is for 10px padding from Right and Left while Top and Bottom 0px
class="padding-left-right-15" is for 15px padding from Right and Left while Top and Bottom 0px
class="padding-left-right-20" is for 20px padding from Right and Left while Top and Bottom 0px

class="padding-left-right-10-auto" is for 10px padding from Right and Left while Top and Bottom auto
class="padding-left-right-15-auto" is for 15px padding from Right and Left while Top and Bottom auto
class="padding-left-right-20-auto" is for 20px padding from Right and Left while Top and Bottom auto

class="padding-left-10, 15, 20" is for 10px, 15px, 20px padding from Left
class="padding-right-10, 15, 20" is for 10px, 15px, 20px padding from Right
class="padding-top-10, 15, 20" is for 10px, 15px, 20px padding from Top
class="padding-bottom-10, 15, 20" is for 10px, 15px, 20px padding from Bottom

class="no-padding" is for 0px padding for All the sides
class="no-padding-left" is for 0px padding from Left
class="no-padding-right" is for 0px padding from Right
class="no-padding-top" is for 0px padding from Top
class="no-padding-bottom" is for 0px padding from Bottom

Primary Color 1

HEX	#003594
RGB	0	53	148
CMYK	58%	37%	0%	42%

Primary Color 2

HEX	var(--primary-color)
RGB	0	153	255
CMYK	100%	40%	0%	0%

Secondary Color 1

HEX	#092761
RGB	9	39	97
CMYK	35%	23%	0%	62%

Secondary Color 2

HEX	#D2E7FA
RGB	210	16%	231
CMYK	7%	250	0%	2%

Tertiary Color 1

HEX	#BABABA
RGB	186	186	186
CMYK	0%	0%	0%	27%

Tertiary Color 2

HEX	#DEDEDE
RGB	222	222	222
CMYK	0%	0%	0%	13%

White Color

HEX	#FFFFFF
RGB	255	255	255
CMYK	0%	0%	0%	0%

Black Color

HEX	#222223
RGB	34	34	35
CMYK	0%	0%	0%	86%

Error Color

HEX	#E2231A
RGB	226	35	26
CMYK	0%	75%	78%	11%

Notification Red

HEX	#FE5147
RGB	254	81	71
CMYK	0%	68%	72%	0%

Darker Blue

HEX	#092761
RGB	9	39	97
CMYK	35%	23%	0%	62%

Gray 3

HEX	#F8F8F8
RGB	248	248	248
CMYK	0%	0%	0%	3%

Gray 4

HEX	#DEDEDE
RGB	222	222	222
CMYK	0%	0%	0%	13%

Gray 5

HEX	#DEDEDE
RGB	222	222	222
CMYK	0%	0%	0%	13%

Typography / Fonts

Font Name: Lato

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 + - \ * =

~ ` ! @ # % ^ & ( ) { } _ | / ? < > . ,

basic Headings

Use tags h1 to h6 for get necessary heading

H1 - Bold 30px - Capitalized

H2 - Bold 28px - Capitalized

H3 - Bold 24px - Capitalized

H4 - Bold 20px - Capitalized

H5 - Bold 18px - Capitalized

H6 - Bold 16px - Capitalized

Uppercase Heading

Use tags h1 to h6 with class="all-caps" for get necessary uppercase heading

H1 - Bold 30px - Uppercase

H2 - Bold 28px - Uppercase

H3 - Bold 24px - Uppercase

H4 - Bold 20px - Uppercase

H5 - Bold 18px - Uppercase

H6 - Bold 16px - Uppercase

Default Paragraph / Body Copy

Default Paragraph tag <p></p> or class="text-size-16"

text-size: 16px and line-height: 30px sample Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Medium Size Paragraph / Body Copy

Use with any tag with class="text-size-14"

text-size: 14px and line-height: 30px sample Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Large Size Paragraph / Body Copy

Use with any tag class="text-size-18"

text-size: 18px and line-height: 30px sample Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

All Capital Letters

Use with any tag class="all-caps"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bolder Text

Use with any tag with class="bolder-text"

font-weight: 700 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bold Text

Use with any tag with class="bold-text""

font-weight: 600 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Capitalized Text

Use with any tag with class="text-capitalize"

Small Text

Use with any tag with class="text-size-12"

text-size: 12px and line-height: 16px sample Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Separators

Using <hr> with class="separator + dashed, dotted, blue, orange, light-gray"

Icons

Icons are from fontawesome.com full icon set available here

: ambulance; f0f9

: angle-double-down; f103

: angle-double-left; f100

: angle-double-right; f101

: angle-double-up; f102

: angle-down; f107

: angle-left; f104

: angle-right; f105

: angle-up; f106

: arrow-down; f063

: arrow-left; f060

: arrow-right; f061

: arrow-up; f062

: at; f1fa

: asterisk; f069

: bell; f0f3

: bone; f5d7

: box; f466

: calendar; f133

: calendar-alt; f073

: camera; f030

: capsules; f46b

: caret-down; f0d7

: caret-left; f0d9

: caret-right; f0da

: caret-up; f0d8

: cat; f6be

: check; f00c

: check-circle; f058

: check-square; f14a

: chevron-down; f078

: chevron-left; f053

: chevron-right; f054

: chevron-up; f077

: clock; f017

: cog; f013

: comment; f075

: comments; f086

: credit-card; f09d

: crow; f520

: directions; f5eb

: dog; f6d3

: dollar-sign; f155

: dove; f4ba

: download; f019

: drumstick-bite; f6d7

: egg; f7fb

: ellipsis-h; f141

: ellipsis-v; f142

: envelope; f0e0

: envelope-open; f2b6

: exclamation; f12a

: exclamation-circle; f06a

: exclamation-triangle; f071

: file-pdf; f1c1

: filter; f0b0

: heart; f004

: home; f015

: horse; f6f0

: image; f03e

: images; f302

: info-circle; f05a

: key; f084

: link; f0c1

: location-arrow; f124

: lock; f023

: map-marker-alt; f3c5

: paper-plane; f1d8

: paperclip; f0c6

: pen; f304

: pencil-alt; f303

: phone; f095

: pills; f484

: play; f04b

: plus; f067

: plus-circle; f055

: plus-square; f0fe

: search; f002

: share; f064

: shopping-cart; f07a

: star; f005

: star-half; f089

: star-half-alt; f5c0

: times; f00d

: times-circle; f057

: trash; f1f8

: trash-alt; f2ed

: truck; f0d1

: user-alt; f406

: user-circle; f2bd

: video; f03d

: file-export; f56e

Social Icons

Icons are from fontawesome.com full icon set available here

: facebook; f09a

: facebook-f; f39e

: facebook-square; f082

: instagram; f16d

: instagram-square; e055

: linkedin; f08c

: linkedin-in; f0e1

: pinterest; f0d2

: pinterest-p; f231

: pinterest-square; f0d3

: snapchat; f2ab

: snapchat-ghost; f2ac

: snapchat-square; f2ad

: twitter; f099

: twitter-square; f081

: whatsapp; f232

: whatsapp-square; f40c

: youtube; f167

: youtube-square; f431

Line Icons

Icons are from fontawesome.com full icon set available here

: arrow-alt-circle-down; f358

: arrow-alt-circle-left; f359

: arrow-alt-circle-right; f35a

: arrow-alt-circle-up; f35b

: bell; f0f3

: calendar; f133

: calendar-alt; f073

: caret-square-down; f150

: caret-square-left; f191

: caret-square-right; f152

: caret-square-up; f151

: check-circle; f058

: check-square; f14a

: clock; f017

: comment; f075

: comment-alt; f27a

: comment-dots; f4ad

: comments; f086

: credit-card; f09d

: edit; f044

: envelope; f0e0

: file-pdf; f1c1

: heart; f004

: image; f03e

: paper-plane; f1d8

: plus-square; f0fe

: question-circle; f059

: registered; f25d

: star; f005

: star-half; f089

: sun; f185

: times-circle; f057

: trash-alt; f2ed

: user; f007

: user-circle; f2bd

: window-close; f410

Layout / Grid System

Borrowed Bootstrap Grid for this layout system full guide available here

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

4 Column Item Grid

Apoquel Tablet^Rx

Mfg. Price $2.29

Vetoryl Capsules 30 Ct.^Rx

Starts at $35.44

Trifexis Chewable Tablets for Dogs^Rx

Starts at $20.49

Nexgard for Dogs and Puppies^Rx

Starts at $58.99

6 Column / Homepage Item Grid

Apoquel Tablet^Rx

Mfg. Price $2.29

Vetoryl Capsules 30 Ct.^Rx

Starts at $35.44

Trifexis Chewable Tablets for Dogs^Rx

Starts at $20.49

Nexgard for Dogs and Puppies^Rx

Starts at $58.99

Heartgard Plus Chewables For Dogs^Rx

Starts at $36.49

Bravecto Chews^Rx

Starts at $56.99

3 Column / Product Listing Grid

Vetoryl Capsules 30 Ct.^Rx

Starts at $35.44

Trifexis Chewable Tablets for Dogs^Rx

Starts at $20.49

Nexgard for Dogs and Puppies^Rx

Starts at $58.99

Icons Buttons

Buttons using <button> and <a> tag with icon

Default Link

Red Color Link Black Color Link

Underline Link

Default <a> tag without any class
Using <a> tag with any color class e.g. class="text-color-orange", class="text-color-black" etc.
Using <a> tag with class="underline"

Elements

Buttons, Forms Inputs, etc.

Buttons

Primary and Secondary Buttons

Default Button

Hover Button

Primary

Default Button

Hover Button

Primary Alt

Default Button

Hover Button

Secondary

Default Button

Hover Button

Secondary Alt

Full width Buttons

Full width Primary and Secondary Buttons using

Default Button

Hover Button

Primary btn Full Width

Default Button

Hover Button

Primary btn Full Width

Default Button

Hover Button

Default Button

Hover Button

Button Disabled

Primary btn Disabled

Primary btn Alt Disabled

Secondary btn Disabled

Secondary btn Alt Disabled

AKC Pet Rx Style Guide

AKC pet Rx Logos

Primary logo

Secondary logo

Spacing and Gaps - with Margins

Spacing and Gaps - with Padding

Primary Color 1

Primary Color 2

Secondary Color 1

Secondary Color 2

Tertiary Color 1

Tertiary Color 2

White Color

Black Color

Error Color

Notification Red

Darker Blue

Gray 3

Gray 4

Gray 5

Typography / Fonts

a b c d e f g h i j k l m n o p q r s t u v w x y z

basic Headings

H1 - Bold 30px - Capitalized

H2 - Bold 28px - Capitalized

H3 - Bold 24px - Capitalized

H4 - Bold 20px - Capitalized

H5 - Bold 18px - Capitalized

H6 - Bold 16px - Capitalized

Uppercase Heading

H1 - Bold 30px - Uppercase

H2 - Bold 28px - Uppercase

H3 - Bold 24px - Uppercase

H4 - Bold 20px - Uppercase

H5 - Bold 18px - Uppercase

H6 - Bold 16px - Uppercase

Default Paragraph / Body Copy

Medium Size Paragraph / Body Copy

Large Size Paragraph / Body Copy

All Capital Letters

Bolder Text

Bold Text

Capitalized Text

Small Text

Separators

Icons

Social Icons

Line Icons

Layout / Grid System

4 Column Item Grid

6 Column / Homepage Item Grid

3 Column / Product Listing Grid

Icons Buttons

Elements

Buttons

Full width Buttons

Button Disabled

Icons Buttons

Social Media Button

Buttons with Icons

TOP CONTACT BAR

Header

Elements

Text Field, Select box

Checkbox, Radio button

Browse / Upload btn, Textarea

Error Message

Borders

Shadows

Error, Warning, Notification etc.

Reviews.io Review Widget

Navigation Menu