Asset Library & Resources

Assets and Resources

Table of Contents - Part 3

Asset Library

Logo File Collection

Horizontal Logo Versions

Primary Full-Color Logos

FeelyfeelyLogo-01.svg - Horizontal, gradient symbol with gray text
- Use for: Primary web headers, business cards, presentations
- Background: Light backgrounds only
- Min size: 120px width (digital) / 1" width (print)

Monochrome Horizontal Logos

FeelyfeelyLogo-02.svg - Black outlined version
- Use for: Single-color printing, light backgrounds
- Applications: Newspapers, simple print materials
FeelyfeelyLogo-03.svg - Black solid version
- Use for: High contrast applications, embossing
- Applications: Stamps, letterpress, engraving
FeelyfeelyLogo-04.svg - White version
- Use for: Dark backgrounds only
- Applications: Dark websites, colored backgrounds

Vertical Logo Versions

Stacked Layout Options

FeelyfeelyLogo-09.svg - Vertical, full-color with gradient
- Use for: Social media profiles, narrow spaces
- Aspect ratio: Portrait orientation
- Min size: 80px height (digital) / 0.75" height (print)
FeelyfeelyLogo-10.svg - Vertical, black outlined
FeelyfeelyLogo-11.svg - Vertical, black solid
FeelyfeelyLogo-12.svg - Vertical, white version

Logo Mark (Symbol Only)

Icon Versions for Compact Applications

FeelyfeelyLogo-05.svg - Gradient logo mark
- Primary use: App icons, favicons, social avatars
- Size range: 32px - 512px
FeelyfeelyLogo-06.svg - Black outlined logo mark
FeelyfeelyLogo-07.svg - Black solid logo mark
FeelyfeelyLogo-08.svg - White logo mark

File Format Guide

Vector Formats (Preferred)

SVG Files:
✅ Best for: Web, digital applications, scalable graphics
✅ Advantages: Crisp at any size, small file size, editable
✅ Browsers: All modern browsers support
⚠️ Note: Ensure fonts are converted to paths for compatibility

AI Files (Adobe Illustrator):
✅ Best for: Print design, professional editing
✅ Advantages: Fully editable, preserves design structure
⚠️ Requirement: Adobe Creative Suite needed

EPS Files:
✅ Best for: Legacy print workflows, professional printing
✅ Advantages: High compatibility, scalable
⚠️ Note: Gradually being replaced by PDF format

Raster Formats (When Needed)

PNG Files:
✅ Best for: Web graphics with transparency, email signatures
✅ Sizes available: 64px, 128px, 256px, 512px, 1024px
✅ Transparency: Maintains clear backgrounds

JPG Files:
✅ Best for: Photography, email when file size matters
⚠️ Limitation: No transparency support
⚠️ Quality: Use 90% quality or higher for brand materials

PDF Files:
✅ Best for: Print documents, presentations, client delivery
✅ Advantages: Preserves vector quality, universal compatibility
✅ Settings: High-quality print preset recommended

Color Resource Files

Digital Color Swatches

CSS Custom Properties File

