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:

{
  "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

Scan — /m-scan reads the codebase, builds .meridian.json
Score — /m-score runs the 8-axis analysis
Fix — Tier-specific commands address issues
Verify — /m-drift checks for regression
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.

meridian-design