CLAUDE.md

Master project guide for Claude Code collaboration on Brandmine.

🧭 Project Overview

Brandmine is a multilingual Jekyll site showcasing BRICS+ consumer brands with founder stories and dimension-based discovery.

Architecture: Three languages (EN/RU/ZH), static Jekyll site, GitHub Pages deployment, Jekyll 3.9.5.

🗂 Key Structure

_brands/{lang}/           — Brand profiles (customer-facing)
_founders/{lang}/         — Founder profiles (customer-facing)
_dimensions/{lang}/{type}/ — Taxonomy (markets, sectors, attributes, signals)
_insights/{lang}/         — Blog content (customer-facing insights)
_journal/{lang}/          — Internal blog (development journey)
_pages/{lang}/            — Static pages (about, contact, etc.)
_data/                    — Configuration and translations
_includes/                — Reusable components
assets/                   — CSS, JS, images

🏷️ Dimensions System

Four dimension types (never create new types):

markets — Geographic regions (brazil, russia, china)
sectors — Industries (wine, natural-beauty, artisanal-spirits)
attributes — Brand qualities (founder-led, heritage-brand)
signals — Growth indicators (export-ready, franchise-ready)

Brand taxonomy usage:

sectors: ["wine"]
markets: ["russia"]
attributes: ["founder-led"]
signals: ["export-ready"]

🎨 Official Color System (NEVER CHANGE)

Dimension Colors

Insight Category Colors (Aligned with Dimensions)

Critical Rule: Insight categories use SAME colors as dimension types for consistency.

🎯 BEM-Compliant Panel System

IMPORTANT: Use BEM classes for new development. Legacy classes still work.

Panel Types Available

/* Hero panels */
.panel--hero                    /* Navigation pages */
.panel--hero-subtle             /* Profile pages */
.panel--hero-split              /* Side-by-side layout */
.panel--hero-card               /* Card-based layout */

/* Color panels */
.panel--light                   /* White background */
.panel--secondary-soft          /* Light orange */
.panel--accent-soft             /* Light purple */
.panel--neutral-soft            /* Light gray */
.panel--sky-soft                /* Light blue */
.panel--olive-soft              /* Light green */

BEM Usage for New Development

<!-- ✅ CORRECT: BEM-compliant -->
<div class="panel panel--hero">
  <div class="panel__content">
    <h1 class="panel__heading-primary--hero">Title</h1>
    <p class="panel__subtitle--hero">Subtitle</p>
  </div>
</div>

<div class="panel panel--secondary-soft">
  <div class="panel__content--secondary-soft">
    <h2 class="panel__heading-secondary--secondary-soft">Section</h2>
    <p class="panel__lead-text--secondary-soft">Content</p>
  </div>
</div>

<!-- ❌ LEGACY: Still works but not preferred for new development -->
<div class="panel panel--hero">
  <div class="panel__content">
    <h1 class="panel__heading-primary">Title</h1>
  </div>
</div>

🏗️ Architecture Principles

“Logic Light” Philosophy

3-layer architecture: Configuration → Processing → Styling

# _data/page_sections.yml - Configuration layer
brand-profile:
  panel_mappings:
    identity:
      type: panel--hero-subtle  # Drives styling automatically

# _data/component_defaults.yml - Component behavior
cards:
  brand-card:
    show_location: true
    tag_limit: 4

Pattern: Use page-sections helper (processes configuration)

  <section class="brands-section brands-section--breadcrumbs"
           id="brands-section-breadcrumbs"
           aria-labelledby="heading-breadcrumbs">
    
<div class="breadcrumbs-wrapper">
  <nav class="breadcrumbs " aria-label="

  Breadcrumb navigation
">
    
          <a href="/en/" class="back-link">← 

  Home

</a>
        
  </nav>
</div>

  </section>

    <section class="brands-section brands-section--hero" 
             id="brands-section-hero" 
             aria-labelledby="heading-hero">
      
<div class="panel panel--hero-split">
  <div class="panel__content">
    
<div class="split-hero split-hero--teal split-hero--landing">
  <!-- Text Content Section -->
  <div class="split-hero__content">
    <h1 class="split-hero__title">
      
  Explore Founder-Led BRICS+ Consumer Brands

    </h1>
    <p class="split-hero__subtitle">
      
  Discover founder-led brands with global potential

    </p>
  </div>
  
  <!-- Image Section -->
  <div class="split-hero__image">
    
<img src="/assets/images/pages/brands/brands-hero-400w.jpg"
     srcset="/assets/images/pages/brands/brands-hero-400w.jpg 400w,
             /assets/images/pages/brands/brands-hero-800w.jpg 800w,
             /assets/images/pages/brands/brands-hero-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
     alt="BRICS+ consumer brands"
     class="split-hero__img"
     data-purpose="hero"
     onerror="
       
         this.src='/assets/images/placeholders/pages-hero-400w.jpg'; this.onerror=null;
       
     "
     loading="eager">

  </div>
