Visual Guidelines

A comprehensive guide to keeping the P.A.W.S. Nutrition visual identity consistent and recognizable across all platforms and materials.

Brand Foundations

Effortless Canine Wellness

P.A.W.S. Nutrition is a premium pet supplement brand setting a new standard for clean, effortless canine wellness that fits into everyday routines. Our visual identity reflects warmth, trust, and a deep love for pets.

Naming Convention

To maintain the integrity of our identity, the brand name must always be written with dots between each letter.

PAWS Nutrition

Incorrect

P.A.W.S. Nutrition

Always correct

Love for Pets

Every product is designed with the well-being and happiness of pets in mind.

Human- Grade Ingredients

Clean nutrition dogs instinctively crave and love

Backed by Science. Powered by Nature

Never a generic all‑in‑one. Tailored to address specific needs.

Made in the USA

Made in state of the art GMP Certified production facilities.

Our Voice

P.A.W.S. Nutrition' communication is simple, playful and straight forward. We speak without being overly complicated. No fluff. No buzzwords.

SimpleStraight ForwardHonestPlayful

P.A.W.S. Nutrition

@pawsnutrition

We believe every dog deserves to live at their healthiest; every wag, every walk, every day. That belief is rooted in real science that’s made simple to love.

Visual Identity

Our Logo

The PAWS logo is our most valuable visual asset. An immediate expression of our bond with dogs and our commitment to quality, brought to life through modern, effortless design.

Clear Space & Secure Area

Define X: The protected zone is exactly the height of the ‘P’ in ‘PAWS’.
Automation: Assets ship with this margin built-in (48 px baseline). Align the asset corner to the canvas corner for instant protection.
Protection: Keep this zone free of text, graphics, or competing visual weight to allow the brand to command attention.

The Intelligent Asset

Smart Corner Alignment

By baking the margin into the file, we eliminate manual measuring. Simply align the asset corner to your canvas corner, and brand protection is instantly applied.

Special Usage Case

The Cream Variant

The Cream logo variant is reserved for highly specific visual environments where the surrounding content is predominantly cream-based. This ensures the brand mark integrates seamlessly into a warm palette without sacrificing legibility.

Secure Canvas: 248 × 133 px

Select Variant & Download

Blue Version

White Version

Black Version

Cream Version

Usage Best Practices

✓

Always

·Use only official corporate color variants
·Maintain original proportions when scaling
·Respect the automated Secure Area padding
·Prioritize high-contrast background placements

Never

·Stretch, squash, or distort the logo geometry
·Apply drop shadows, glows, or bevel effects
·Alter the typography or symbol relationship
·Rotate or tilt the logo on any axis

Logo Placement & Size Guide for Social Media

To maintain consistent visual prominence across different aspect ratios, logo dimensions are mathematically scaled based on the 1080px shortest-edge rule. This ensures the brand mark carries the same relative weight whether on a square post or a tall vertical canvas.

VerticalAnchor4:5

Canvas

1080 × 1350

Logo W × H

200 × 85

X Zone

48 px

Total Size

248 × 133

Tall Carousel3:4

Canvas

1080 × 1440

Logo W × H

213 × 91

X Zone

51 px

Total Size

264 × 142

Square1:1

Canvas

1080 × 1080

Logo W × H

160 × 68

X Zone

38 px

Total Size

198 × 106

Horizontal1.91:1

Canvas

1080 × 566

Logo W × H

84 × 36

X Zone

20 px

Total Size

104 × 56

Stories / Reels9:16

Canvas

1080 × 1920

Logo W × H

284 × 121

X Zone

68 px

Total Size

352 × 189

Format	Canvas (px)	Ratio	Logo W × H	X — Secure Area	Total Asset Size
Vertical Anchor	1080 × 1350	4:5	200 × 85	48 px	248 × 133
Tall Carousel	1080 × 1440	3:4	213 × 91	51 px	264 × 142
Square	1080 × 1080	1:1	160 × 68	38 px	198 × 106
Horizontal	1080 × 566	1.91:1	84 × 36	20 px	104 × 56
Stories / Reels	1080 × 1920	9:16	284 × 121	68 px	352 × 189

Flexible Placement

While bottom-left is our standard, the logo may be anchored in the upper-right corner when design hierarchy permits. The same mathematical logic applies: aligning the Intelligent Asset to the corner instantly secures the proportional area for that specific format.

