dragoon0x 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-scanreads the codebase, builds .meridian.json - Score —
/m-scoreruns the 8-axis analysis - Fix — Tier-specific commands address issues
- Verify —
/m-driftchecks for regression - Certify —
/m-certifyfor 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.