Aura Design Tokens

Synchronizes color palettes, surface depths, and border radii across PrimeVue components, Quasar shells, and custom CSS. No Tailwind utility classes.

@taste-penpot may name a brand direction. Record the resulting roles here. Do not invent a second palette in a component.

When the agent activates this skill

• Adding or changing color, surface, border, radius, or dark mode.
• Bridging PrimeVue Aura tokens (--p-*) to Quasar (--q-*) and app roles (--app-*).
• Replacing raw hex or inline color in Vue or CSS.

Token bridge

Add this to the primary stylesheet (src/assets/design-tokens.css) and import it after the PrimeVue setup in src/main.js.