Primary

Bottom-Left Anchor

Alternative

Upper-Right Anchor

Logo & Taglines

Lockup Philosophy

The PAWS brand mark and tagline never overlap. Following our 1080px shortest-edge rule, the distance between elements is calculated to maintain visual tension and authority across any social media format.

Spatial Hierarchy

To prevent visual suffocation, the tagline ("Sprinkle the Good Stuff™") must never overlap the primary logo. Maintain a distance that allows both elements to command attention.

Trademark Precision

The trademark symbol (™) must always be formatted as superscript and set at exactly 50% of the tagline's text size.

Trademark Hierarchy & Balance

By maintaining a clear separation between the logo and tagline, we ensure that neither element loses its visual impact, creating a professional and premium narrative flow.

Trademark Formatting Guide

Visual Example

Size: 24px

Sprinkle the Good Stuff^™

Base text: 100% (24px)

Trademark: 50% (12px)

CSS Implementation

.tagline {
  font-size: 24px;
}

.tagline sup {
  font-size: 50%; /* 12px */
  vertical-align: super;
}

Always use relative sizing (50%) rather than fixed pixel values to maintain proportional scaling across different sizes.

Color Palette

Brand Colors

Our color palette is carefully selected to convey warmth and trust.
Each color has a specific purpose in our visual communication.

Primary Colors

Click to copy

PAWS Navy

#1D2160

Core brand color used across logo and identity.

Off White

#F7F7F5

Essential for contrast and clean typography.

PAWS Cream

#F9F3E5

Main background and breathing spaces.

Neutral / Background Colors

Sky Blue

#B2C7FC

Soft Peach

#F79E7A

Mint Fresh

#91FCEC

Use light tones to create a clean, minimal, and premium look.

Neutral background colors are for specific cases of using product color coding, mainly for backgrounds.

Product Color Coding

Joint

#1D2160

Color-coded for Joint support products.

Multivitamin

#ED4F1F

Color-coded for Multivitamin products.

Immunity

#3DB2A1

Color-coded for Immunity support products.

Each product is color-coded for easy recognition and differentiation.

Brand Color Wheel

Colors positioned at their real hue angle. Inner ring = primary identity · Outer ring = product color coding · Satellites = neutral backgrounds.

For product content: Hip & Joint, Immunity & Allergy, Multivitamin.

Spin to explore

Drag to rotate

Immunity

#3DB2A1

Product — Immunity

PAWS Navy

Multivitamin

Immunity

Suggested palette — Immunity

Immunity

Mint Fresh

Off White

Cream

PAWS Black

Universal Typography Color

PAWS Black

#12142E

Typography / Text

UI & Informational Utilities

Tag Background

#F3F4F6

UI Utility | Fondo sobre blanco o cream en items informáticos

Tag Text / Labels

#A5A6BF

UI Utility | Textos secundarios y etiquetas

Accessibility

As a brand backed by science, our designs must comply with strict legibility standards. Body copy must always remain Navy Blue or White.

Typography

Typography System

Science-backed nutrition

Edit Content

Type below to see how Public Sans and Aptos work together in a real layout.

Main Title (Public Sans)

Subtitle (Public Sans)

Body Text (Aptos)

Base Size16px

Line Height1.5

* Controls spacing between text categories, not internal paragraph line-height.

Scale Ratio: Major Third

1:1.25

Each level is 25% larger than the previous one.

Design Tool Application

In Figma, Illustrator, or Canva, multiply your base size by 1.25 for each level of hierarchy.

16px→20px→25px→31.25px

Public Sans (Titles & Subtitles)Aptos (Body)

Science-backed nutrition

Premium nutrition for happy, healthy pets.

Every pet deserves to live at their healthiest; every wag, every walk, every day. That belief is rooted in real science that’s made simple to love.

Brand Font Assets

Aptos Brand Font

Complementary & Body Font

TTF Format

Aptos Regular

Aptos Bold

Aptos SemiBold

Aptos Light

Aptos Black

Aptos ExtraBold

Aptos Italic

Public Sans

Primary Title Font

Local TTF

Public Sans Regular

Public Sans Medium

Public Sans SemiBold

Public Sans Bold

Public Sans ExtraBold

Public Sans Black

Main Titles

Use Public Sans for H1 and H2
Keep headlines bold and geometric

Subtitles & Body