</div>
      
  </div>
</div>
          
    </section>
  
    <section class="brands-section brands-section--impact" 
             id="brands-section-impact" 
             aria-labelledby="heading-impact">
      
<div class="panel panel--primary panel--impact">
  <div class="panel__content">
    
  <h2 class="panel__heading-secondary">

  From Local Heroes to Global Champions
</h2>

  <p class="panel__lead-text">

  These aren't your typical startups. We showcase proven winners from BRICS+ markets—brands with real traction, passionate founders, and compelling stories that have been invisible to the global stage until now.
</p>

  </div>
</div>
          
    </section>
  
    <section class="brands-section brands-section--featured-brands" 
             id="brands-section-featured-brands" 
             aria-labelledby="heading-featured-brands">
      
<div class="panel panel--orange-soft">
  <div class="panel__content">
    
<h2 class="panel__heading-secondary">
  
  Featured Brands

</h2>
<p class="panel__lead-text">
  Market-proven winners with compelling founder stories and explosive growth potential
</p>

  <!-- Default carousel mode -->
  <div class="featured-brands-carousel ">
    
  <article class="brand-card brand-card--featured">
    <!-- Hero Image with Metric Badge -->
    <div class="brand-card__image">
      
<img src="/assets/images/brands/br-serra-verde/br-serra-verde-hero-farmland-400w.jpg"
     srcset="/assets/images/brands/br-serra-verde/br-serra-verde-hero-farmland-400w.jpg 400w,
             /assets/images/brands/br-serra-verde/br-serra-verde-hero-farmland-800w.jpg 800w,
             /assets/images/brands/br-serra-verde/br-serra-verde-hero-farmland-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
     alt="Serra Verde organic farm in Atlantic Forest region"
     class="brand-card__img"
     data-purpose="hero"
     onerror="
       
         this.src='/assets/images/brands/br-serra-verde/br-serra-verde-hero-400w.jpg';
         this.srcset='/assets/images/brands/br-serra-verde/br-serra-verde-hero-400w.jpg 400w, /assets/images/brands/br-serra-verde/br-serra-verde-hero-800w.jpg 800w, /assets/images/brands/br-serra-verde/br-serra-verde-hero-1200w.jpg 1200w';
         this.onerror=function(){this.src='/assets/images/brands/br-serra-verde/br-serra-verde-hero-400w.jpg'; this.onerror=null;};
       
     "
     loading="lazy">

      <!-- Metric Badge (top-right) -->
      
        <div class="brand-card__metric-badge">
          <div class="metric-value">28</div>
          
            <div class="metric-label">Families</div>
          
        </div>
      
    </div>

    <!-- Card Content -->
    <div class="brand-card__content">
      <!-- Brand Name -->
      <h3 class="brand-card__title">Serra Verde Organics</h3>

      <!-- Founded year + City + Flag -->
      <div class="brand-card__meta">
        
          <span class="meta-founded">

  Founded
 1986</span>
        
<span class="separator separator--bullet" aria-hidden="true">
  ✦
</span>

          <span class="meta-location">
            Gonçalves
            
  🇧🇷

          </span>
        
      </div>

      <!-- Description -->
      
        <p class="brand-card__description">Family-owned producer of organic preserves, honeys, and specialty coffees from Brazil's Atlantic Forest region.</p>
      
      <!-- Taxonomy Tags (Using unified component) -->
      
    <div class="brand-card-tags brand-card-tags--

  standard
 brand-card-tags--spacing-normal">
      
            <a href="/en/discover/markets/brazil/"
               class="brand-card-tags__tag brand-card-tags__tag--market">
              
Brazil
            </a>
          
            <a href="/en/discover/sectors/gourmet-foods/"
               class="brand-card-tags__tag brand-card-tags__tag--sector">
              
Gourmet Foods
            </a>
          
            <a href="/en/discover/attributes/founder-led/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Founder-led
            </a>
          
            <a href="/en/discover/attributes/sustainability-pioneer/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Sustainability Pioneer
            </a>
          
    </div>
  
      <!-- Single CTA -->
      <div class="brand-card__cta">
        <a href="/en/brands/br-serra-verde/" class="brand-card__button">
          
  View Profile
 →
        </a>
      </div>
    </div>
  </article>

  <article class="brand-card brand-card--featured">
    <!-- Hero Image with Metric Badge -->
    <div class="brand-card__image">
      
