Design Tokens With Quasar: A Practical Theme Strategy

Design Tokens With Quasar: A Practical Theme Strategy

Design tokens are a clean way to keep your UI consistent across features and teams. Quasar already supports theming, so you can layer tokens without extra tooling.

Start With Brand Colors

Map your core colors to Quasar's theme keys:

			// assets/quasar-variables.scss
$primary: #0ea5e9;
$secondary: #0f172a;
$accent: #22c55e;

$positive: #22c55e;
$negative: #ef4444;
$warning: #f59e0b;
$info: #38bdf8;

		

• primary, secondary, accent
• positive, negative, warning, info

Create a small palette first, then extend to shades when needed.

Typography Tokens

Define font families and standard sizes once. Use those tokens in your Quasar typography classes or in your SCSS variables file.

A simple approach:

• One font for headings
• One font for body
• A consistent scale for h1 to h6

Spacing and Radius

Create a spacing scale that matches your product's rhythm. Quasar's utility classes can map nicely to a 4px or 8px system.

Radius is often overlooked. Decide on 2 to 3 radius sizes and use them consistently for cards, inputs, and buttons.

Practical Workflow

• Store tokens in SCSS variables
• Wire them into Quasar's theme config
• Document the tokens in your design guide

Summary

Quasar makes it easy to enforce a token system. Start small, define your core brand tokens, and let them scale with your UI.