DEV Community

Pavan Kumar Sadashiv
Pavan Kumar Sadashiv

Posted on

Official Corporate Standard & Future Role Ingestion Specification

HRL International Private Limited™ — Leadership Architecture & Role Onboarding Protocol

Document Status: Official Corporate Standard & Future Role Ingestion Specification

Authority: HRL International Private Limited™

Founder & Managing Director: Pavan Kumar Sadashiv (hrlpavan)

Standard Identifier: HRL-SPEC-LEADERSHIP-ONBOARDING-2026-V1

Effective Date: October 2026

Target Repositories: hrl-international-website- & HRL-Company-Page-Announcement-Design

1. Overview & Purpose of This Architecture Update

This update establishes a standalone, dedicated Corporate Leadership Directory (/leadership) for HRL International Private Limited to showcase our executive council, founders, and division managers, loading all profile pictures dynamically from the HRL CORE COMPANY ROLE directory.

Core Architecture Objectives

  1. Dedicated Executive Showcase: Independent route (/leadership and /leadership.html) decoupling executive governance from the landing page.
  2. Tactile Identity Card Design Language: Direct inheritance of the Universal Rate Card & Studio VFX standard (baby pink accent stripe, subtle rose gradient, tactile drop shadows, and typographic watermarks).
  3. High-Fidelity Specular Glass Avatar Lenses: Optical mirror glare, diagonal lens horizon reflections, and continuous $360^\circ$ specular conic chrome rims.
  4. Symmetrical Placing Principle: Balanced responsive grid (3 columns on desktop, 2 on tablet, 1 on mobile) with zero lone dangling cards.
  5. Zero Main Page Regression: The main page (index.html) remains clean and regression-free, with surgical navigation links inserted into the navbar and footer.

2. Design Tokens & Visual Architecture

A. Color Palette & Card Shell Tokens

Token Value Visual Function
Surface Background linear-gradient(165deg, #ffffff 0%, #fff7f9 100%) Subtle tactile rose-white executive gradient.
Accent Stripe (@hrl) #e05375 (border-left: 5px solid #e05375) Primary tactile boundary stripe on left edge.
Accent Stripe (@hrlcrimsonRED) #D1002D (border-left: 5px solid #D1002D) High-salience Crimson Red division boundary stripe.
Card Border 1px solid rgba(255, 182, 193, 0.45) Subtle translucent rose containment boundary.
Border Radius 20px (var(--radius-card)) Apple-caliber rounded geometry.
Box Shadow 0 16px 36px rgba(255, 182, 193, 0.14), 0 2px 8px rgba(0, 0, 0, 0.02) Tactile soft elevation.
Hover State transform: translateY(-4px); border-left-color: #D1002D; Tactile elevation with enriched drop shadow.

B. High-Quality Specular Glass Avatar Lens & Mirror Reflection

Every leader profile avatar features a multi-layer specular glass lens:

  1. Specular Conic Rim (::before):

    • Continuous $360^\circ$ metallic silver/chrome transition with zero blank spots: 
     background: conic-gradient(
   from 225deg,
   #ffffff 0deg, #cbd5e1 35deg, #64748b 70deg, #334155 120deg,
   #0f172a 160deg, #1e293b 200deg, #475569 230deg, #94a3b8 270deg,
   #e2e8f0 310deg, #ffffff 340deg, #ffffff 360deg
 );
 filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
  • Crimson variant for @hrlcrimsonRED transitioning from white to scarlet (#D1002D), deep garnet (#881337), and ruby highlights.
    1. Specular Glass Mirror Reflection (::after):
  • Dual-layered optical glare:
    • Upper $45^\circ$ Diagonal Lens Horizon Mirror Sheen: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.03) 48%, transparent 52%, rgba(255,255,255,0.04) 75%, rgba(255,255,255,0.16) 100%)
    • Top Radial Keylight Flare: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.15) 32%, transparent 65%)

  • Double-Lipped Beveled Glass Edge:

     box-shadow: 
   inset 0 2px 2.5px rgba(255, 255, 255, 0.95),
   inset 0 -2px 3px rgba(0, 0, 0, 0.55),
   inset 0 0 0 1px rgba(255, 255, 255, 0.25);