/* feelyfeely-colors.css */
:root {
  /* Primary Brand Colors */
  --color-brand-blue: #0136BC;
  --color-brand-purple: #5B1BC3;
  --color-brand-gradient: linear-gradient(90deg, #0136BC 0%, #5B1BC3 84%);
  
  /* Neutral Colors */
  --color-gray-primary: #474747;
  --color-black: #000000;
  --color-white: #FFFFFF;
  
  /* Extended Palette */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
}

Adobe Swatch Exchange (.ASE)

Filename: FeelyFeely-ColorPalette.ase
Contains: All brand colors with proper naming
Use with: Photoshop, Illustrator, InDesign
Installation: Load via Swatches panel > Load Swatches

Sketch Palette (.sketchpalette)

Filename: FeelyFeely-Colors.sketchpalette
Installation: Double-click to install in Sketch
Includes: Organized color groups with descriptive names

Print Color References

CMYK Values

Brand Blue (#0136BC):
C: 100% M: 71% Y: 0% K: 26%

Brand Purple (#5B1BC3):
C: 53% M: 86% Y: 0% K: 24%

Brand Gray (#474747):
C: 0% M: 0% Y: 0% K: 72%

Pantone Equivalents

Brand Blue: Pantone 286 C (closest match)
Brand Purple: Pantone 2695 C (closest match)
Brand Gray: Pantone Cool Gray 11 C (closest match)

Note: Always provide color swatches to printer for color matching approval

Typography Resources

Web Font Integration

Google Fonts Implementation

<!-- HTML Head Section -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

CSS Font Stack

/* Complete fallback stack */
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Self-Hosted Font Files

Inter-Regular.woff2 - Primary body text weight
Inter-Medium.woff2 - Interactive elements, labels
Inter-SemiBold.woff2 - Headings, emphasis text
Inter-Bold.woff2 - Major headlines only

Font License Information

License Type: SIL Open Font License 1.1
Commercial Use: Permitted for all commercial applications
Modification: Font files can be modified if needed
Distribution: Can be included in products and websites
Attribution: Not required but appreciated

Design Templates

Web Page Templates

Homepage Template Structure

<!-- FeelyFeely Homepage Template -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FeelyFeely - Homepage</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="feelyfeely-styles.css">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <img src="logos/FeelyfeelyLogo-01.svg" alt="FeelyFeely" class="site-logo">
            <nav class="main-navigation">
                <a href="#" class="nav-link">Browse</a>
                <a href="#" class="nav-link">Sell</a>
                <a href="#" class="nav-link">About</a>
                <button class="btn-primary">Sign In</button>
            </nav>
        </div>
    </header>
    
    <main>
        <section class="hero-section">
            <div class="container">
                <h1 class="hero-title">Feel the Difference</h1>
                <p class="hero-subtitle">Discover products that connect with your senses</p>
                <button class="btn-primary btn-lg">Shop Now</button>
            </div>
        </section>
        
        <section class="featured-products">
            <div class="container">
                <h2 class="section-title">Featured Products</h2>
                <div class="product-grid">
                    <!-- Product cards go here -->
                </div>
            </div>
        </section>
    </main>
    
    <footer class="site-footer">
        <div class="container">
            <img src="logos/FeelyfeelyLogo-04.svg" alt="FeelyFeely" class="footer-logo">
            <button class="btn-secondary">Shop on FeelyFeely</button>
        </div>
    </footer>
</body>
</html>

Product Page Template

<!-- Product Detail Page Template -->
<div class="product-detail-page">
    <div class="container">
        <nav class="breadcrumb">
            <a href="#">Home</a> > <a href="#">Category</a> > <span>Product Name</span>
        </nav>
        
        <div class="product-detail-grid">
            <div class="product-images">
                <img src="product-main.jpg" alt="Product Name" class="main-image">
                <div class="thumbnail-gallery">
                    <!-- Thumbnail images -->
                </div>
            </div>
            
            <div class="product-info">
                <h1 class="product-title">Product Name</h1>
                <p class="product-price">$99.00</p>
                <div class="product-description">
                    <p>Product description goes here...</p>
                </div>
                <button class="btn-primary btn-lg">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Email Templates

<!-- FeelyFeely Newsletter Template -->
<table width="600" cellpadding="0" cellspacing="0" style="margin: 0 auto; font-family: 'Inter', Arial, sans-serif;">
    <tr>
        <td style="padding: 40px 20px 20px;">
            <img src="https://assets.feelyfeely.com/logos/FeelyfeelyLogo-01.svg" 
                 alt="FeelyFeely" 
                 width="200" 
                 style="display: block;">
        </td>
    </tr>
    <tr>
        <td style="padding: 20px; color: #474747;">
            <h1 style="color: #474747; font-size: 28px; margin-bottom: 20px;">Newsletter Title</h1>
            <p style="font-size: 16px; line-height: 1.6; margin-bottom: 30px;">
                Newsletter content goes here...
            </p>
            <a href="#" style="background: linear-gradient(90deg, #0136BC 0%, #5B1BC3 84%); 
                              color: #FFFFFF; 
                              padding: 12px 24px; 
                              text-decoration: none; 
                              border-radius: 8px; 
                              display: inline-block;">
                Shop Now
            </a>
        </td>
    </tr>
</table>

Transactional Email Template

<!-- Order Confirmation Email -->
<div style="max-width: 600px; margin: 0 auto; font-family: 'Inter', Arial, sans-serif;">
    <header style="text-align: center; padding: 40px 20px;">
        <img src="logo-email.png" alt="FeelyFeely" width="150">
    </header>
    
    <main style="background: #FFFFFF; padding: 40px; border-radius: 8px;">
        <h1 style="color: #474747; font-size: 24px; margin-bottom: 20px;">
            Order Confirmed
        </h1>
        
        <p style="color: #474747; font-size: 16px; line-height: 1.6;">
            Thank you for your order! We'll send you shipping details soon.
        </p>
        
        <div style="background: #F9FAFB; padding: 20px; border-radius: 8px; margin: 30px 0;">
            <h2 style="color: #474747; font-size: 18px; margin-bottom: 15px;">Order Details</h2>
            <!-- Order details content -->
        </div>
        
        <a href="#" style="background: #0136BC; 
                           color: #FFFFFF; 
                           padding: 12px 24px; 
                           text-decoration: none; 
                           border-radius: 8px; 
                           display: inline-block;">
            Track Your Order
        </a>
    </main>
</div>

Instagram Post Templates

Template 1: Product Showcase

Dimensions: 1080x1080px (square)
Background: White (#FFFFFF)
Logo placement: Bottom right corner, 80px width
Product image: Centered, with 60px padding
Typography: Inter, product name in brand gray

Template 2: Quote/Text Post

Dimensions: 1080x1080px (square)
Background: Brand gradient or white
Logo: Top left, white version on gradient
Text: Centered, Inter Bold, appropriate contrast
Accent elements: Subtle geometric shapes

LinkedIn Cover Templates

Dimensions: 1584x396px
Logo placement: Left side, 300px width maximum
Background: White with subtle brand accent
Contact info: Right side, Inter Medium, 18px

Presentation Templates

PowerPoint/Keynote Master Slides

Title Slide

Layout:
- Logo: Top left, 200px width
- Title: Center, Inter Bold, 48px, brand gray
- Subtitle: Center, Inter Regular, 24px, brand gray
- Background: White with subtle brand accent line

Content Slide

Layout:
- Header: Inter SemiBold, 32px, brand gray
- Body text: Inter Regular, 18px, brand gray
- Bullet points: Brand blue color
- Logo: Small footer placement, 100px width

Section Divider

Layout:
- Background: Brand gradient
- Section title: Center, Inter Bold, 64px, white
- Logo: Bottom center, white version, 150px width

Technical Resources

Development Assets

CSS Framework Integration

Complete Brand Stylesheet (feelyfeely-brand.css)

/* FeelyFeely Brand CSS Framework */

/* Custom Properties */
:root {
  /* Brand Colors */
  --ff-blue: #0136BC;
  --ff-purple: #5B1BC3;
  --ff-gray: #474747;
  --ff-black: #000000;
  --ff-white: #FFFFFF;
  --ff-gradient: linear-gradient(90deg, var(--ff-blue) 0%, var(--ff-purple) 84%);
  
  /* Typography */
  --ff-font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-font-size-xs: 0.75rem;
  --ff-font-size-sm: 0.875rem;
  --ff-font-size-md: 1rem;
  --ff-font-size-lg: 1.125rem;
  --ff-font-size-xl: 1.25rem;
  --ff-font-size-2xl: 1.5rem;
  --ff-font-size-3xl: 2rem;
  --ff-font-size-4xl: 3rem;
  
  /* Spacing */
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-5: 20px;
  --ff-space-6: 24px;
  --ff-space-8: 32px;
  --ff-space-10: 40px;
  --ff-space-12: 48px;
  --ff-space-16: 64px;
  
  /* Border Radius */
  --ff-radius-sm: 4px;
  --ff-radius-md: 8px;
  --ff-radius-lg: 12px;
  --ff-radius-xl: 16px;
  
  /* Shadows */
  --ff-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ff-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --ff-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --ff-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--ff-font-family);
  font-size: var(--ff-font-size-md);
  line-height: 1.6;
  color: var(--ff-gray);
  background-color: var(--ff-white);
  margin: 0;
  padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-font-family);
  color: var(--ff-gray);
  margin: 0 0 var(--ff-space-4) 0;
}

h1 { font-size: var(--ff-font-size-4xl); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--ff-font-size-3xl); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--ff-font-size-2xl); font-weight: 600; line-height: 1.4; }
h4 { font-size: var(--ff-font-size-xl); font-weight: 600; line-height: 1.4; }

p {
  margin: 0 0 var(--ff-space-4) 0;
}

/* Button Components */
.ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-font-family);
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: var(--ff-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ff-btn-primary {
  background: var(--ff-gradient);
  color: var(--ff-white);
  padding: var(--ff-space-3) var(--ff-space-6);
  font-size: var(--ff-font-size-sm);
}

.ff-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--ff-shadow-md);
}

