---
name: meridian-design-system
description: Canonical reference and token guidelines for the Meridian Claude Design System across the mishrashardendu22 product ecosystem.
---

# Meridian Design System — Claude Edition

The shared visual language for the MishraShardendu22 product ecosystem:
- **`ms22`**: Personal Portfolio Website
- **`github-backup-automation-system/frontend`**: GitHub Backup Operations & Telemetry
- **`repo-transfer-automation-system/frontend`**: Repository Migration & Automation
- **`agentic-google-workspace-orchestrator/frontend`**: Multi-Service DAG Execution & Chat
- **`mishrashardendu`**: Admin Console & Engineering Notes Blog

## Design Tenets

1. **Warm Ink on Paper**: Background is `#141413` (warm dark ink) with warm ivory text `#faf9f5`. Avoid OLED black (`#000000`) and cold zinc.
2. **Claude Terracotta**: Primary brand accent is `#d97757` (hover: `#e28b6d`), wash `rgba(217, 119, 87, 0.12)`, edge `rgba(217, 119, 87, 0.35)`.
3. **Editorial Typography**:
   - Headings: `Instrument Serif` with single italic keyword emphasis (`<em>Keyword</em>`).
   - Body: `Inter` / `IBM Plex Sans` (`1.6` line height).
   - Monospace: `IBM Plex Mono` for kickers, metric readouts, and telemetry.
4. **Hairline Precision**: 1px borders (`#343431`) carry structure; avoid heavy drop shadows.