Skip to content

Whiskers and Wheels Comprehensive Style Guide

1. Logo Guidelines

  • Description: The primary logo features a cheerful cat and dog inside a vintage-style van with paw-shaped wheels. The text "Whiskers and Wheels" is integrated below the icon in a friendly, modern font.
  • File Formats: SVG, PNG (transparent), EPS (for print).
  • Color Variants:
  • Full-Color Logo: Use the official color palette.
  • Monochrome Logo: Black or white for single-color applications.
  • Grayscale Logo: Use only when color printing is unavailable.

Clear Space and Minimum Size

  • Maintain a clear space around the logo equivalent to the height of the "W" in "Whiskers."
  • Minimum size for print: 25mm width.
  • Minimum size for digital: 150px width.

Incorrect Usage

  • Do not rotate, stretch, or distort the logo.
  • Do not change colors outside the official palette.
  • Do not add drop shadows or effects.

2. Color Palette

Primary Colors

  • Whisker Blue: #3478F7 (RGB: 52, 120, 247 | CMYK: 79, 51, 0, 3)
  • Wheel Grey: #6C757D (RGB: 108, 117, 125 | CMYK: 13, 7, 6, 54)

Secondary Colors

  • Paw Print Orange: #FF9F43 (RGB: 255, 159, 67 | CMYK: 0, 38, 74, 0)
  • Grass Green: #28C76F (RGB: 40, 199, 111 | CMYK: 80, 0, 80, 22)

Neutral Colors

  • White: #FFFFFF
  • Black: #000000
  • Light Grey: #F8F9FA

Color Usage

  • Use primary colors for headers, icons, and prominent UI elements.
  • Secondary colors are for accents, call-to-actions (CTAs), and highlights.
  • Neutral colors are for backgrounds and body text.

3. Typography

Primary Typeface

  • Font Family: Poppins (Google Fonts)
  • Weights:
  • Light: 300
  • Regular: 400
  • Bold: 700

Secondary Typeface

  • Font Family: Roboto (Google Fonts)
  • Weights:
  • Regular: 400
  • Medium: 500

Usage Guidelines

  • Headlines: Poppins Bold, 36px, #3478F7.
  • Subheadings: Roboto Medium, 24px, #6C757D.
  • Body Text: Roboto Regular, 16px, #000000.
  • Small Text and Captions: Roboto Light, 14px, #6C757D.

4. Iconography and Illustrations

Icon Style

  • Line weight: 2px.
  • Rounded edges to create a friendly and approachable style.
  • Use the primary and secondary colors for fills or accents.

Illustration Style

  • Flat illustrations with subtle gradients.
  • Minimal shading to ensure clarity.
  • Incorporate animal and transportation themes where applicable.

5. Imagery Guidelines

Photography

  • Style: Bright, vibrant, and natural.
  • Subjects: Include happy pets, caring humans, and vehicles in action.
  • Filters: Use a subtle overlay with #3478F7 at 10% opacity for consistency.

Image Sizes

  • Website Hero Image: 1920x1080px.
  • Social Media Posts: 1080x1080px.
  • Print Material: Minimum 300 DPI.

6. UI Components

Buttons

Primary Button:

  • Background: #3478F7
  • Text: #FFFFFF
  • Hover: #2559B2
  • Border: none
  • Border Radius: 6px
  • Padding: 12px 24px
  • Font Size: 16px
  • Font Weight: bold

Secondary Button:

  • Background: #6C757D
  • Text: #FFFFFF
  • Hover: #494E53
  • Border: 1px solid #6C757D
  • Border Radius: 6px
  • Padding: 10px 20px
  • Font Size: 14px

Text Button:

  • Background: transparent
  • Text: #3478F7
  • Hover: #2559B2
  • Border: none
  • Padding: 8px 16px
  • Font Size: 14px

Form Fields

  • Border: 1px solid #6C757D
  • Focus: 1px solid #3478F7
  • Placeholder Text: #6C757D
  • Background: #FFFFFF
  • Text Color: #000000
  • Font Size: 14px
  • Padding: 10px
  • Border Radius: 4px

Cards

  • Background: #FFFFFF
  • Shadow: 0px 4px 6px rgba(0, 0, 0, 0.1)
  • Border Radius: 8px
  • Padding: 16px
  • Font Size: 16px
  • Title Text: #3478F7, Poppins Bold
  • Body Text: #6C757D, Roboto Regular
  • Icon Placement: Top-right corner for decorative icons, 20px margin from edges.

7. Voice and Tone

Brand Voice

  • Warm, approachable, and professional.
  • Emphasize trustworthiness and care.

Tone Examples

  • Formal: "We provide reliable transportation for your beloved pets."
  • Friendly: "Your furry friends deserve the best ride in town!"

8. Application Guidelines

Social Media

  • Use logo or icon in profile images.
  • Maintain a 1:1 aspect ratio for posts.
  • Include the primary color palette in all visuals.

Email Templates

  • Header: Full-color logo.
  • Body Text: Roboto Regular, 16px, #000000.
  • Accent Elements: Use #FF9F43 for CTAs.

Business Cards

  • Front: Icon-only logo, "Whiskers and Wheels," tagline.
  • Back: Contact info, website URL, and a small QR code.

9. Accessibility Standards

  • Ensure a minimum color contrast ratio of 4.5:1 for text.
  • All interactive elements must have a focus state.
  • Provide alt-text for all images and icons.

10. File Naming and Versioning

  • Logos: WAW-logo-primary.svg, WAW-logo-monochrome.png
  • Icons: WAW-icon-[description].svg
  • Fonts: Poppins-[weight].ttf
  • Color Palette: WAW-colors.ase (Adobe Swatch Exchange)

11. Contact for Support

This guide serves as a unified resource for all developers and designers working on Whiskers and Wheels projects. Adhering to these standards will ensure a cohesive brand experience across all platforms and mediums.