Skip to main content
The Design System Dashboard uses a comprehensive color system built on semantic tokens and brand colors that integrate seamlessly with Nuxt UI and Tailwind CSS.

​
Semantic Colors

Semantic colors provide consistent meaning across your application. They are configured in app.config.ts and map to specific brand colors: 
colors: {
  primary: 'brand-blue',
  secondary: 'brand-purple',
  accent: 'brand-yellow',
  success: 'brand-green',
  warning: 'brand-orange',
  error: 'brand-red',
  info: 'brand-blue-sky',
  neutral: 'brand-grey',
}

​
Usage in Components

Semantic colors are used throughout the component system: 
<template>
  <UButton color="primary">Primary Action</UButton>
  <UButton color="secondary">Secondary Action</UButton>
  <UButton color="success">Success</UButton>
  <UButton color="error">Delete</UButton>
</template>

​
Brand Color Palette

Each brand color includes shades from 50 to 950, providing flexibility for different UI states and themes.

​
Brand Blue (Primary)

--color-brand-blue-50: #ebf5ff;
--color-brand-blue-100: #e1effe;
--color-brand-blue-200: #c4defd;
--color-brand-blue-300: #a4cafe;
--color-brand-blue-400: #75a8fa;
--color-brand-blue-500: #3f83f8;
--color-brand-blue-600: #1c64f2;
--color-brand-blue-700: #1a57db;
--color-brand-blue-800: #1e439f;
--color-brand-blue-900: #233876;
--color-brand-blue-950: #1c044f;

​
Brand Purple (Secondary)

--color-brand-purple-50: #f5f4ff;
--color-brand-purple-100: #edebfd;
--color-brand-purple-200: #dcd7fd;
--color-brand-purple-300: #cabefd;
--color-brand-purple-400: #ab93f9;
--color-brand-purple-500: #9161f9;
--color-brand-purple-600: #7d3af2;
--color-brand-purple-700: #6a2ad9;
--color-brand-purple-800: #5421b4;
--color-brand-purple-900: #491c95;
--color-brand-purple-950: #401d7b;

​
Brand Yellow (Accent)

--color-brand-yellow-50: #fcfce7;
--color-brand-yellow-100: #fdf5b4;
--color-brand-yellow-200: #fbe869;
--color-brand-yellow-300: #fac814;
--color-brand-yellow-400: #e2a008;
--color-brand-yellow-500: #c37902;
--color-brand-yellow-600: #9e560a;
--color-brand-yellow-700: #8e4a0f;
--color-brand-yellow-800: #713a13;
--color-brand-yellow-900: #633112;
--color-brand-yellow-950: #401b06;

​
Brand Green (Success)

--color-brand-green-50: #f4faf7;
--color-brand-green-100: #def7ec;
--color-brand-green-200: #bcefda;
--color-brand-green-300: #83e1bb;
--color-brand-green-400: #30c38d;
--color-brand-green-500: #0d9f6e;
--color-brand-green-600: #057a55;
--color-brand-green-700: #036c4e;
--color-brand-green-800: #03533e;
--color-brand-green-900: #014636;
--color-brand-green-950: #002d23;

​
Brand Orange (Warning)

--color-brand-orange-50: #fff7ef;
--color-brand-orange-100: #fdecdc;
--color-brand-orange-200: #fbd8ba;
--color-brand-orange-300: #fdb88b;
--color-brand-orange-400: #fe8a4c;
--color-brand-orange-500: #ff5a1e;
--color-brand-orange-600: #d03801;
--color-brand-orange-700: #b43502;
--color-brand-orange-800: #8b2c0d;
--color-brand-orange-900: #771c1c;
--color-brand-orange-950: #641a1a;

​
Brand Red (Error)

--color-brand-red-50: #fcf1f1;
--color-brand-red-100: #fce7e7;
--color-brand-red-200: #fbd5d5;
--color-brand-red-300: #f8b4b4;
--color-brand-red-400: #f98080;
--color-brand-red-500: #ef5151;
--color-brand-red-600: #df2424;
--color-brand-red-700: #c71d1d;
--color-brand-red-800: #9b1c1c;
--color-brand-red-900: #771c1c;
--color-brand-red-950: #410a0a;

​
Brand Blue Sky (Info)

--color-brand-blue-sky-50: #eaf4ff;
--color-brand-blue-sky-100: #e1effe;
--color-brand-blue-sky-200: #c3ddfd;
--color-brand-blue-sky-300: #a4c9fe;
--color-brand-blue-sky-400: #75a8fa;
--color-brand-blue-sky-500: #3f82f8;
--color-brand-blue-sky-600: #1c63f1;
--color-brand-blue-sky-700: #1956db;
--color-brand-blue-sky-800: #1e429e;
--color-brand-blue-sky-900: #233775;
--color-brand-blue-sky-950: #1b274f;

​
Brand Grey (Neutral)

--color-brand-grey-0: #ffffff;
--color-brand-grey-50: #f9fafb;
--color-brand-grey-100: #f3f4f6;
--color-brand-grey-200: #e5e7eb;
--color-brand-grey-300: #d1d5db;
--color-brand-grey-400: #9ca3b0;
--color-brand-grey-500: #6b7280;
--color-brand-grey-600: #4b5563;
--color-brand-grey-700: #384252;
--color-brand-grey-800: #1f2a37;
--color-brand-grey-900: #111927;
--color-brand-grey-950: #0b121e;
--color-brand-grey-1000: #000;

​
Color Definition Location

All brand colors are defined in app/assets/css/settings/colors.css using Tailwind’s @theme static directive: 
@theme static {
  --color-brand-blue-50: #ebf5ff;
  --color-brand-blue-100: #e1effe;
  /* ... more shades ... */
}

​
Using Colors in Tailwind

Brand colors are automatically available as Tailwind utilities: 
<template>
  <div class="bg-brand-blue-500 text-white">
    Using brand blue
  </div>
  
  <div class="bg-primary text-white">
    Using semantic primary color
  </div>
  
  <div class="border-2 border-brand-purple-600">
    Purple border
  </div>
</template>

​
Next Steps

Customization

Learn how to customize the color system for your needs

App Config

Configure semantic colors and component themes

Build docs developers (and LLMs) love

Get started for freeTalk to us