<img src="/assets/images/brands/br-sojourn-hotels/br-sojourn-hotels-hero-property-400w.jpg"
     srcset="/assets/images/brands/br-sojourn-hotels/br-sojourn-hotels-hero-property-400w.jpg 400w,
             /assets/images/brands/br-sojourn-hotels/br-sojourn-hotels-hero-property-800w.jpg 800w,
             /assets/images/brands/br-sojourn-hotels/br-sojourn-hotels-hero-property-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
     alt="Sojourn hotel property with Brazilian landscape"
     class="brand-card__img"
     data-purpose="hero"
     onerror="
       
         this.src='/assets/images/brands/br-sojourn-hotels/br-sojourn-hotels-hero-400w.jpg';
         this.srcset='/assets/images/brands/br-sojourn-hotels/br-sojourn-hotels-hero-400w.jpg 400w, /assets/images/brands/br-sojourn-hotels/br-sojourn-hotels-hero-800w.jpg 800w, /assets/images/brands/br-sojourn-hotels/br-sojourn-hotels-hero-1200w.jpg 1200w';
         this.onerror=function(){this.src='/assets/images/brands/br-sojourn-hotels/br-sojourn-hotels-hero-400w.jpg'; this.onerror=null;};
       
     "
     loading="lazy">

      <!-- Metric Badge (top-right) -->
      
        <div class="brand-card__metric-badge">
          <div class="metric-value">5</div>
          
            <div class="metric-label">Properties</div>
          
        </div>
      
    </div>

    <!-- Card Content -->
    <div class="brand-card__content">
      <!-- Brand Name -->
      <h3 class="brand-card__title">Sojourn Boutique Hotels</h3>

      <!-- Founded year + City + Flag -->
      <div class="brand-card__meta">
        
          <span class="meta-founded">

  Founded
 2012</span>
        
<span class="separator separator--bullet" aria-hidden="true">
  ✦
</span>

          <span class="meta-location">
            Rio de Janeiro
            
  🇧🇷

          </span>
        
      </div>

      <!-- Description -->
      
        <p class="brand-card__description">A collection of intimate boutique hotels celebrating Brazil's diverse landscapes through sustainable luxury and authentic local experiences.</p>
      
      <!-- Taxonomy Tags (Using unified component) -->
      
    <div class="brand-card-tags brand-card-tags--

  standard
 brand-card-tags--spacing-normal">
      
            <a href="/en/discover/markets/brazil/"
               class="brand-card-tags__tag brand-card-tags__tag--market">
              
Brazil
            </a>
          
            <a href="/en/discover/sectors/hotels-resorts/"
               class="brand-card-tags__tag brand-card-tags__tag--sector">
              
Hotels & Resorts
            </a>
          
            <a href="/en/discover/attributes/founder-led/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Founder-led
            </a>
          
            <a href="/en/discover/attributes/sustainability-pioneer/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Sustainability Pioneer
            </a>
          
            <a href="/en/discover/signals/franchise-ready/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Franchise Ready
            </a>
          
    </div>
  
      <!-- Single CTA -->
      <div class="brand-card__cta">
        <a href="/en/brands/br-sojourn-hotels/" class="brand-card__button">
          
  View Profile
 →
        </a>
      </div>
    </div>
  </article>

  <article class="brand-card brand-card--featured">
    <!-- Hero Image with Metric Badge -->
    <div class="brand-card__image">
      
<img src="/assets/images/brands/ru-altai-honey/ru-altai-honey-hero-apiaries-400w.jpg"
     srcset="/assets/images/brands/ru-altai-honey/ru-altai-honey-hero-apiaries-400w.jpg 400w,
             /assets/images/brands/ru-altai-honey/ru-altai-honey-hero-apiaries-800w.jpg 800w,
             /assets/images/brands/ru-altai-honey/ru-altai-honey-hero-apiaries-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
     alt="Altai mountain apiaries in pristine natural setting"
     class="brand-card__img"
     data-purpose="hero"
     onerror="
       
         this.src='/assets/images/brands/ru-altai-honey/ru-altai-honey-hero-400w.jpg';
         this.srcset='/assets/images/brands/ru-altai-honey/ru-altai-honey-hero-400w.jpg 400w, /assets/images/brands/ru-altai-honey/ru-altai-honey-hero-800w.jpg 800w, /assets/images/brands/ru-altai-honey/ru-altai-honey-hero-1200w.jpg 1200w';
         this.onerror=function(){this.src='/assets/images/brands/ru-altai-honey/ru-altai-honey-hero-400w.jpg'; this.onerror=null;};
       
     "
     loading="lazy">

      <!-- Metric Badge (top-right) -->
      
        <div class="brand-card__metric-badge">
          <div class="metric-value">50+</div>
          
            <div class="metric-label">Apiaries</div>
          
        </div>
      
    </div>

    <!-- Card Content -->
    <div class="brand-card__content">
      <!-- Brand Name -->
      <h3 class="brand-card__title">Altai Gold Honey</h3>

      <!-- Founded year + City + Flag -->
      <div class="brand-card__meta">
        
          <span class="meta-founded">

  Founded
 2005</span>
        