.ff-btn-secondary {
  background: transparent;
  color: var(--ff-blue);
  border: 2px solid var(--ff-blue);
  padding: calc(var(--ff-space-3) - 2px) calc(var(--ff-space-6) - 2px);
  font-size: var(--ff-font-size-sm);
}

.ff-btn-secondary:hover {
  background: var(--ff-blue);
  color: var(--ff-white);
}

/* Button Sizes */
.ff-btn-sm {
  padding: var(--ff-space-2) var(--ff-space-4);
  font-size: var(--ff-font-size-xs);
}

.ff-btn-lg {
  padding: var(--ff-space-4) var(--ff-space-8);
  font-size: var(--ff-font-size-md);
}

.ff-btn-xl {
  padding: var(--ff-space-5) var(--ff-space-10);
  font-size: var(--ff-font-size-lg);
}

/* Form Elements */
.ff-input {
  font-family: var(--ff-font-family);
  font-size: var(--ff-font-size-md);
  color: var(--ff-gray);
  background: var(--ff-white);
  border: 1px solid #D1D5DB;
  border-radius: var(--ff-radius-md);
  padding: var(--ff-space-3) var(--ff-space-4);
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-input:focus {
  outline: none;
  border-color: var(--ff-blue);
  box-shadow: 0 0 0 3px rgba(1, 54, 188, 0.1);
}

.ff-label {
  font-family: var(--ff-font-family);
  font-size: var(--ff-font-size-sm);
  font-weight: 500;
  color: var(--ff-gray);
  display: block;
  margin-bottom: var(--ff-space-2);
}

/* Card Component */
.ff-card {
  background: var(--ff-white);
  border: 1px solid #E5E5E5;
  border-radius: var(--ff-radius-lg);
  padding: var(--ff-space-6);
  box-shadow: var(--ff-shadow-sm);
  transition: box-shadow 0.2s ease;
}

.ff-card:hover {
  box-shadow: var(--ff-shadow-md);
}

/* Layout Components */
.ff-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--ff-space-6);
}

