Agent Skills/meridian-design-system
UI Design & Engineering StandardsSKILL.md

meridian-design-system

Canonical reference and token guidelines for the Meridian Claude Design System across the mishrashardendu22 product ecosystem.

skills-sync CLIGitHubRaw
Install via CLI:skills-sync pull meridian-design-system

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

  • **Warm Ink on Paper**: Background is `#141413` (warm dark ink) with warm ivory text `#faf9f5`. Avoid OLED black (`#000000`) and cold zinc.
  • **Claude Terracotta**: Primary brand accent is `#d97757` (hover: `#e28b6d`), wash `rgba(217, 119, 87, 0.12)`, edge `rgba(217, 119, 87, 0.35)`.
  • **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.

  • **Hairline Precision**: 1px borders (`#343431`) carry structure; avoid heavy drop shadows.
  • **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.