C. Background Watermark Monogram

  • Large translucent typography anchored at right: -15px; bottom: -15px; with: font-size: 88px; font-weight: 900; color: rgba(224, 83, 117, 0.05); line-height: 1; pointer-events: none; user-select: none;

3. Protocol for Adding a New Role in the Future

Whenever a new executive, founder, director, or operational manager joins HRL, follow this 5-Phase Onboarding Protocol:

Phase 1: Asset Intake

  1. Obtain an executive headshot or professional portrait.
  2. Crop/format the image to a 1:1 square ratio (minimum 800 × 800 px, ideal 1080 × 1080 px).
  3. Save the image into the HRL CORE COMPANY ROLE folder:
    • Filename convention: firstname-lastname.jpg (or .png / .jpeg)
    • Lowercase, hyphen-separated, zero spaces.
    • Example: HRL CORE COMPANY ROLE/alex-rivera.jpg

Phase 2: Role Metadata Specification

Prepare the following metadata attributes:

  • Full Legal / Corporate Name: e.g., Alex Rivera
  • Corporate Designation / Title: e.g., Chief Technology Officer (CTO)
  • Division Tag:
    • @hrl: Core sovereign software, AI research, cloud infrastructure, enterprise engineering.
    • @hrlcrimsonRED: Digital media broadcasting, Hollywood film promotions, creator acceleration, VFX.
  • Category Pill Tag: e.g., HRL Technology Directorate or HRL Creative Directorate
  • Strategic Role Scope (2–3 lines): Executive summary of domain ownership and operational mandate.
  • Watermark Monogram (2–3 characters): e.g., CTO, COO, DIR, VP, LEAD.

Phase 3: Symmetrical Grid Verification

Before publishing, ensure the total number of leaders maintains the Symmetrical Placing Principle:

  • Multiples of 2 or 3 items are required.
  • 6 cards = 2 rows of 3 (desktop) | 3 rows of 2 (tablet).
  • If adding 1 new role (making 7), pair it with a second role (making 8: 2×4 or 4×2) or reorganize into 2 balanced sections (e.g. Executive Board: 3 members; Operational Directorate: 4 members in 2×2).

Phase 4: Code Insertion (HTML Template)

Copy and paste the production template below into both leadership.html and leadership/index.html.

4. Production Card Code Template for New Roles

Standard Role Card (@hrl Division) 

<article class="tactile-identity-card">
  <!-- 1. Background Watermark Monogram -->
  <div class="card-watermark">[MONOGRAM]</div>

  <div>
    <!-- 2. Eyebrow Category Pill -->
    <div class="card-eyebrow-pill">
      <span class="pill-dot"></span>
      <span class="pill-text">[CATEGORY BADGE, e.g. HRL Technology Directorate]</span>
    </div>

    <!-- 3. Specular Glass Avatar Lens with Mirror Glare -->
    <div class="avatar-hero-container">
      <div class="avatar-wrapper">
        <img 
          src="HRL%20CORE%20COMPANY%20ROLE/[filename.jpg]" 
          alt="[Full Name] — [Title]" 
          class="avatar-img"
          loading="lazy"
          onerror="this.onerror=null; this.src='assets/hrl-company-avatar.png';"
        />
      </div>
    </div>

    <!-- 4. Identity & Scope Block -->
    <div class="card-title-group">
      <h2 class="card-main-title">[Full Name]</h2>
      <div class="card-accent-subhead">[Official Title, e.g. Chief Technology Officer (CTO)]</div>
      <p class="card-body-desc">
        [Concise 2-line strategic scope describing operational mandate and enterprise domain].
      </p>
      <div class="division-tag-row">
        <span class="division-pill division-pill-hrl">
          <span class="pill-dot"></span>
          @hrl
        </span>
      </div>
    </div>
  </div>

  <!-- 5. Signature Tactile Metadata Footer -->
  <div class="card-tactile-footer">
    <div class="card-footer-name">[FULL NAME IN UPPERCASE] (HRL)</div>
    <div class="card-footer-meta">[Official Corporate Title] · HRL International Private Limited</div>
  </div>
