material-kit-design/conformity.md

MK Design System — Conformity Checklist

How to Use

Provide this file plus the code to review to Claude with this prompt: "Review the following code against the conformity checklist below. For each rule, output PASS or FAIL with a specific code callout. Then provide a conformity score."

Rules

Visual Token Conformity

• C-V1: Colors use semantic Tailwind classes (bg-primary, text-success, border-danger) — no raw hex values in HTML class attributes or :class bindings
• C-V2: No hardcoded hex in inline :style attributes or @layer CSS rules; use var(--color-*) or Tailwind classes instead
• C-V3: Spacing uses Tailwind scale classes (mt-4, px-6, py-16) — no inline style="margin: ..." or style="padding: ..."
• C-V4: Shadows use shadow-soft-* or shadow-{color} utilities — no custom box-shadow values in class attributes
• C-V5: Border radius uses rounded-* utilities (rounded-lg, rounded-2xl, rounded-full) — no inline border-radius style values

Component Conformity

• C-C1: All buttons use MkButton component or the manual gradient pattern (bg-gradient-{color} shadow-{color} text-white rounded-lg px-6 py-2.5); dark-section buttons use color="white"; icon-only buttons are square with p-2
• C-C2: Cards follow rounded-2xl bg-white shadow-soft-md base; card image headers use -mt-6 mx-4 overflow-hidden rounded-xl floating pattern; interactive cards use move-on-hover
• C-C3: Form inputs use MkInput with v-model; raw <input> elements (if used) must have rounded-lg border border-gray-200 px-3 py-2 focus:border-primary focus:ring-1 focus:ring-primary
• C-C4: Navigation uses MkNavbar with navItems prop; custom navbars must replicate scroll-blur behavior (bg-white/90 backdrop-blur-sm) and responsive collapse
• C-C5: Alerts use MkAlert component or rounded-lg px-4 py-3 text-sm bg-{color} text-white — no plain unstyled <div role="alert">

Layout Conformity

• C-L1: Marketing pages use max-w-7xl mx-auto px-4 as the page container — not full-bleed or custom max-width values
• C-L2: Responsive breakpoints use Tailwind prefixes (sm:, md:, lg:, xl:) — no CSS media queries in <style> blocks unless unavoidable
• C-L3: Content grids use grid gap-6 with grid-cols-{n} and responsive column modifiers — not flex flex-wrap with manual width percentages
• C-L4: Flex layouts use Tailwind utilities (flex, items-center, justify-between, gap-4) — no display: flex in inline styles

Naming Conformity

• C-N1: CSS custom properties follow the @theme naming convention: --color-*, --shadow-*, --radius-*, --font-*, --background-image-*
• C-N2: No Bootstrap class names present (.container, .row, .col-*, .btn, .badge, .card, .navbar, .form-control, etc.)
• C-N3: Vue components use PascalCase with Mk prefix (MkButton, MkNavbar, MkDefaultCounterCard); custom utility classes use kebab-case (move-on-hover, text-gradient)

Scoring Guide

• 15–17 rules pass → Fully conformant — ready for production
• 12–14 rules pass → Mostly conformant — minor cleanup needed
• 8–11 rules pass → Partially conformant — significant drift, review required
• Below 8 → Non-conformant — major rework needed before shipping