Immutable. This exact content is served forever at /api/v1/blob/367acea859e9914a.
--- 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. 5. **Anchored Interaction (Zero Hover Levitation)**: - Elements must NEVER move up on hover (`translateY`, `hover:-translate-y-*`, float, or bounce). - Interactive cards, buttons, metrics, and links must remain physically grounded and stationary in the DOM. - Hover feedback must strictly rely on hairline border color shifts, surface overlays (`var(--surface-overlay)`), or subtle opacity transitions.