Use Aptos for H3, H4 and Body Text
Minimum 14px for body readability

Spacing System

Grid & Vertical Rhythm

Our spacing system is based on an 8px grid, ensuring consistency and visual balance across all brand materials and digital interfaces.

Spacing Control

Layout View

Vertical Gap32px

Spacing Rules

1
Always use multiples of 8px for spacing between main blocks.
2
Use 16px or 24px for internal padding in cards and components.
3
Maintain proportional balance across all alignments.
4
For Product UI, limit density to a 56px maximum to ensure focused interaction.

32px

32px

Brand Orange

Brand Green

Brand Cream

White

Dog Standing

dogs

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Dog Sitting Alt

dogs

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Dog House

dogs

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Leaf

science

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Made in USA (Circle)

science

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Made in USA (Square)

science

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Paw

dogs

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Quality

science

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Sample Tube Handling

science

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Test Tube

science

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

Atom

science

Black

Brand Blue

Brand Orange

Brand Green

Brand Cream

White

UI Components

Call to Action (CTA) Strategy

Brand Red is a core identifier for P.A.W.S. Nutrition, but using it as the default CTA color can unintentionally signal “stop,” “error,” or “forbidden” in digital interfaces. To create a more seamless, inviting, and conversion-friendly user experience, we recommend a deliberate color hierarchy for interaction design.

Primary: Brand Orange

Orange is energetic, warm, and highly clickable. It stands out perfectly against our Cream and Dark Blue backgrounds without feeling aggressive. Best for "Add to Cart" or "Subscribe" actions.

Secondary: Dark Blue

Dark Blue conveys trust, science, and stability. Used in solid or "hollow" (outline) styles, it is perfect for secondary actions like "Learn More" or "View Details" to establish a clear visual hierarchy.

1. Primary Actions (High Emphasis)

Used for the main action on a page (e.g., checkout, primary signup). We strongly recommend using Brand Orange or Brand Green for these to drive conversion without the negative connotations of red.

Option A: Brand Orange

Solid Default

Hover

Active

Disabled

Option B: Brand Green

Solid Default

Hover

Active

Disabled

2. Secondary Actions (Medium Emphasis)

Used for alternative actions or informational links. The "Hollow" (outline) style is excellent for pairing next to a Primary CTA.

Hollow Style (Recommended)

Default

Hover

Active

Disabled

Solid Style (Dark Backgrounds or High Contrast needs)

Default

Hover

Active

Disabled

3. Tertiary Actions (Ghost/Text)

Used for less important actions, like "Cancel" or "Go Back". Relies on typography and hover states rather than a bounding box.

Default

Hover

4. Semantic Actions (Red & Green)

Reserve Red and Green strictly for actions that communicate a specific semantic meaning (Danger vs. Success).

Destructive / Warning (Brand Red)

Only use red for actions that cannot be undone, or to clear data. This utilizes the psychological "stop" nature of red effectively.

Success / Confirmation (Brand Green)

Use green to confirm positive states or successful submissions. We've added a high-brightness "glow" state to emphasize complete success.

Default

Glow / Success

Visual Elements

Visual Language

Beyond the logo and colors, P.A.W.S. Nutrition uses a set of visual elements that reinforce our identity and create memorable experiences.

Photography Guide

How to capture the essence of P.A.W.S. Nutrition

Happy Pets

Photographs of healthy, active, and happy pets in natural or home environments.

Artistic Compositing

Artistic photomontages and AI-assisted imagery are permitted, provided they maintain an ultra-realistic appearance and avoid unrealistic exaggerations.

Emotional Connection

Showing the relationship between pets and their owners, moments of affection.

Product in Context

Products shown in real-use situations, not just in the studio.

Iconography Styles

Our visual language favors soft, rounded corners and stylized forms that convey warmth. We avoid using sharp edges, flat borders, or rigid square margins in our icons and UI elements to maintain a friendly and organic appearance.

Line

Thin stroke icons for interfaces

Solid

Filled icons for emphasis

Duo-tone

Brand color combination

Applications

Digital Interface & UI Design

Our digital products are designed to be intuitive and clean, ensuring the PAWS identity feels cohesive and recognizable across every pixel of the user experience.

Main Website

Landing page and product pages

Mobile App

Nutritional tracking application

Email Marketing

Email templates

Web Interface Example

pawsnutrition.com

Need more resources or have questions about brand applications?