Brand Identity

Brand Identity Overview

Our brand identity creates a professional, cohesive visual system that reinforces Brandmine’s role as a cross-cultural business intelligence platform. The identity balances global professionalism with approachable warmth, using a strategic color palette and typography system that works across languages and cultures.

Logo System

The Brandmine logo system consists of several variations to accommodate different contexts and applications:

html

<!-- Primary Logo -->
<div class="logo">
  <img src="/assets/images/site/logos/brandmine-logo-primary.svg" alt="Brandmine">
</div>

<!-- Reversed Logo -->
<div class="logo logo-reversed">
  <img src="/assets/images/site/logos/brandmine-logo-reversed.svg" alt="Brandmine">
</div>

<!-- Icon Logo -->
<div class="logo-icon">
  <img src="/assets/images/site/logos/brandmine-icon.svg" alt="Brandmine">
</div>

<!-- Using the logo in the header -->
<header class="site-header">
  <div class="wrapper">
    <a class="site-title" href="/en/">
      <img src="/assets/images/site/logos/brandmine-logo-reversed.svg" alt="Brandmine" class="site-logo">
    </a>
    <!-- Navigation elements -->
  </div>
</header>

Logo Usage Guidelines

Color System

Our color system consists of four color families that work together to create a cohesive and professional visual identity:

:root {
  /* Primary Colors (Teal) */
  --primary-50: #E6FFFA;
  --primary-100: #B2F5EA;
  --primary-200: #81E6D9;
  --primary-300: #4FD1C5;
  --primary-400: #38B2AC; /* Primary brand color */
  --primary-500: #319795;
  --primary-600: #2C7A7B;
  --primary-700: #285E61;
  --primary-800: #234E52;
  --primary-900: #1D4044;

  /* Secondary Colors (Orange) */
  --secondary-50: #FFF7ED;
  --secondary-100: #FFEDD5;
  --secondary-200: #FED7AA;
  --secondary-300: #FDBA74;
  --secondary-400: #FB923C;
  --secondary-500: #F97316; /* Main secondary color */
  --secondary-600: #EA580C;
  --secondary-700: #C2410C;
  --secondary-800: #9A3412;
  --secondary-900: #7C2D12;

  /* Accent Colors (Indigo) */
  --accent-50: #EEF2FF;
  --accent-100: #E0E7FF;
  --accent-200: #C7D2FE;
  --accent-300: #A5B4FC;
  --accent-400: #818CF8;
  --accent-500: #6366F1; /* Main accent color */
  --accent-600: #4F46E5;
  --accent-700: #4338CA;
  --accent-800: #3730A3;
  --accent-900: #312E81;

  /* Neutral Colors (Gray) */
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563; /* Primary text */
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
}

Color Usage Guidelines

Each color family has specific applications across the platform:

Typography

Our typography system follows the “Evernote approach” with serif fonts for headings and sans-serif for body text:

:root {
  /* Language-specific font definitions */
  --font-heading-en: "PT Serif", Georgia, serif;
  --font-body-en: "PT Sans", Arial, sans-serif;
  
  --font-heading-ru: "PT Serif", Georgia, serif;
  --font-body-ru: "PT Sans", Arial, sans-serif;
  
  --font-heading-zh: "Noto Serif SC", "Songti SC", "FangSong", "STSong", serif;
  --font-body-zh: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  
  /* Default to English fonts */
  --font-heading: var(--font-heading-en);
  --font-body: var(--font-body-en);
}

/* Language-specific overrides via HTML attribute */
html[lang="ru"] {
  --font-heading: var(--font-heading-ru);
  --font-body: var(--font-body-ru);
}

html[lang="zh"] {
  --font-heading: var(--font-heading-zh);
  --font-body: var(--font-body-zh);
}

Iconography

A consistent icon system supports the brand identity:

Brand Assets

Standard assets for consistent brand implementation:

Implementation Guidelines

Brand Identity Best Practices

1. Consistent logo usage
   • Maintain proper spacing and sizing for the logo
   • Use the appropriate logo version for each context
   • Never alter the logo proportions or colors
2. Color application
   • Use the brand colors according to their designated roles
   • Maintain proper contrast for readability and accessibility
   • Ensure consistent color application across all materials
3. Typography implementation
   • Follow the multilingual typographic guidelines
   • Respect type hierarchy for clear communication
   • Use appropriate font weights and styles
4. Accessibility considerations
   • Ensure sufficient color contrast for text and interactive elements
   • Test designs with screen readers and other assistive technologies
   • Follow WCAG 2.1 AA standards at minimum
5. Responsive behavior
   • Maintain brand cohesion across all device sizes
   • Ensure logo legibility at smaller scales
   • Adapt layouts appropriately while preserving brand identity