Vuetify is the Material Design framework for Vue, with v-prefixed components spanning app bars to data tables. Primary blue (#1867C0) pairs with #5CBBF6 info and #4CAF50 success, Roboto sets 0.875rem body with letter-spaced buttons, and a 12-point spacing scale on a 4px base with elevation levels 0–24 gives precise density control. Made for Vue teams that want standards without a designer.
VuetifyFramework
Prompt Template
Base Template
Design a Vuetify-inspired interface. - Material Design for Vue with v-prefixed components; - #1867C0 primary, #5CBBF6 info, #4CAF50 success; - Roboto with 0.875rem body and letter-spacing on buttons; - 12-point spacing scale (4px base), elevation 0-24 shadows; - Data tables, v-cards, and app bars with precise density control. Colors: #1867C0, #5CBBF6, #FFFFFF, #1E1E1E with #1867C0 accent. Typography: Roboto.
Variant Prompts
📱 Mobile
Design a mobile app with Vuetify aesthetics. Use Vuetify color identity with #1867C0 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Vuetify style. Use Vuetify color identity with #1867C0 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Vuetify design language. Use Vuetify color identity with #1867C0 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Vuetify visual identity. Use Vuetify color identity with #1867C0 accents. Compelling, conversion-focused.
Usage Examples
Vuetify Data Dashboard
DashboardBuild a dashboard with Vuetify style: v-data-table, navigation drawer, stat cards, and #1867C0 accent color.
Vuetify Admin App
WebCreate an admin application with Vuetify design language: app bar, v-navigation-drawer, forms, and Material elevation.
✅ Best For
- Vue
- Material Design apps
- Data-heavy admin
❌ Avoid For
- React tech stack projects
- Non-Material distinctive visuals
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.