<span class="separator separator--bullet" aria-hidden="true">
  ✦
</span>

          <span class="meta-location">
            Barnaul
            
  🇷🇺

          </span>
        
      </div>

      <!-- Description -->
      
        <p class="brand-card__description">Traditional Siberian honey producer specializing in premium wildflower and pine honey from the pristine Altai Mountains of Russia.</p>
      
      <!-- Taxonomy Tags (Using unified component) -->
      
    <div class="brand-card-tags brand-card-tags--

  standard
 brand-card-tags--spacing-normal">
      
            <a href="/en/discover/markets/russia/"
               class="brand-card-tags__tag brand-card-tags__tag--market">
              
Russia
            </a>
          
            <a href="/en/discover/sectors/honey-bee-products/"
               class="brand-card-tags__tag brand-card-tags__tag--sector">
              
Honey & Bee Products
            </a>
          
            <a href="/en/discover/attributes/founder-led/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Founder-led
            </a>
          
            <a href="/en/discover/attributes/sustainability-pioneer/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Sustainability Pioneer
            </a>
          
            <a href="/en/discover/attributes/artisanal-excellence/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Artisanal Excellence
            </a>
          
            <a href="/en/discover/signals/export-ready/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Export Ready
            </a>
          
    </div>
  
      <!-- Single CTA -->
      <div class="brand-card__cta">
        <a href="/en/brands/ru-altai-honey/" class="brand-card__button">
          
  View Profile
 →
        </a>
      </div>
    </div>
  </article>

  <article class="brand-card brand-card--featured">
    <!-- Hero Image with Metric Badge -->
    <div class="brand-card__image">
      
<img src="/assets/images/brands/ru-seven-spices/ru-seven-spices-hero-market-400w.jpg"
     srcset="/assets/images/brands/ru-seven-spices/ru-seven-spices-hero-market-400w.jpg 400w,
             /assets/images/brands/ru-seven-spices/ru-seven-spices-hero-market-800w.jpg 800w,
             /assets/images/brands/ru-seven-spices/ru-seven-spices-hero-market-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
     alt="Bustling Moscow spice market with Seven Spices products"
     class="brand-card__img"
     data-purpose="hero"
     onerror="
       
         this.src='/assets/images/brands/ru-seven-spices/ru-seven-spices-hero-400w.jpg';
         this.srcset='/assets/images/brands/ru-seven-spices/ru-seven-spices-hero-400w.jpg 400w, /assets/images/brands/ru-seven-spices/ru-seven-spices-hero-800w.jpg 800w, /assets/images/brands/ru-seven-spices/ru-seven-spices-hero-1200w.jpg 1200w';
         this.onerror=function(){this.src='/assets/images/brands/ru-seven-spices/ru-seven-spices-hero-400w.jpg'; this.onerror=null;};
       
     "
     loading="lazy">

      <!-- Metric Badge (top-right) -->
      
        <div class="brand-card__metric-badge">
          <div class="metric-value">4</div>
          
            <div class="metric-label">Countries</div>
          
        </div>
      
    </div>

    <!-- Card Content -->
    <div class="brand-card__content">
      <!-- Brand Name -->
      <h3 class="brand-card__title">Seven Spices of Siberia</h3>

      <!-- Founded year + City + Flag -->
      <div class="brand-card__meta">
        
          <span class="meta-founded">

  Founded
 2012</span>
        
<span class="separator separator--bullet" aria-hidden="true">
  ✦
</span>

          <span class="meta-location">
            Novosibirsk
            
  🇷🇺

          </span>
        
      </div>

      <!-- Description -->
      
        <p class="brand-card__description">Artisanal spice blend company specializing in traditional Siberian and Central Asian spice combinations for modern Russian cuisine.</p>
      
      <!-- Taxonomy Tags (Using unified component) -->
      
    <div class="brand-card-tags brand-card-tags--

  standard
 brand-card-tags--spacing-normal">
      
            <a href="/en/discover/markets/russia/"
               class="brand-card-tags__tag brand-card-tags__tag--market">
              
Russia
            </a>
          
            <a href="/en/discover/sectors/gourmet-foods/"
               class="brand-card-tags__tag brand-card-tags__tag--sector">
              