.ff-section {
  padding: var(--ff-space-12) 0;
}

.ff-section-lg {
  padding: var(--ff-space-16) 0;
}

/* Utility Classes */
.ff-text-blue { color: var(--ff-blue); }
.ff-text-purple { color: var(--ff-purple); }
.ff-text-gray { color: var(--ff-gray); }
.ff-text-black { color: var(--ff-black); }
.ff-text-white { color: var(--ff-white); }

.ff-bg-blue { background-color: var(--ff-blue); }
.ff-bg-purple { background-color: var(--ff-purple); }
.ff-bg-white { background-color: var(--ff-white); }
.ff-bg-gradient { background: var(--ff-gradient); }

.ff-text-center { text-align: center; }
.ff-text-left { text-align: left; }
.ff-text-right { text-align: right; }

.ff-font-light { font-weight: 300; }
.ff-font-normal { font-weight: 400; }
.ff-font-medium { font-weight: 500; }
.ff-font-semibold { font-weight: 600; }
.ff-font-bold { font-weight: 700; }

/* Spacing Utilities */
.ff-m-0 { margin: 0; }
.ff-m-1 { margin: var(--ff-space-1); }
.ff-m-2 { margin: var(--ff-space-2); }
.ff-m-3 { margin: var(--ff-space-3); }
.ff-m-4 { margin: var(--ff-space-4); }
.ff-m-6 { margin: var(--ff-space-6); }
.ff-m-8 { margin: var(--ff-space-8); }

