# Meridian Design

> Design DNA engine that learns your codebase before making recommendations. Maps 8 design axes (typography, color, layout, motion, accessibility, tokens, hierarchy, personality), builds a project-aware profile in .meridian.json, and enforces your established aesthetic. 62 commands across 5 tiers. Every command respects what you've already built. Use on any frontend project to prevent AI slop while preserving design intent.

- Skill: `dragoon0x/meridian-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/meridian-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/meridian-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/meridian-design

---


# MERIDIAN — Design DNA Engine

MERIDIAN is project-aware. It reads your codebase first, builds a design profile, then works within your aesthetic. It doesn't impose generic rules — it discovers your rules and enforces them.

## The Eight Axes

Every design decision maps to one of eight measurable axes:

### 1. Typography (15%)
Font choice quality (14-font banlist), type scale ratio consistency, hierarchy depth (distinct size count), line-height presence, letter-spacing intentionality, font weight variety (2-4 ideal).

### 2. Color (15%)
Palette coherence, WCAG contrast ratios (AA minimum), anti-pattern detection (purple gradients, pure black), dark mode support, palette size (3-12 intentional colors), CSS variable usage.

### 3. Layout (15%)
Grid/flexbox adoption, 4px spacing grid alignment, max-width constraints, responsive breakpoints, gap property, nesting depth (max 4), anti-patterns (nested cards).

### 4. Motion (8%)
Starts at 50. Earns: transitions (+15), custom cubic-bezier (+10), keyframes (+15), transforms (+10), prefers-reduced-motion (+10). Loses: motion without a11y fallback (-10), layout property animation (-10).

### 5. Accessibility (12%)
:focus-visible styles, semantic HTML landmarks, ARIA attributes, 44x44px touch targets, skip links, prefers-reduced-motion. Harshest penalty: outline:none without replacement (-20).

### 6. Tokens (15%)
CSS custom property adoption rate. var(--name) usage divided by total design values. Fully tokenized = 100. Zero variables = 0. Measures system maintainability.

### 7. Hierarchy (10%)
Visual depth — distinct size levels, weight differentiation, size ratio (largest/smallest), heading progression, subheading/caption/overline presence.

### 8. Personality (10%)
Anti-slop distance. How far from AI defaults? Banned fonts = 0. Unusual fonts = high. Purple gradient = 0. Intentional palette = high. Rewards: backdrop-filter, clip-path, mix-blend-mode, conic-gradient, scroll-snap, @supports, writing-mode.

## The .meridian.json Profile

Running `/m-scan` creates `.meridian.json`:

```json
{
  "dna": {
    "typography": 78, "color": 82, "layout": 90, "motion": 55,
    "accessibility": 68, "tokens": 84, "hierarchy": 72, "personality": 88
  },
  "fonts": ["Outfit", "DM Sans"],
  "palette": ["#e8590c", "#1a1a1a", "#fafafa"],
  "spacingBase": 4,
  "typeRatio": 1.25,
  "hash": "M-3F7A2D"
}
```

The hash is a 6-character fingerprint derived from the 8-axis scores. Same design decisions = same hash.

## Five Tiers

### Tier 1 — Foundation (12 commands)
Tokens, scales, grids. The structural base.

### Tier 2 — Composition (11 commands)
Layout relationships. Spacing rhythm, alignment, hierarchy, flow.

### Tier 3 — Expression (14 commands)
Typography, color, motion. What makes the design distinctive.

### Tier 4 — Polish (13 commands)
Accessibility, performance, edge cases. Production readiness.

### Tier 5 — DNA (12 commands)
Project-aware intelligence. Profile, drift detection, enforcement, export.

## Font Banlist
Inter, Roboto, Arial, Helvetica, system-ui, -apple-system, Open Sans, Lato, Montserrat, Poppins, Nunito, Space Grotesk, Raleway, Source Sans Pro

## Anti-Pattern Registry

| Pattern | Axis | Deduction |
|---------|------|-----------|
| Banned font | Typography, Personality | -25, -30 |
| Purple gradient | Color, Personality | -30, -25 |
| Nested cards | Layout, Personality | -20, -15 |
| No CSS variables | Color, Tokens | -15, -100 |
| outline:none | Accessibility | -20 |
| No media queries | Layout | -15 |
| Pure black text | Color | -5 |
| Off-grid spacing | Layout | -3 each |
| Single font weight | Typography, Hierarchy | -10, -10 |

## Execution Protocol

1. **Scan** — `/m-scan` reads the codebase, builds .meridian.json
2. **Score** — `/m-score` runs the 8-axis analysis
3. **Fix** — Tier-specific commands address issues
4. **Verify** — `/m-drift` checks for regression
5. **Certify** — `/m-certify` for CI/CD pass/fail

The AI must read .meridian.json before writing any CSS. If the profile shows the project uses Instrument Serif, the AI must not suggest replacing it. If spacing is on an 8px grid, the AI must maintain it. MERIDIAN works WITH the existing design, not against it.