Gourmet Foods
            </a>
          
            <a href="/en/discover/attributes/founder-led/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Founder-led
            </a>
          
            <a href="/en/discover/attributes/cultural-bridge/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Cultural Bridge
            </a>
          
            <a href="/en/discover/attributes/artisanal-excellence/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Artisanal Excellence
            </a>
          
            <a href="/en/discover/signals/export-ready/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Export Ready
            </a>
          
            <a href="/en/discover/signals/rapid-growth/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Rapid Growth
            </a>
          
    </div>
  
      <!-- Single CTA -->
      <div class="brand-card__cta">
        <a href="/en/brands/ru-seven-spices/" class="brand-card__button">
          
  View Profile
 →
        </a>
      </div>
    </div>
  </article>

  <article class="brand-card brand-card--featured">
    <!-- Hero Image with Metric Badge -->
    <div class="brand-card__image">
      
<img src="/assets/images/brands/ru-taiga-spirits/ru-taiga-spirits-hero-distillery-400w.jpg"
     srcset="/assets/images/brands/ru-taiga-spirits/ru-taiga-spirits-hero-distillery-400w.jpg 400w,
             /assets/images/brands/ru-taiga-spirits/ru-taiga-spirits-hero-distillery-800w.jpg 800w,
             /assets/images/brands/ru-taiga-spirits/ru-taiga-spirits-hero-distillery-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
     alt="Taiga Spirits distillery near Lake Baikal"
     class="brand-card__img"
     data-purpose="hero"
     onerror="
       
         this.src='/assets/images/brands/ru-taiga-spirits/ru-taiga-spirits-hero-400w.jpg';
         this.srcset='/assets/images/brands/ru-taiga-spirits/ru-taiga-spirits-hero-400w.jpg 400w, /assets/images/brands/ru-taiga-spirits/ru-taiga-spirits-hero-800w.jpg 800w, /assets/images/brands/ru-taiga-spirits/ru-taiga-spirits-hero-1200w.jpg 1200w';
         this.onerror=function(){this.src='/assets/images/brands/ru-taiga-spirits/ru-taiga-spirits-hero-400w.jpg'; this.onerror=null;};
       
     "
     loading="lazy">

      <!-- Metric Badge (top-right) -->
      
        <div class="brand-card__metric-badge">
          <div class="metric-value">4</div>
          
            <div class="metric-label">Export Markets</div>
          
        </div>
      
    </div>

    <!-- Card Content -->
    <div class="brand-card__content">
      <!-- Brand Name -->
      <h3 class="brand-card__title">Taiga Spirits</h3>

      <!-- Founded year + City + Flag -->
      <div class="brand-card__meta">
        
          <span class="meta-founded">

  Founded
 2014</span>
        
<span class="separator separator--bullet" aria-hidden="true">
  ✦
</span>

          <span class="meta-location">
            Listvyanka
            
  🇷🇺

          </span>
        
      </div>

      <!-- Description -->
      
        <p class="brand-card__description">Craft distillery creating exceptional small-batch vodkas and botanical spirits using ancient Siberian recipes and wild-harvested ingredients.</p>
      
      <!-- Taxonomy Tags (Using unified component) -->
      
    <div class="brand-card-tags brand-card-tags--

  standard
 brand-card-tags--spacing-normal">
      
            <a href="/en/discover/markets/russia/"
               class="brand-card-tags__tag brand-card-tags__tag--market">
              
Russia
            </a>
          
            <a href="/en/discover/sectors/artisanal-spirits/"
               class="brand-card-tags__tag brand-card-tags__tag--sector">
              
Artisanal Spirits
            </a>
          
            <a href="/en/discover/sectors/wine/"
               class="brand-card-tags__tag brand-card-tags__tag--sector">
              
Wine
            </a>
          
            <a href="/en/discover/attributes/founder-led/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Founder-led
            </a>
          
            <a href="/en/discover/attributes/artisanal-excellence/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Artisanal Excellence
            </a>
          
            <a href="/en/discover/signals/export-ready/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Export Ready
            </a>
          
    </div>
  
      <!-- Single CTA -->
      <div class="brand-card__cta">
        <a href="/en/brands/ru-taiga-spirits/" class="brand-card__button">
          
  View Profile
 →
        </a>
      </div>
    </div>
  </article>

  <article class="brand-card brand-card--featured">
    <!-- Hero Image with Metric Badge -->
    <div class="brand-card__image">
      
<img src="/assets/images/brands/ru-teatime/ru-teatime-hero-storefront-400w.jpg"
     srcset="/assets/images/brands/ru-teatime/ru-teatime-hero-storefront-400w.jpg 400w,
             /assets/images/brands/ru-teatime/ru-teatime-hero-storefront-800w.jpg 800w,
             /assets/images/brands/ru-teatime/ru-teatime-hero-storefront-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
     alt="TeaTime's flagship tearoom in Moscow's historic Arbat district"
     class="brand-card__img"
     data-purpose="hero"
     onerror="
       
         this.src='/assets/images/brands/ru-teatime/ru-teatime-hero-400w.jpg';
         this.srcset='/assets/images/brands/ru-teatime/ru-teatime-hero-400w.jpg 400w, /assets/images/brands/ru-teatime/ru-teatime-hero-800w.jpg 800w, /assets/images/brands/ru-teatime/ru-teatime-hero-1200w.jpg 1200w';
         this.onerror=function(){this.src='/assets/images/brands/ru-teatime/ru-teatime-hero-400w.jpg'; this.onerror=null;};
       
     "
     loading="lazy">

      <!-- Metric Badge (top-right) -->
      
        <div class="brand-card__metric-badge">
          <div class="metric-value">23</div>
          
            <div class="metric-label">Countries</div>
          
        </div>
      
    </div>

    <!-- Card Content -->
    <div class="brand-card__content">
      <!-- Brand Name -->
      <h3 class="brand-card__title">TeaTime</h3>

      <!-- Founded year + City + Flag -->
      <div class="brand-card__meta">
        
          <span class="meta-founded">

  Founded
 1998</span>
        
<span class="separator separator--bullet" aria-hidden="true">
  ✦
</span>

          <span class="meta-location">
            Moscow
            
  🇷🇺

          </span>
        
      </div>

      <!-- Description -->
      
        <p class="brand-card__description">Moscow's premium tea house offering artisanal tea blends and exceptional tea ceremonies in modern settings with traditional Russian influences.</p>
      
      <!-- Taxonomy Tags (Using unified component) -->
      
    <div class="brand-card-tags brand-card-tags--

  standard
 brand-card-tags--spacing-normal">
      
            <a href="/en/discover/markets/russia/"
               class="brand-card-tags__tag brand-card-tags__tag--market">
              
Russia
            </a>
          
            <a href="/en/discover/sectors/gourmet-foods/"
               class="brand-card-tags__tag brand-card-tags__tag--sector">
              
Gourmet Foods
            </a>
          
            <a href="/en/discover/attributes/founder-led/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Founder-led
            </a>
          
            <a href="/en/discover/attributes/heritage-brand/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Heritage Brand
            </a>
          
            <a href="/en/discover/attributes/artisanal-excellence/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Artisanal Excellence
            </a>
          
            <a href="/en/discover/signals/export-ready/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Export Ready
            </a>
          
            <a href="/en/discover/signals/rapid-growth/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Rapid Growth
            </a>
          
    </div>
  
      <!-- Single CTA -->
      <div class="brand-card__cta">
        <a href="/en/brands/ru-teatime/" class="brand-card__button">
          
  View Profile
 →
        </a>
      </div>
    </div>
  </article>

  </div>

<!-- Scroll indicator dots - Dynamic based on number of brands -->

  <div class="featured-brands-nav">
    
      <span class="featured-brands-nav-dot active"></span>
    
      <span class="featured-brands-nav-dot "></span>
    
      <span class="featured-brands-nav-dot "></span>
    
  </div>

<div class="more-brands">
  <a href="/en/brands/"
     class="btn btn--primary-cta"
     data-track="featured-brands">
    Explore All Brands
  </a>
</div>
      
  </div>
</div>
          
    </section>
  
    <section class="brands-section brands-section--latest-brands" 
             id="brands-section-latest-brands" 
             aria-labelledby="heading-latest-brands">
      
<div class="panel panel--light">
  <div class="panel__content">
    
<!-- Latest Brands Section -->
<div class="panel__content">
  <div class="latest-brands">
    <div class="latest-brands__header">
      <h2 class="latest-brands__title">
        
  All Brands

      </h2>
      <p class="latest-brands__description">
        
  Discover exceptional founder-led brands from BRICS+ countries.

      </p>
    </div>

    <!-- Brand Grid -->
    
      <!-- Empty state -->
      <div class="latest-brands__empty">
        <p class="latest-brands__empty-message">
          
  No brands available yet. Check back soon!

        </p>
      </div>
    
    <!-- Load More / View All CTA -->
    
  </div>
</div>
      
  </div>
</div>
          
    </section>
  
    <section class="brands-section brands-section--contact-cta" 
             id="brands-section-contact-cta" 
             aria-labelledby="heading-contact-cta">
      
<div class="panel panel--cta">
  <div class="panel__content panel--centered">
    
<h2 class="panel__heading-secondary">
  
  Ready to Discover BRICS+ Brands?

</h2>
<p class="panel__lead-text">
  
  Contact us to learn more about our featured brands or to discuss your specific needs.

</p>
<div class="cta-buttons">
  <a href="//about/#about-section-contact" 
     class="btn btn--primary-cta"
     data-track="suggest-brand">
    
  Suggest a Brand

  </a>
  <a href="//about/#about-section-contact" 
     class="btn btn--secondary-cta"
     data-track="get-profiled">
    
  Get Profiled

  </a>