.ff-p-0 { padding: 0; }
.ff-p-1 { padding: var(--ff-space-1); }
.ff-p-2 { padding: var(--ff-space-2); }
.ff-p-3 { padding: var(--ff-space-3); }
.ff-p-4 { padding: var(--ff-space-4); }
.ff-p-6 { padding: var(--ff-space-6); }
.ff-p-8 { padding: var(--ff-space-8); }

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --ff-font-size-4xl: 2.25rem;
    --ff-font-size-3xl: 1.75rem;
    --ff-font-size-2xl: 1.25rem;
  }
  
  .ff-container {
    padding: 0 var(--ff-space-4);
  }
  
  .ff-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Focus and Accessibility */
.ff-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ff-skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--ff-blue);
  color: var(--ff-white);
  padding: var(--ff-space-2) var(--ff-space-4);
  text-decoration: none;
  border-radius: var(--ff-radius-md);
  z-index: 1000;
}

.ff-skip-link:focus {
  top: 6px;
}

/* Focus styles for all interactive elements */
.ff-btn:focus,
.ff-input:focus,
a:focus {
  outline: 2px solid var(--ff-blue);
  outline-offset: 2px;
}

JavaScript Utilities

Brand Theme Switcher (feelyfeely-theme.js)

// FeelyFeely Theme Management
class FeelyFeelyTheme {
  constructor() {
    this.theme = this.getStoredTheme() || 'light';
    this.init();
  }
  
  init() {
    this.applyTheme(this.theme);
    this.addEventListeners();
  }
  
  getStoredTheme() {
    return localStorage.getItem('feelyfeely-theme');
  }
  
  setStoredTheme(theme) {
    localStorage.setItem('feelyfeely-theme', theme);
  }
  
  applyTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    this.updateBrandColors(theme);
  }
  
  updateBrandColors(theme) {
    const root = document.documentElement;
    
    if (theme === 'dark') {
      root.style.setProperty('--ff-white', '#000000');
      root.style.setProperty('--ff-black', '#FFFFFF');
      root.style.setProperty('--ff-gray', '#E5E5E5');
    } else {
      root.style.setProperty('--ff-white', '#FFFFFF');
      root.style.setProperty('--ff-black', '#000000');
      root.style.setProperty('--ff-gray', '#474747');
    }
  }
  
  toggleTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
    this.applyTheme(this.theme);
    this.setStoredTheme(this.theme);
  }
  
  addEventListeners() {
    const themeToggle = document.querySelector('[data-theme-toggle]');
    if (themeToggle) {
      themeToggle.addEventListener('click', () => this.toggleTheme());
    }
  }
}

// Initialize theme management
document.addEventListener('DOMContentLoaded', () => {
  new FeelyFeelyTheme();
});

Logo Switcher Based on Background (logo-switcher.js)

// Automatic Logo Version Selection
class LogoSwitcher {
  constructor() {
    this.logos = {
      light: '/logos/FeelyfeelyLogo-01.svg', // Color version
      dark: '/logos/FeelyfeelyLogo-04.svg',  // White version
      vertical: '/logos/FeelyfeelyLogo-09.svg', // Vertical color
      verticalDark: '/logos/FeelyfeelyLogo-12.svg' // Vertical white
    };
    this.init();
  }
  
  init() {
    this.updateLogos();
    window.addEventListener('resize', () => this.updateLogos());
  }
  
  updateLogos() {
    const logoElements = document.querySelectorAll('[data-logo]');
    
    logoElements.forEach(logo => {
      const container = logo.closest('[data-bg]');
      const isVertical = logo.hasAttribute('data-logo-vertical');
      const bgColor = this.getBackgroundColor(container);
      const logoSrc = this.selectLogoVersion(bgColor, isVertical);
      
      if (logo.src !== logoSrc) {
        logo.src = logoSrc;
      }
    });
  }
  
  getBackgroundColor(element) {
    const styles = window.getComputedStyle(element);
    const bgColor = styles.backgroundColor;
    
    // Simple light/dark detection
    const rgb = bgColor.match(/\d+/g);
    if (rgb) {
      const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;
      return brightness > 128 ? 'light' : 'dark';
    }
    
    return 'light'; // Default
  }
  
  selectLogoVersion(bgColor, isVertical = false) {
    if (isVertical) {
      return bgColor === 'dark' ? this.logos.verticalDark : this.logos.vertical;
    }
    return bgColor === 'dark' ? this.logos.dark : this.logos.light;
  }
}

// Initialize logo switcher
document.addEventListener('DOMContentLoaded', () => {
  new LogoSwitcher();
});

