UI Colors


Primary colors
Soft Black
#0F0F0F
Dark Black
#000000
Off-White
#FCF8EE
Brand Red
#81242D
Secondary colors
White text only
Black text only
Exploding Kittens
#B81C27
Exploding Kittens: NSFW Edition
#4D4D4D
Exploding Minions
#BE1E2D
Imploding Kittens
#95CAE0
Streaking Kittens
#309F46
Barking Kittens
#F36F5D
Exploding Kittens: 2-Player
#B81C27
Exploding Kittens: Party Pack Edition
#60003B
Exploding Kittens: Recipes for Disaster
#7ED3F7
Exploding Kittens: Catburglar Edition
#F9AE42
Zombie Kittens
#ACBE5A
Poetry for Neanderthals
#FFD045
Poetry for Neanderthals: NSFW
#FF40B4
Poetry for Neanderthals: More Cards Box 1
#FFD146
Throw Throw Burrito
#F19826
Throw Throw Avocado
#55BA47
Throw Throw Burrito: Extreme Outdoor Edition
#ED5338
You’ve Got Crabs
#EF4125
You’ve Got Crabs: Imitation Crab
#C41425
Mantis
#9D1F60
Happy Salmon
#F26657
Tacocat Spelled Backwards
#F0B933
A Game of Cat and Mouth
#EC1F79
A Little Wordy
#7893A6
Bears vs. Babies
#F89C4D
On a Scale of One to T-Rex
#00A19B
Hand to Hand Wombat
#95D3C3
You Lying Sack
#002E45
Really Loud Librarian
#DAA900
Grayscale
GrayDk
#474545
GrayMd
#767676
GrayLt
#B9B9B9
Utility Colors
Error
#E62D19
Success
#78C36D
Focus (GrayMd)
#767676

Borders & Dividers


Off-White - 1px #FCF8EE

GrayMd - 1px #767676

Fonts


FONT FAMILY
FONT WEIGHT NAME
FONT WEIGHT
Adobe Fonts Snippet

Bebas Neue Pro SemiExpanded

Regular

400

<link rel="stylesheet" href="https://use.typekit.net/phd6wkw.css">

Bebas Neue Pro SemiExpanded

ExtraBold

700

Global Headline Styles

Notes:

  • All Typography should be set in Off-White or Dark Black (depending on background-color)
  • Headings use [text-transform: uppercase]

DESKTOP
MOBILE

Header text 1

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 56px | Line Height: 60px | Letter Spacing: 2%

Header text 1

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 35px | Line Height: 42px | Letter Spacing: 2%

Header text 2

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 48px | Line Height: 56px | Letter Spacing: 2%

Header text 2

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 32px | Line Height: 40px | Letter Spacing: 2%

Header text 3

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 40px | Line Height: 48px | Letter Spacing: 2%

Header text 3

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 28px | Line Height: 32px | Letter Spacing: 2%

Header text 4

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 32px | Line Height: 42px | Letter Spacing: 2%

Header text 4

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 24px | Line Height: 30px | Letter Spacing: 2%

header text 5 (Eyebrow)

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 24px | Line Height: 26px | Letter Spacing: 2%

header text 5 (Eyebrow)

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 22px | Line Height: 24px | Letter Spacing: 2%

header text 6

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 18px | Line Height: 24px | Letter Spacing: 2%

header text 6

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%

Body Copy Styles


desktop + Inline Links
Mobile + Inline Links

Body Copy Large /  

Body Copy Large Link

Font: Bebas Neue Pro SemiExpanded | Weight: 400 | Size: 24px | Line Height: 28px | Letter Spacing: 2%

Body Copy Large /  

Body Copy Large Link

Font: Bebas Neue Pro SemiExpanded | Weight: 400 | Size: 24px | Line Height: 28px | Letter Spacing: 2%

Body Copy Base /  

Body Copy Base Link

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%

Body Copy Base /  

Body Copy Base Link

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%

Body Copy Small /  

Body Copy Small Link

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%

Body Copy Small /  

Body Copy Small Link

Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%

Buttons + Links


Primary CTA
Default
Hover
Focus
Disabled
Secondary CTA
Default
Hover
Focus
Disabled
Primary Link
Default - Desktop
Learn More
Hover
Learn More
Focus
Learn More
Disabled
Learn More
 
Default - Mobile
Learn More

CTA Spacing

Top/Bottom Padding: 12px
Top/Bottom Padding: 12px
Border-radius: 4px

Icons


Logo - Desktop

Logo - Mobile

Utility

Pagination


Form Elements


Input Field

Default

Active (when user clicks into field)

Filled

Error

Please enter a valid email address

Focused

Disabled

Dropdown

Default

Filled

Focused

Disabled

Filter Elements

Notes:

  • For any Disabled elements, change cursor type to ‘not-allowed’
  • Use 12px padding between selects on Desktop

Checkbox Select
Radial Select

Quantity Selectors // PDP Add to Cart


Quantity: