---
description: Official Brand Identity, Vector Marks, Content Creation Suite, and Press Kit for Sunil Sharma (mrxsierra).
---

# Brand Identity & Press Kit

<div class="page-intro">
  <div class="page-intro-header">
    <h2 class="page-intro-title">Brand Standards &amp; Content Creation Suite</h2>
    <a href="../assets/brand/mrxsierra-brand-press-kit.zip" download class="btn btn-primary">
      <i class="fas fa-file-zipper"></i> Download Master Press Kit (.ZIP)
    </a>
  </div>
  <p class="page-intro-desc">
    Canonical vector marks, video watermarks, presentation templates, cross-platform social assets, and media bio copy for <strong>Sunil Sharma (@mrxsierra)</strong>.
  </p>
</div>

## 1. Core Brand Marks &amp; Logotypes

Our visual identity is built on a **Geometric Constructivist "S"** mark, combining mathematical circular geometry, normalized optical balance, and pure structural clarity.

<div class="card-grid-2">

  <div class="clean-card">
    <div class="project-card-header">
      <span class="project-category-badge">Primary Mark (Dark)</span>
    </div>
    <div class="brand-asset-preview-dark">
      <img src="../assets/brand/monogram-dark.svg" alt="Monogram Dark" class="brand-asset-img-square" />
    </div>
    <h3 class="project-card-title">Obsidian Monogram</h3>
    <p class="project-card-desc">Master vector mark for dark surfaces, app icons, favicons, and header branding.</p>
    <a href="../assets/brand/monogram-dark.svg" download class="card-footer-link">
      <i class="fas fa-download"></i> Download SVG
    </a>
  </div>

  <div class="clean-card">
    <div class="project-card-header">
      <span class="project-category-badge">Secondary Mark (Light)</span>
    </div>
    <div class="brand-asset-preview-light">
      <img src="../assets/brand/monogram-light.svg" alt="Monogram Light" class="brand-asset-img-square" />
    </div>
    <h3 class="project-card-title">Light Canvas Monogram</h3>
    <p class="project-card-desc">High-contrast mark for white documents, PDF reports, and light background media.</p>
    <a href="../assets/brand/monogram-light.svg" download class="card-footer-link">
      <i class="fas fa-download"></i> Download SVG
    </a>
  </div>

  <div class="clean-card">
    <div class="project-card-header">
      <span class="project-category-badge">Horizontal Lockup</span>
    </div>
    <div class="brand-asset-preview-dark">
      <img src="../assets/brand/logo-horizontal.svg" alt="Horizontal Logotype" class="brand-asset-img-h" />
    </div>
    <h3 class="project-card-title">Horizontal Logotype</h3>
    <p class="project-card-desc">Full brand lockup for documentation headers, partner portfolios, and sponsorships.</p>
    <a href="../assets/brand/logo-horizontal.svg" download class="card-footer-link">
      <i class="fas fa-download"></i> Download SVG
    </a>
  </div>

  <div class="clean-card">
    <div class="project-card-header">
      <span class="project-category-badge">Transparent Watermark</span>
    </div>
    <div class="brand-asset-preview-dark-alt">
      <img src="../assets/brand/monogram-transparent.svg" alt="Transparent Monogram" class="brand-asset-img-square" />
    </div>
    <h3 class="project-card-title">Transparent Glyph</h3>
    <p class="project-card-desc">Isolated white glyph with zero background for video overlays, code stamps, and watermarks.</p>
    <a href="../assets/brand/monogram-transparent.svg" download class="card-footer-link">
      <i class="fas fa-download"></i> Download SVG
    </a>
  </div>

</div>

## 2. Video &amp; Multimedia Creation Kit

Broadcast-ready graphics for YouTube tutorials, coding screencasts, webinars, and live streams:

| Asset | Format | Resolution | Description | Download |
| :--- | :--- | :--- | :--- | :--- |
| **YouTube Watermark** | PNG (Transparent) | 150×150 | Official bottom-right in-video branding watermark. | [Download PNG](../assets/brand/video/watermark-150x150.png) |
| **Broadcast Lower Third** | SVG (Transparent) | 1920×1080 | Speaker overlay for video talks and webinars. | [Download SVG](../assets/brand/video/lower-third.svg) |
| **Video End Screen / Outro** | SVG | 1920×1080 | YouTube 16:9 outro card with card placeholders. | [Download SVG](../assets/brand/video/video-end-screen.svg) |
| **Thumbnail Frame Template** | SVG | 1280×720 | 16:9 YouTube video thumbnail template with badge. | [Download SVG](../assets/brand/video/thumbnail-frame.svg) |

## 3. Social Media &amp; Publication Suite

High-resolution header covers and document carousel templates:

<div class="card-grid-2">

  <div class="clean-card">
    <div class="project-card-header">
      <span class="project-category-badge">GitHub Profile</span>
    </div>
    <h3 class="project-card-title">GitHub Header Banner</h3>
    <p class="project-card-desc">1280×640px hero banner for GitHub profile READMEs and repository organization headers.</p>
    <a href="../assets/brand/banners/github-banner.svg" download class="card-footer-link">
      <i class="fas fa-download"></i> Download SVG
    </a>
  </div>

  <div class="clean-card">
    <div class="project-card-header">
      <span class="project-category-badge">LinkedIn Cover</span>
    </div>
    <h3 class="project-card-title">LinkedIn Profile Banner</h3>
    <p class="project-card-desc">1584×396px cover banner optimized for LinkedIn avatar clearance and desktop/mobile responsiveness.</p>
    <a href="../assets/brand/banners/linkedin-banner.svg" download class="card-footer-link">
      <i class="fas fa-download"></i> Download SVG
    </a>
  </div>

  <div class="clean-card">
    <div class="project-card-header">
      <span class="project-category-badge">X (Twitter) Header</span>
    </div>
    <h3 class="project-card-title">X Profile Header</h3>
    <p class="project-card-desc">1500×500px minimalist header with engineering disciplines and website domain.</p>
    <a href="../assets/brand/banners/x-twitter-banner.svg" download class="card-footer-link">
      <i class="fas fa-download"></i> Download SVG
    </a>
  </div>

  <div class="clean-card">
    <div class="project-card-header">
      <span class="project-category-badge">YouTube Channel</span>
    </div>
    <h3 class="project-card-title">YouTube Channel Banner</h3>
    <p class="project-card-desc">2560×1440px master banner with centered multi-device safe zone.</p>
    <a href="../assets/brand/banners/youtube-banner.svg" download class="card-footer-link">
      <i class="fas fa-download"></i> Download SVG
    </a>
  </div>

</div>

## 4. Standard Media Bios &amp; Speaker Copy

=== "One-Liner (Social & Short Bios)"
    ```text
    Sunil Sharma (mrxsierra) is a Full-Stack Web Architect and Machine Learning Systems Engineer.
    ```

=== "Short Bio (50 Words)"
    ```text
    Sunil Sharma is a Full-Stack Systems Engineer and ML Specialist based in India. He builds robust multi-RDBMS data platforms, autonomous AI agent pipelines, and high-throughput automation tooling with Python, PostgreSQL, and modern web frameworks.
    ```

=== "Full Bio (100 Words)"
    ```text
    Sunil Sharma (mrxsierra) is a software engineer specializing in autonomous agent workflows, machine learning pipelines, and distributed relational database architectures. A national finalist in the GSTN Predictive Binary Classification hackathon, Sunil designs production-grade software with rigorous pytest test suites, cross-engine SQL parity, and zero-downtime CI/CD automation. He publishes technical architecture guides and open-source tooling for the global developer ecosystem.
    ```

## 5. Design System Tokens &amp; Color Palette

| Token Name | HEX Code | OKLCH Value | Role |
| :--- | :--- | :--- | :--- |
| `--color-obsidian` | `#08090D` | `oklch(0.12 0.01 260)` | Primary Canvas &amp; Background |
| `--color-accent` | `#6366F1` | `oklch(0.58 0.23 277)` | Electric Indigo (Primary Accent) |
| `--color-accent-light`| `#818CF8` | `oklch(0.68 0.19 277)` | Highlight &amp; Focus Indicators |
| `--color-surface` | `#18181B` | `oklch(0.21 0.01 260)` | Card Surface &amp; Elevated UI |
| `--color-text` | `#FFFFFF` | `oklch(0.99 0.00 0)` | Primary Optical Text |
| `--color-text-muted` | `#94A3B8` | `oklch(0.70 0.03 250)` | Secondary Metadata &amp; Subtitles |

## 6. Brand Usage Guidelines

- **Clear Space**: Always maintain clear space equal to at least 25% of the monogram width around the mark.
- **Minimum Size**: Do not render the vector monogram below `16×16px` on digital screens or `5mm` in print.
- **Color Integrity**: Never apply unauthorized drop shadows, skewed distortions, or unapproved multi-color gradients to the monogram glyph.