Component Library Integration

React Components

Button Component (FeelyFeelyButton.jsx)

import React from 'react';
import PropTypes from 'prop-types';
import './FeelyFeelyButton.css';

const FeelyFeelyButton = ({
  children,
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  type = 'button',
  className = '',
  ...props
}) => {
  const baseClass = 'ff-btn';
  const variantClass = `ff-btn-${variant}`;
  const sizeClass = size !== 'md' ? `ff-btn-${size}` : '';
  const disabledClass = disabled ? 'ff-btn-disabled' : '';
  
  const buttonClass = [
    baseClass,
    variantClass,
    sizeClass,
    disabledClass,
    className
  ].filter(Boolean).join(' ');
  
  return (
    <button
      type={type}
      className={buttonClass}
      disabled={disabled}
      onClick={onClick}
      {...props}
    >
      {children}
    </button>
  );
};

FeelyFeelyButton.propTypes = {
  children: PropTypes.node.isRequired,
  variant: PropTypes.oneOf(['primary', 'secondary', 'outline']),
  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
  className: PropTypes.string,
};

export default FeelyFeelyButton;

Logo Component (FeelyFeelyLogo.jsx)

import React from 'react';
import PropTypes from 'prop-types';

const FeelyFeelyLogo = ({
  variant = 'horizontal',
  color = 'default',
  size = 'md',
  className = '',
  ...props
}) => {
  const logoMap = {
    'horizontal-default': '/logos/FeelyfeelyLogo-01.svg',
    'horizontal-black': '/logos/FeelyfeelyLogo-03.svg',
    'horizontal-white': '/logos/FeelyfeelyLogo-04.svg',
    'vertical-default': '/logos/FeelyfeelyLogo-09.svg',
    'vertical-black': '/logos/FeelyfeelyLogo-11.svg',
    'vertical-white': '/logos/FeelyfeelyLogo-12.svg',
    'mark-default': '/logos/FeelyfeelyLogo-05.svg',
    'mark-black': '/logos/FeelyfeelyLogo-07.svg',
    'mark-white': '/logos/FeelyfeelyLogo-08.svg',
  };
  
  const sizeMap = {
    sm: 80,
    md: 120,
    lg: 200,
    xl: 300
  };
  
  const logoKey = `${variant}-${color}`;
  const logoSrc = logoMap[logoKey];
  const logoSize = sizeMap[size];
  
  if (!logoSrc) {
    console.warn(`Logo variant "${logoKey}" not found`);
    return null;
  }
  
  return (
    <img
      src={logoSrc}
      alt="FeelyFeely"
      width={logoSize}
      className={`ff-logo ${className}`}
      {...props}
    />
  );
};

FeelyFeelyLogo.propTypes = {
  variant: PropTypes.oneOf(['horizontal', 'vertical', 'mark']),
  color: PropTypes.oneOf(['default', 'black', 'white']),
  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
  className: PropTypes.string,
};

export default FeelyFeelyLogo;

Vue.js Components

Button Component (FeelyFeelyButton.vue)

<template>
  <button
    :class="buttonClasses"
    :disabled="disabled"
    @click="$emit('click', $event)"
  >
    <slot />
  </button>
</template>

<script>
export default {
  name: 'FeelyFeelyButton',
  props: {
    variant: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'secondary', 'outline'].includes(value)
    },
    size: {
      type: String,
      default: 'md',
      validator: (value) => ['sm', 'md', 'lg', 'xl'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    buttonClasses() {
      const classes = ['ff-btn', `ff-btn-${this.variant}`];
      
      if (this.size !== 'md') {
        classes.push(`ff-btn-${this.size}`);
      }
      
      if (this.disabled) {
        classes.push('ff-btn-disabled');
      }
      
      return classes;
    }
  },
  emits: ['click']
}
</script>

Implementation Checklist

Pre-Launch Checklist

Brand Asset Verification

Logo files - All SVG files properly optimized and tested
Color accuracy - Brand colors implemented exactly per specifications
Typography - Inter font loading correctly with proper fallbacks
File formats - Appropriate file types for each application
Accessibility - All contrast ratios meet WCAG AA standards

Technical Implementation