</article>
Enter fullscreen mode Exit fullscreen mode

Crimson Red Media Role Card (@hrlcrimsonRED Division) 

<article class="tactile-identity-card card-crimson">
  <!-- 1. Background Watermark Monogram -->
  <div class="card-watermark">[MONOGRAM]</div>

  <div>
    <!-- 2. Eyebrow Category Pill -->
    <div class="card-eyebrow-pill">
      <span class="pill-dot"></span>
      <span class="pill-text">[CATEGORY BADGE, e.g. HRL Crimson Red Media]</span>
    </div>

    <!-- 3. Specular Glass Avatar Lens (Crimson Conic Rim) -->
    <div class="avatar-hero-container">
      <div class="avatar-wrapper crimson-rim">
        <img 
          src="HRL%20CORE%20COMPANY%20ROLE/[filename.jpg]" 
          alt="[Full Name] — [Title]" 
          class="avatar-img"
          loading="lazy"
          onerror="this.onerror=null; this.src='assets/hrl-company-avatar.png';"
        />
      </div>
    </div>

    <!-- 4. Identity & Scope Block -->
    <div class="card-title-group">
      <h2 class="card-main-title">[Full Name]</h2>
      <div class="card-accent-subhead">[Official Title]</div>
      <p class="card-body-desc">
        [Concise 2-line strategic scope describing media engineering and broadcast production mandate].
      </p>
      <div class="division-tag-row">
        <span class="division-pill division-pill-crimson">
          <span class="pill-dot"></span>
          @hrlcrimsonRED
        </span>
      </div>
    </div>
  </div>

  <!-- 5. Signature Tactile Metadata Footer -->
  <div class="card-tactile-footer">
    <div class="card-footer-name">[FULL NAME IN UPPERCASE] (HRL)</div>
    <div class="card-footer-meta">[Official Corporate Title] · HRL Crimson Red Media</div>
  </div>
</article>
Enter fullscreen mode Exit fullscreen mode

Note for leadership/index.html: Always prepend ../ to relative asset and page links (e.g. ../HRL%20CORE%20COMPANY%20ROLE/[filename.jpg], ../assets/..., ../index.html).

5. Automated Verification Checklist

After editing the files, run the automated test suite:

python3 test_leadership_page.py
Enter fullscreen mode Exit fullscreen mode

The test runner will deterministically verify:

  1. All referenced avatar images exist on disk and are non-empty.
  2. Zero decorative emojis in HTML/CSS/JS (100% compliance).
  3. Company motto presence and exact phrasing.
  4. Correct division tags (@hrl or @hrlcrimsonRED).
  5. Zero main page regressions (git diff index.html limited strictly to clean nav/footer links).

6. Current Verified Roster (Reference Baseline)

Member Title Division Image File Watermark
Sheikh Mohammed Raees Chief Executive Officer (CEO) @hrl sheikh-mohammed-raees.jpg CEO
Sanjana Co-Founder @hrl sanjana.png CO
Apoorvi Vijay Chief Executive Officer (CEO) @hrlcrimsonRED apoorvi-vijay.jpg CRM
Nishwin REA @hrl nishwin.jpeg REA
Shubhada Naik Business Consultant @hrl shubhada-naik.jpg BIZ
Jia Shetty Core Community Manager @hrl jia-shetty.jpeg CM

Maintained by: HRL International Private Limited Corporate Systems Directorate

Author & Inventor: Pavan Kumar Sadashiv (hrlpavan)

Top comments (0)