Vuetify Design System

# Vuetify — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: high
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/vuetify
sources:
  - https://vuetifyjs.com/
  - https://vuetifyjs.com/en/features/theme/
  - https://github.com/vuetifyjs/vuetify
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Vuetify Team. "Vuetify" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Vuetify
**Owner:** Vuetify Team
**Official documentation:** https://vuetifyjs.com/
**Visual character:** Material's grammar translated to Vue: Roboto ramps, elevation stacks, and a theme engine the community bends to anything.

---

## Summary

Material Design Component Framework for Vue.js with over 100 components.

_Editorial confidence: high. Values are drawn from well-documented public token references. Field-level evidence: 0/75 claims source-linked, 0/75 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=vuetify)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary / Blue | `#1867c0` | `--v-theme-primary` | Primary actions (default theme) |
| Secondary | `#48a9a6` | `--v-theme-secondary` | Secondary accent |
| Surface | `#ffffff` | `--v-theme-surface` | Component surfaces |
| Background | `#ffffff` | `--v-theme-background` | Page background |
| Error | `#b00020` | `--v-theme-error` | Errors |
| Success | `#4caf50` | `--v-theme-success` | Success |
| Warning | `#fb8c00` | `--v-theme-warning` | Warnings |
| Info | `#2196f3` | `--v-theme-info` | Informational |

## Typography

- **Body:** Roboto — weights 300, 400, 500, 700 — `Roboto, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `96px` | `112px` |
| h3 | `48px` | `56px` |
| h5 | `24px` | `32px` |
| body-1 | `16px` | `24px` |
| body-2 | `14px` | `20px` |
| caption | `12px` | `20px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| sm | `2px` |
| default | `4px` |
| lg | `8px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| elevation-2 | `0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)` |

## Motion

| Name | Value |
| --- | --- |
| standard | `280ms cubic-bezier(0.4, 0, 0.2, 1)` |

## Quick start (CSS)

```css
/* Vuetify — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://vuetifyjs.com/
   Field evidence: https://www.designsystems.one/api/style-spec?system=vuetify */

:root {
  /* Color */
  --v-theme-primary: #1867c0; /* Primary actions (default theme) */
  --v-theme-secondary: #48a9a6; /* Secondary accent */
  --v-theme-surface: #ffffff; /* Component surfaces */
  --v-theme-background: #ffffff; /* Page background */
  --v-theme-error: #b00020; /* Errors */
  --v-theme-success: #4caf50; /* Success */
  --v-theme-warning: #fb8c00; /* Warnings */
  --v-theme-info: #2196f3; /* Informational */

  /* Typography */
  --font-body: Roboto, sans-serif;

  /* Type scale */
  --text-h1: 96px; /* line-height 112px */
  --text-h3: 48px; /* line-height 56px */
  --text-h5: 24px; /* line-height 32px */
  --text-body-1: 16px; /* line-height 24px */
  --text-body-2: 14px; /* line-height 20px */
  --text-caption: 12px; /* line-height 20px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-sm: 2px;
  --radius-default: 4px;
  --radius-lg: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-elevation-2: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);

  /* Motion */
  --motion-standard: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
```

## Engineering profile

- **Ships for:** Vue
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Vuetify by Vuetify Team — Material Design Component Framework for Vue.js with over 100 components. Character: Material's grammar translated to Vue: Roboto ramps, elevation stacks, and a theme engine the community bends to anything. Use a primary colour near #1867c0, the typeface "Roboto" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Vuetify documentation](https://vuetifyjs.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/vuetify) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._