Responsive design - Layout works on all device sizes
Cross-browser testing - Verified in Chrome, Firefox, Safari, Edge
Performance optimization - Images optimized, fonts loading efficiently
SEO considerations - Alt text, meta descriptions, structured data
Loading states - Proper fallbacks during asset loading

Content and Messaging

Voice and tone - Consistent with brand personality
Copy editing - Grammar, spelling, and style verified
Localization - Consider international audience needs
Legal compliance - Terms, privacy policy, accessibility statements
Contact information - Current and accurate across all materials

Ongoing Maintenance Checklist

Monthly Brand Audit

Logo usage - Check for consistent application across platforms
Color fidelity - Verify colors haven't drifted from brand standards
Typography - Ensure fonts loading properly, no substitutions
Asset updates - Replace any outdated or low-quality images
Link verification - Test all internal and external links

Quarterly Review

Brand guidelines - Update documentation as needed
Asset library - Add new files, remove outdated versions
Performance metrics - Review site speed, conversion rates
User feedback - Collect and analyze brand perception data
Competitive analysis - Stay current with industry trends

Annual Assessment

Brand strategy - Evaluate effectiveness and market position
Visual identity - Consider evolution while maintaining recognition
Technology updates - Migrate to new platforms or frameworks
Legal updates - Review trademarks, copyrights, usage rights
Team training - Refresh brand guidelines education

Quality Assurance Standards

Design Review Process

Self-review - Designer checks against brand guidelines
Peer review - Second designer reviews for consistency
Brand team approval - Final approval from brand stewards
Stakeholder sign-off - Business approval for external materials
Legal review - For materials with legal implications

Technical Review Process

Code review - Verify technical implementation
Device testing - Test across multiple devices and browsers
Accessibility audit - Screen reader and keyboard navigation testing
Performance testing - Page speed and optimization verification
Security review - Check for vulnerabilities before launch

Support & Contacts

Brand Team Contacts

Primary Brand Contacts

Brand Manager

Email: [email protected]
Responsibilities: Guidelines interpretation, brand strategy
Response time: 24-48 hours for standard requests

Creative Director

Email: [email protected]
Responsibilities: Visual identity, design approvals
Response time: 2-3 business days for complex projects

Digital Brand Specialist

Email: [email protected]
Responsibilities: Web implementation, digital assets
Response time: Same day for urgent technical issues

Asset Request Process

Standard Requests:

Email [email protected] with specific requirements
Include project details, timeline, and intended usage
Receive assets within 2-3 business days
Confirmation of proper usage guidelines

Urgent Requests:

Mark email subject with "[URGENT]"
Include business justification for urgency
Response within 4 hours during business hours
May require approval from Creative Director

Technical Support

Developer Resources

GitHub Repository: github.com/feelyfeely/brand-assets

Complete asset library with version control
CSS frameworks and component libraries
Integration guides and documentation
Issue tracking for technical problems

Design System Documentation: design.feelyfeely.com

Interactive component library
Code examples and implementation guides
Download links for latest assets
Change log and version history

Community Support

Slack Channel: #brand-guidelines

Real-time support from brand team
Community discussions and questions
Share implementations and get feedback
Announcements about guideline updates

Monthly Office Hours:

When: First Thursday of each month, 2-3 PM EST
Where: Virtual meeting (link sent via email)
Purpose: Open Q&A, guideline clarifications
Registration: [email protected]

Training and Education

Onboarding for New Team Members

Brand Guidelines Workshop

Duration: 2 hours
Format: Interactive presentation with hands-on exercises
Frequency: Monthly, or on-demand for new hires
Registration: [email protected]

Design System Training

Duration: 4 hours (can be split across multiple sessions)
Format: Technical deep-dive with practical implementation
Audience: Designers, developers, content creators
Registration: [email protected]

External Vendor Training

Partner Onboarding Package

Complete brand guidelines document
Asset library access with usage rights
Direct contact with brand team
Approval process documentation

Vendor Certification Program

Level 1: Basic brand compliance (1 hour online)
Level 2: Advanced implementation (half-day workshop)
Level 3: Brand stewardship (full-day intensive)
Benefits: Priority support, advanced asset access

Legal and Compliance

Trademark and Copyright Information

Brand Protection:

FeelyFeely® is a registered trademark
Logo and brand elements are proprietary
Usage outside these guidelines requires written permission
Report trademark infringement to [email protected]