</div>

  </div>
</div>
          
    </section>

Flow: page_sections.yml → page-sections.html → panel-types.scss → Beautiful UI

Mobile-First Responsive Design

Always use min-width breakpoints:

/* Mobile-first base styles */
.component {
  width: 100%;
}

/* Tablet and up */
@media (min-width: 768px) {
  .component {
    width: var(--card-width-standard);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .component {
    width: var(--card-width-featured);
  }
}

Never use max-width - always progressive enhancement.

Card System

Single components with simple variants:

  <article class="brand-card">
    
<header class="brand-card__header">
  <div class="brand-card__logo">
    
<img src="/assets/images/brands/ru-teatime/ru-teatime-logo-color-400w.png"
     srcset="/assets/images/brands/ru-teatime/ru-teatime-logo-color-400w.png 400w,
             /assets/images/brands/ru-teatime/ru-teatime-logo-color-800w.png 800w,
             /assets/images/brands/ru-teatime/ru-teatime-logo-color-1200w.png 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 85vw, 600px"
     alt="TeaTime logo featuring elegant Cyrillic lettering"
     class="brand-card"
     data-purpose="logo"
     onerror="
       
         this.src='/assets/images/brands/ru-teatime/ru-teatime-logo-400w.png';
         this.srcset='/assets/images/brands/ru-teatime/ru-teatime-logo-400w.png 400w, /assets/images/brands/ru-teatime/ru-teatime-logo-800w.png 800w, /assets/images/brands/ru-teatime/ru-teatime-logo-1200w.png 1200w';
         this.onerror=function(){this.src='/assets/images/brands/ru-teatime/ru-teatime-logo-400w.png'; this.onerror=null;};
       
     "
     loading="lazy">

  </div>

  <div class="brand-card__header-text">
    <h2 class="brand-card__title">TeaTime</h2>

      <p class="brand-card__founding-year">
        
  Founded
 1998
      </p>
    
      <p class="brand-card__location">
        
<span class="location">Moscow, 

<!-- Get the country code to look up from the include parameter -->

<!-- Determine which language to display the name in (default to current page language) -->

<!-- Look up the country information from the JSON data file -->

<!-- Check if we found country information -->
RU
</span>

      </p>
    
  </div>
</header>

    <div class="brand-card__body">
      <p class="brand-card__description">Moscow's premium tea house offering artisanal tea blends and exceptional tea ceremonies in modern settings with traditional Russian influences.</p>

      <!-- Taxonomy Tags (Using unified component) -->
      
    <div class="brand-card-tags brand-card-tags--

  standard
 brand-card-tags--spacing-normal">
      
            <a href="/en/discover/markets/russia/"
               class="brand-card-tags__tag brand-card-tags__tag--market">
              
Russia
            </a>
          
            <a href="/en/discover/sectors/gourmet-foods/"
               class="brand-card-tags__tag brand-card-tags__tag--sector">
              
Gourmet Foods
            </a>
          
            <a href="/en/discover/attributes/founder-led/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Founder-led
            </a>
          
            <a href="/en/discover/attributes/heritage-brand/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Heritage Brand
            </a>
          
            <a href="/en/discover/attributes/artisanal-excellence/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Artisanal Excellence
            </a>
          
            <a href="/en/discover/signals/export-ready/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Export Ready
            </a>
          
            <a href="/en/discover/signals/rapid-growth/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Rapid Growth
            </a>
          
    </div>
  
    </div>

    <footer class="brand-card__footer">
      <a href="/en/brands/ru-teatime/" class="brand-card__link">
        
  View Profile
 →
      </a>

    </footer>
  </article>

                    <!-- Standard -->

  <article class="brand-card brand-card--featured">
    <!-- Hero Image with Metric Badge -->
    <div class="brand-card__image">
      
<img src="/assets/images/brands/ru-teatime/ru-teatime-hero-storefront-400w.jpg"
     srcset="/assets/images/brands/ru-teatime/ru-teatime-hero-storefront-400w.jpg 400w,
             /assets/images/brands/ru-teatime/ru-teatime-hero-storefront-800w.jpg 800w,
             /assets/images/brands/ru-teatime/ru-teatime-hero-storefront-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
     alt="TeaTime's flagship tearoom in Moscow's historic Arbat district"
     class="brand-card__img"
     data-purpose="hero"
     onerror="
       
         this.src='/assets/images/brands/ru-teatime/ru-teatime-hero-400w.jpg';
         this.srcset='/assets/images/brands/ru-teatime/ru-teatime-hero-400w.jpg 400w, /assets/images/brands/ru-teatime/ru-teatime-hero-800w.jpg 800w, /assets/images/brands/ru-teatime/ru-teatime-hero-1200w.jpg 1200w';
         this.onerror=function(){this.src='/assets/images/brands/ru-teatime/ru-teatime-hero-400w.jpg'; this.onerror=null;};
       
     "
     loading="lazy">

      <!-- Metric Badge (top-right) -->
      
        <div class="brand-card__metric-badge">
          <div class="metric-value">23</div>
          
            <div class="metric-label">Countries</div>
          
        </div>
      
    </div>

    <!-- Card Content -->
    <div class="brand-card__content">
      <!-- Brand Name -->
      <h3 class="brand-card__title">TeaTime</h3>

      <!-- Founded year + City + Flag -->
      <div class="brand-card__meta">
        
          <span class="meta-founded">

  Founded
 1998</span>
        
<span class="separator separator--bullet" aria-hidden="true">
  ✦
</span>

          <span class="meta-location">
            Moscow
            
  🇷🇺

          </span>
        
      </div>

      <!-- Description -->
      
        <p class="brand-card__description">Moscow's premium tea house offering artisanal tea blends and exceptional tea ceremonies in modern settings with traditional Russian influences.</p>
      
      <!-- Taxonomy Tags (Using unified component) -->
      
    <div class="brand-card-tags brand-card-tags--

  standard
 brand-card-tags--spacing-normal">
      
            <a href="/en/discover/markets/russia/"
               class="brand-card-tags__tag brand-card-tags__tag--market">
              
Russia
            </a>
          
            <a href="/en/discover/sectors/gourmet-foods/"
               class="brand-card-tags__tag brand-card-tags__tag--sector">
              
Gourmet Foods
            </a>
          
            <a href="/en/discover/attributes/founder-led/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Founder-led
            </a>
          
            <a href="/en/discover/attributes/heritage-brand/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Heritage Brand
            </a>
          
            <a href="/en/discover/attributes/artisanal-excellence/"
               class="brand-card-tags__tag brand-card-tags__tag--attribute">
              
Artisanal Excellence
            </a>
          
            <a href="/en/discover/signals/export-ready/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Export Ready
            </a>
          
            <a href="/en/discover/signals/rapid-growth/"
               class="brand-card-tags__tag brand-card-tags__tag--signal">
              
Rapid Growth
            </a>
          
    </div>
  
      <!-- Single CTA -->
      <div class="brand-card__cta">
        <a href="/en/brands/ru-teatime/" class="brand-card__button">
          
  View Profile
 →
        </a>
      </div>
    </div>
  </article>

 <!-- Featured -->

  <article class="insight-card insight-card--">
    <a href="" class="insight-card__link">
      <div class="insight-card__image">
        
          <div class="insight-card__image-placeholder">
            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <circle cx="8.5" cy="8.5" r="1.5"></circle>
              <polyline points="21 15 16 10 5 21"></polyline>
            </svg>
          </div>
        
      </div>

      <div class="insight-card__content">
        
        <h3 class="insight-card__title"></h3>

        <div class="insight-card__meta">
          <span class="insight-card__date"></span>
          
        </div>

        <div class="insight-card__footer">
          <span class="insight-card__read-more">

  Read More
 →</span>
        </div>
      </div>
    </a>
  </article>
 <!-- Compact -->

💻 Essential Commands

# Development (Jekyll 3.9.5 - no --livereload)
bundle exec jekyll serve

# Production build
JEKYLL_ENV=production bundle exec jekyll build

# Validation
_scripts/core/pre-commit_check.sh

# Image processing
_scripts/core/process_images.sh [collection] [identifier]

📚 Documentation Reference

Complete details: See _docs/technical-standards.md for comprehensive technical documentation.

4-document system:

_docs/brandmine-guide.md - Master navigation
_docs/setup-and-workflows.md - Complete workflows
_docs/technical-standards.md - Architecture patterns
_docs/troubleshooting-and-tools.md - Problem resolution

⚠️ Critical Rules for Claude Code

NEVER DO

Create new dimension types (only: markets, sectors, attributes, signals)
Change insight category colors (use exact colors specified above)
Use max-width media queries (always min-width)
Create separate component files for variants (use variant logic)
Use non-BEM classes for new panel development

ALWAYS DO

Use Jekyll 3.9.5 compatible commands (no –livereload)
Create matching CSS files for HTML components
Use mobile-first approach with min-width
Use BEM-compliant panel classes for new development
Prefer editing existing files over creating new ones
Use official color system for insight categories

CSS Organization

_includes/components/cards/brand-card.html
assets/css/components/cards/brand-card.scss

Rule: Every HTML component gets a matching CSS file.

Content Width Standards

Editorial content: 700px (--form-max-width)
Profile pages: Mixed layout (1024px + 700px sections)
Grid layouts: Full width (1200px)

For complete technical details, architectural patterns, and implementation guidelines, see _docs/technical-standards.md