Comprehensive Brand Identity Guidelines for Modern Applications

Creating and maintaining a consistent brand identity across different platforms and themes is crucial for modern applications. This guide outlines comprehensive brand identity guidelines, using our application as a practical example.

Brand Identity System

Our brand identity system includes four official versions of the logo, each designed for specific use cases and environments:

Dark Theme Full Version
- Primary use: Dark background environments
- Application: Website dark mode
- Recommended for formal dark-themed presentations
Light Theme Full Version
- Primary use: Light background environments
- Application: Website light mode
- Ideal for official documents and print materials
Dark Theme Icon Version
- Use case: Dark-themed icon scenarios
- Application: Mobile app icons
- Perfect for dark theme social media avatars
Light Theme Icon Version
- Use case: Light-themed icon scenarios
- Application: Light theme app icons
- Suitable for light background social media avatars

Color Specifications

Dark Theme Colors

:root {
  --dark-background: #1e293b;
  --dark-logo-primary: #60a5fa;
  --dark-dialog: #FFFFFF;
  --dark-text-primary: #FFFFFF;
  --dark-text-secondary: #94a3b8;
}

Light Theme Colors

:root {
  --light-background: #f8fafc;
  --light-logo-primary: #3B82F6;
  --light-dialog: #93c5fd;
  --light-text-primary: #2C3E50;
  --light-text-secondary: #666666;
}

Technical Specifications

Size Requirements

.logo {
  /* Full version minimum width */
  min-width: 120px;
}
 
.logo-icon {
  /* Icon version specifications */
  min-width: 32px;
  min-height: 32px;
  
  /* Recommended icon size */
  width: 120px;
  height: 120px;
}

Safe Area Implementation

.logo-container {
  /* Safe area for full version */
  padding: calc(var(--logo-height) * 0.2);
}
 
.icon-container {
  /* Safe area for icon version */
  padding: calc(var(--icon-width) * 0.1);
}

Usage Guidelines

Common Application Scenarios

1. Full Version Implementation

// React component for full logo
const FullLogo: React.FC<{ theme: 'light' | 'dark' }> = ({ theme }) => {
  const logoSrc = theme === 'dark' 
    ? '/assets/mocki-dark-full.svg'
    : '/assets/mocki-light-full.svg';
 
  return (
    <div className="logo-container">
      <img 
        src={logoSrc}
        alt="Logo"
        className="logo full-version"
        style={{ minWidth: '120px' }}
      />
    </div>
  );
};

2. Icon Version Implementation

// React component for icon logo
const IconLogo: React.FC<{ theme: 'light' | 'dark' }> = ({ theme }) => {
  const logoSrc = theme === 'dark'
    ? '/assets/mocki-dark-icon.svg'
    : '/assets/mocki-light-icon.svg';
 
  return (
    <div className="icon-container">
      <img
        src={logoSrc}
        alt="Icon"
        className="logo icon-version"
        style={{
          width: '120px',
          height: '120px',
          minWidth: '32px',
          minHeight: '32px'
        }}
      />
    </div>
  );
};

Theme Integration

// Theme context and hook
const ThemeContext = createContext<'light' | 'dark'>('light');
 
const useTheme = () => {
  const theme = useContext(ThemeContext);
  const isDark = theme === 'dark';
 
  const colors = {
    background: isDark ? '#1e293b' : '#f8fafc',
    logoPrimary: isDark ? '#60a5fa' : '#3B82F6',
    dialog: isDark ? '#FFFFFF' : '#93c5fd',
    textPrimary: isDark ? '#FFFFFF' : '#2C3E50',
    textSecondary: isDark ? '#94a3b8' : '#666666'
  };
 
  return { theme, colors };
};

File Format Standards

SVG Implementation

// SVG logo component with theme support
const SvgLogo: React.FC<{ variant: 'full' | 'icon' }> = ({ variant }) => {
  const { theme } = useTheme();
  
  const getLogoPath = () => {
    const prefix = theme === 'dark' ? 'dark' : 'light';
    const type = variant === 'full' ? 'full' : 'icon';
    return `/assets/mocki-${prefix}-${type}.svg`;
  };
 
  return (
    <object
      data={getLogoPath()}
      type="image/svg+xml"
      className={`logo-${variant}`}
    />
  );
};

Asset Management

// Asset loader configuration
const logoAssets = {
  dark: {
    full: {
      svg: '/assets/mocki-dark-full.svg',
      png: '/assets/mocki-dark-full.png',
      pdf: '/assets/mocki-dark-full.pdf'
    },
    icon: {
      svg: '/assets/mocki-dark-icon.svg',
      png: '/assets/mocki-dark-icon.png',
      pdf: '/assets/mocki-dark-icon.pdf'
    }
  },
  light: {
    full: {
      svg: '/assets/mocki-light-full.svg',
      png: '/assets/mocki-light-full.png',
      pdf: '/assets/mocki-light-full.pdf'
    },
    icon: {
      svg: '/assets/mocki-light-icon.svg',
      png: '/assets/mocki-light-icon.png',
      pdf: '/assets/mocki-light-icon.pdf'
    }
  }
};

Prohibited Modifications

To maintain brand consistency, avoid these common mistakes:

// Example of logo modification prevention
const LogoWrapper: React.FC = ({ children }) => {
  const preventModification = (e: React.MouseEvent) => {
    e.preventDefault();
    console.warn('Logo modification is not allowed');
  };
 
  return (
    <div 
      onContextMenu={preventModification}
      className="logo-wrapper"
      style={{
        // Prevent common modifications
        filter: 'none',
        transform: 'none',
        letterSpacing: 'normal'
      }}
    >
      {children}
    </div>
  );
};

Technical Guidelines

Typography Implementation

/* Typography specifications */
.brand-name {
  font-family: Arial, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 45px;
  letter-spacing: normal;
}
 
.brand-tagline {
  font-family: Arial, sans-serif;
  font-weight: 400; /* Regular */
  font-size: 14px;
  letter-spacing: normal;
}

Icon Specifications

/* Icon version specifications */
.logo-icon {
  border-radius: 16px;
  width: 120px;
  height: 120px;
  padding: 12px; /* Internal padding for visual balance */
}

File Naming Convention

// File naming utility
const getLogoFileName = (
  theme: 'dark' | 'light',
  variant: 'full' | 'icon',
  format: 'svg' | 'png' | 'pdf'
): string => {
  return `mocki-${theme}-${variant}.${format}`;
};

Best Practices

Theme Consistency
- Always use appropriate theme version
- Maintain proper contrast ratios
- Respect safe area guidelines
Responsive Implementation
- Scale logos appropriately
- Use correct version for different screen sizes
- Maintain minimum size requirements
Asset Management
- Use SVG for web development
- Maintain PNG versions for compatibility
- Keep PDF versions for print materials
Quality Control
- Regular visual audits
- Consistent implementation checks
- Documentation updates

Conclusion

A well-implemented brand identity system ensures consistency across all platforms and enhances user recognition. By following these guidelines and using the provided technical implementations, you can maintain brand integrity while creating a seamless user experience across different themes and platforms.