Usage Rights:

Internal use: Full access with guideline compliance
Partner use: Requires signed brand usage agreement
Third-party use: Written permission required
Commercial use: Licensing agreements available

Compliance Reporting

Report Brand Violations:

Email: [email protected]
Include: Screenshots, URLs, context
Response: Investigation within 48 hours
Action: Cease and desist for serious violations

Feedback and Improvement

Guideline Feedback

Suggest Improvements:

Email: [email protected]
Monthly surveys: Sent to all brand guideline users
Annual review: Major guideline updates based on feedback
Recognition: Contributors acknowledged in updated guidelines

Success Stories

Share Your Implementation:

Email: [email protected]
Include: Project details, challenges overcome, results achieved
Benefits: Featured in internal newsletters, case studies
Network: Connect with other successful implementers

Version Control and Updates

Guideline Versioning

Current Version: 1.0 (May 2025) Next Review: August 2025 Major Update Schedule: Annually

Change Log

Version 1.0 (May 2025)

Initial comprehensive brand guidelines
Complete logo system established
Color palette and typography defined
Application guidelines created
Asset library organized

Update Notification System

Automatic Notifications:

Email alerts for guideline updates
Slack notifications in brand channels
GitHub releases for technical asset updates
Website banners for major changes

Subscription Management:

Subscribe at: [email protected]
Include role, department, and notification preferences
Unsubscribe link in all automated emails

Asset Version Control

File Naming Convention

Format: ProductName-VariantName-Version.extension
Examples:
- FeelyfeelyLogo-Horizontal-v1.2.svg
- FeelyfeelyLogo-Vertical-WhiteVersion-v1.2.svg
- FeelyFeely-ColorPalette-v1.0.ase

Archive System

Current assets: Always available in main library
Previous versions: Archived but accessible for legacy projects
Deprecation notices: 90-day warning before asset retirement
Migration guides: Help transition to updated assets

Conclusion

This comprehensive brand guidelines system provides everything needed to maintain consistent, professional, and accessible FeelyFeely brand implementation across all touchpoints. Regular review and updates ensure the guidelines remain current and effective.

Key Takeaways:

Consistency is critical - Always follow established guidelines
Quality over speed - Take time to implement properly
Accessibility first - Ensure inclusive design practices
Continuous improvement - Provide feedback for guideline enhancement

Questions or Need Support? Contact the brand team at [email protected]

Assets and Resources​

Table of Contents - Part 3​

📁 Asset Library​

🛠️ Design Templates​

💾 Technical Resources​

📋 Implementation Checklist​

📞 Support & Contacts​

Asset Library​

Logo File Collection​

Horizontal Logo Versions​

Vertical Logo Versions​

Logo Mark (Symbol Only)​

File Format Guide​

Vector Formats (Preferred)​

Raster Formats (When Needed)​

Color Resource Files​

Digital Color Swatches​

Print Color References​

Typography Resources​

Web Font Integration​

Font License Information​

Design Templates​

Web Page Templates​

Homepage Template Structure​

Product Page Template​

Email Templates​

Newsletter Template​

Transactional Email Template​

Social Media Templates​

Instagram Post Templates​

LinkedIn Cover Templates​

Presentation Templates​

PowerPoint/Keynote Master Slides​

Technical Resources​

Development Assets​

CSS Framework Integration​

JavaScript Utilities​

Component Library Integration​

React Components​

Vue.js Components​

Implementation Checklist​

Pre-Launch Checklist​

Brand Asset Verification​

Technical Implementation​

Content and Messaging​

Ongoing Maintenance Checklist​

Monthly Brand Audit​

Quarterly Review​

Annual Assessment​

Quality Assurance Standards​

Design Review Process​

Technical Review Process​

Support & Contacts​

Brand Team Contacts​

Primary Brand Contacts​

Asset Request Process​

Technical Support​

Developer Resources​

Community Support​

Training and Education​

Onboarding for New Team Members​

External Vendor Training​

Legal and Compliance​

Trademark and Copyright Information​

Compliance Reporting​

Feedback and Improvement​

Guideline Feedback​

Success Stories​

Version Control and Updates​

Guideline Versioning​

Change Log​

Update Notification System​

Asset Version Control​

File Naming Convention​

Archive System​

Conclusion​