Brand Color & Typography Guide

Main Colors

Catnip Green

#23CE6B

Loyal Blue

#1E3888

Midnight Meow

#0B0033

Petworld Red Collar

#CE1126

Playful Puppy Yellow

#FFB81C

Neutral Colors

Pure Pedigree White

#FFFFFF

Fluffy Cloud

#FAFAF9

Hamster Bedding

#F5F5F4

Soft Fur Gray

#E7E5E4

Muddy Paw

#45403C

Pawprint Black

#1C1917

Typography

Primary Font: Montserrat

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

1234567890!@#$%^&*()

Regular 400 Semibold 600 Bold 700

Used for headings, buttons, and emphasis

Secondary Font: Nunito

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

1234567890!@#$%^&*()

Regular 400 Semibold 600 Bold 700

Used for body text and general content

Typography Usage

Heading 1 (Montserrat Bold 700)

Heading 2 (Montserrat Semibold 600)

Heading 3 (Montserrat Semibold 600)

Heading 4 (Montserrat Semibold 600)

This is a paragraph in Nunito Regular 400. It demonstrates how the body text looks in our brand typography. Notice how it's slightly lighter than the headings for better readability. For emphasis within paragraphs, use Nunito Bold 700 or Nunito Italic.

Typography Rules

  • Use Montserrat for headings, navigation, and call-to-action elements.
  • Use Nunito for body text, paragraphs, and general content.
  • Maintain a clear hierarchy with consistent use of font weights and colors.
  • Use var(--text-primary) for headings and important text.
  • Use var(--text-secondary) for body text and general content.
  • Use var(--text-muted) for less important or supplementary text.
  • Ensure sufficient contrast between text and background colors for readability.
  • Use a line height of 1.6 for body text to improve readability.
  • Limit the use of all-caps text to short headings or labels for emphasis.

Font Color Guide

Primary Text

Foreground on Background

White on Primary

White on #CE1126

Text on Secondary

Foreground on #FFB81C

White on Muted

White on #1E3888

Product Labels

On Sale
New Arrival
Best Seller
Limited Stock
Web Only Deal

How to Use Product Labels

Apply these labels to product cards or images to highlight special attributes. Use them sparingly to maintain their impact.

.label {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.label.sale {
  background-color: #FEE2E2;
  color: #9B1C1C;
  box-shadow: inset 0 0 0 1px #F87171;
}

.label.new-arrival {
  background-color: #D1FAE5;
  color: #065F46;
  box-shadow: inset 0 0 0 1px #34D399;
}

.label.best-seller {
  background-color: #FEF3C7;
  color: #92400E;
  box-shadow: inset 0 0 0 1px #FBBF24;
}

.label.limited-stock {
  background-color: #DBEAFE;
  color: #1E40AF;
  box-shadow: inset 0 0 0 1px #60A5FA;
}

.label.web-only-deal {
  background-color: #E8E7E6;
  color: #45403C;
  box-shadow: inset 0 0 0 1px #45403C;
}
Back to top