MK Design System

A Vue 3 + Tailwind CSS v4 design system derived from Creative Tim's Vue Material Kit 2. Built to be handed off to another Claude instance for consistent UI work across projects.

30+ components · Design tokens in CSS · Roboto variable font · Material Icons Round

---

Using in your project

Option A — Copy components (simplest)

1. Copy src/components/, src/composables/, and src/style.css into your project.

2. Ensure your project has Tailwind CSS v4 with @tailwindcss/vite. Your style.css must contain the @import "tailwindcss" line and the full @theme block from this project's src/style.css.

3. Get the font files (4 woff2 files — see Fonts below) and place them in public/fonts/.

4. Import components directly:

   import MkButton from '@/components/MkButton.vue'
   import MkInput  from '@/components/MkInput.vue'
   

Option B — Build as a library

pnpm build:lib

This outputs dist/mk-design-system.es.js, dist/mk-design-system.cjs.js, and dist/style.css.

In the consuming project:

// main.js — global registration
import { MkDesignSystem } from './mk-design-system.es.js'
import './mk-design-system.css'  // design tokens + @font-face
app.use(MkDesignSystem)

Or import components individually:

import { MkButton, MkInput, MkNavbar } from './mk-design-system.es.js'

---

Development

pnpm install
pnpm dev        # dashboard + showcase at localhost:5173
pnpm build      # production app build → dist/
pnpm build:lib  # library build → dist/mk-design-system.*

---

Fonts

Place these woff2 files in public/fonts/ before running the dev server:

public/fonts/roboto/
  Roboto-VariableFont_wdth-wght.woff2
  Roboto-Italic-VariableFont_wdth-wght.woff2

public/fonts/roboto-slab/
  RobotoSlab-VariableFont_wght.woff2

public/fonts/material-icons-round/
  material-icons-round-latin-400-normal.woff2

Download script (run from /app):

# Roboto (official Google Fonts variable build)
curl -L "https://github.com/google/fonts/raw/main/apache/roboto/Roboto%5Bwdth%2Cwght%5D.ttf" \
     -o public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2

# Material Icons Round
curl -L "https://cdn.jsdelivr.net/npm/@fontsource/material-icons-round@5/files/material-icons-round-latin-400-normal.woff2" \
     -o public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2

---

Design reference

File	Purpose
design-system.md	Token reference, component patterns, 12 quick-start rules
conformity.md	17-rule checklist — feed this + generated code to Claude to score conformity
tokens.json	Machine-readable design token values
src/style.css	Live source of truth — @theme block defines all tokens

---

For Claude

When starting a new project using this design system, provide Claude with:

1. design-system.md — the rules to follow
2. conformity.md — to score and verify generated code
3. The component list from src/index.js — so it knows what's available

Prompt template:

"Use the MK Design System (design-system.md attached). Available components are listed in src/index.js. Build [feature]. After generating, score it against conformity.md."

---

Notes

• MkSocialButton renders Font Awesome brand icons (fab fa-*). Load Font Awesome Free 6 externally if social icons are needed.
• MkRotatingCard requires its parent to set an explicit height (e.g. style="height: 22rem").
• MkNavbar scroll-blur is automatic in transparent mode — no JS required.