- Documentation

Colors

The color system is designed to provide a consistent and scalable palette for your design system. It uses the Radix UI Colors tool to generate a range of shades (from light to dark) for each base color. These colors are then integrated into your project using CSS variables, prefixed with color- for easy usage.

Docs

Create a custom palette

Key Features

Custom Color Palette: The Radix UI Colors tool generates a scale of shades for each base color, ensuring a harmonious range from light to dark.
CSS Variables: Colors are defined as CSS variables, prefixed with color- for easy reference and usage.
Tailwind CSS v4 Integration: Colors are initialized in your CSS file, making them available for use in your Tailwind CSS v4 project.

To create a custom color palette, follow these steps:

Visit the Radix UI Colors tool.
Input your Accent color (e.g., #3B82F6 for blue).
Input your Gray color (e.g., #E6E6F2 for gray).
Input your Background color (e.g., #FFFFFF for white).
Copy the generated CSS variables.

Example Output:

For a base color of #3B82F6 (blue), the tool might generate:

css

:root, .light, .light-theme {
  --blue-1: #fcfdff;
  --blue-2: #f5f9ff;
  --blue-3: #eaf2ff;
  --blue-4: #dcebff;
  --blue-5: #cbe1ff;
  --blue-6: #b8d4ff;
  --blue-7: #9fc2fb;
  --blue-8: #7baaf6;
  --blue-9: #3b82f6;
  --blue-10: #2c74e9;
  --blue-11: #256cde;
  --blue-12: #123164;

  --blue-a1: #0055ff03;
  --blue-a2: #0066ff0a;
  --blue-a3: #0062ff15;
  --blue-a4: #006eff23;
  --blue-a5: #006cff34;
  --blue-a6: #0065ff47;
  --blue-a7: #005df560;
  --blue-a8: #005bee84;
  --blue-a9: #005df3c4;
  --blue-a10: #0057e5d3;
  --blue-a11: #0053d8da;
  --blue-a12: #002158ed;

  --blue-contrast: #fff;
  --blue-surface: #f3f8ffcc;
  --blue-indicator: #3b82f6;
  --blue-track: #3b82f6;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --blue-1: oklch(99.3% 0.0032 259.8);
      --blue-2: oklch(98.2% 0.0096 259.8);
      --blue-3: oklch(96% 0.0199 259.8);
      --blue-4: oklch(93.7% 0.0373 259.8);
      --blue-5: oklch(90.6% 0.054 259.8);
      --blue-6: oklch(86.4% 0.0697 259.8);
      --blue-7: oklch(80.9% 0.0894 259.8);
      --blue-8: oklch(73.4% 0.1221 259.8);
      --blue-9: oklch(62.3% 0.188 259.8);
      --blue-10: oklch(58.2% 0.1913 259.8);
      --blue-11: oklch(55.4% 0.188 259.8);
      --blue-12: oklch(32.3% 0.0976 259.8);

      --blue-a1: color(display-p3 0.0235 0.349 1 / 0.012);
      --blue-a2: color(display-p3 0.0235 0.349 0.8941 / 0.036);
      --blue-a3: color(display-p3 0.0078 0.3569 0.9529 / 0.079);
      --blue-a4: color(display-p3 0.0078 0.3804 0.9412 / 0.126);
      --blue-a5: color(display-p3 0.0078 0.3569 0.9412 / 0.189);
      --blue-a6: color(display-p3 0.0039 0.3373 0.9412 / 0.259);
      --blue-a7: color(display-p3 0.0039 0.3059 0.898 / 0.35);
      --blue-a8: color(display-p3 0.0039 0.298 0.8784 / 0.479);
      --blue-a9: color(display-p3 0 0.2824 0.902 / 0.695);
      --blue-a10: color(display-p3 0 0.2627 0.8431 / 0.75);
      --blue-a11: color(display-p3 0 0.251 0.7961 / 0.773);
      --blue-a12: color(display-p3 0 0.098 0.3098 / 0.899);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 0.9569 0.9725 1 / 0.8);
      --blue-indicator: oklch(62.3% 0.188 259.8);
      --blue-track: oklch(62.3% 0.188 259.8);
    }
  }
}

Integrating Colors into Your CSS File

Once you have your color scales, integrate them into your CSS file. Define the colors as CSS variables under the @theme layer, prefixed with color-.

css

@import "tailwindcss";

@theme {
  ...

  --color-blue-1: #fcfdff;
  --color-blue-2: #f5f9ff;
  --color-blue-3: #eaf2ff;
  --color-blue-4: #dcebff;
  --color-blue-5: #cbe1ff;
  --color-blue-6: #b8d4ff;
  --color-blue-7: #9fc2fb;
  --color-blue-8: #7baaf6;
  --color-blue-9: #3b82f6;
  --color-blue-10: #2c74e9;
  --color-blue-11: #256cde;
  --color-blue-12: #123164;

  --color-blue-a1: #0055ff03;
  --color-blue-a2: #0066ff0a;
  --color-blue-a3: #0062ff15;
  --color-blue-a4: #006eff23;
  --color-blue-a5: #006cff34;
  --color-blue-a6: #0065ff47;
  --color-blue-a7: #005df560;
  --color-blue-a8: #005bee84;
  --color-blue-a9: #005df3c4;
  --color-blue-a10: #0057e5d3;
  --color-blue-a11: #0053d8da;
  --color-blue-a12: #002158ed;

  --color-blue-contrast: #fff;
  --color-blue-surface: #f3f8ffcc;
  --color-blue-indicator: #3b82f6;
  --color-blue-track: #3b82f6;

  ...
}

Using Colors in Your Project

Once the colors are defined as CSS variables, you can use them in your HTML or JSX by referencing the variables.

jsx

...
<div className="text-blue-9">
  This is a blue box with dark blue text.
</div>
...

Example Configuration

Below is a full configuration example with blue and black color scales

css

@import "tailwindcss";

@theme {
  --radius-0.5: calc(var(--spacing) * 0.5);
  --radius-1: calc(var(--spacing) * 1);
  --radius-1.5: calc(var(--spacing) * 1.5);
  --radius-2: calc(var(--spacing) * 2);

  --spacing: 13px;

  --color-black-1: #fcfcff;
  --color-black-2: #f9f9fe;
  --color-black-3: #efeff8;
  --color-black-4: #e7e7f3;
  --color-black-5: #dfdfee;
  --color-black-6: #d8d8e9;
  --color-black-7: #cdcde1;
  --color-black-8: #b9b9d2;
  --color-black-9: #000;
  --color-black-10: #2c2c3b;
  --color-black-11: #626276;
  --color-black-12: #1f1f2c;

  --color-black-a1: #0000ff03;
  --color-black-a2: #0000d506;
  --color-black-a3: #00009010;
  --color-black-a4: #00008018;
  --color-black-a5: #00007820;
  --color-black-a6: #00007027;
  --color-black-a7: #00006632;
  --color-black-a8: #00005c46;
  --color-black-a9: #000000;
  --color-black-a10: #000012d3;
  --color-black-a11: #0000219d;
  --color-black-a12: #00000fe0;

  --color-black-contrast: #fff;
  --color-black-surface: #f8f8fecc;
  --color-black-indicator: #000;
  --color-black-track: #000;

  --color-blue-1: #fcfdff;
  --color-blue-2: #f5f9ff;
  --color-blue-3: #eaf2ff;
  --color-blue-4: #dcebff;
  --color-blue-5: #cbe1ff;
  --color-blue-6: #b8d4ff;
  --color-blue-7: #9fc2fb;
  --color-blue-8: #7baaf6;
  --color-blue-9: #3b82f6;
  --color-blue-10: #2c74e9;
  --color-blue-11: #256cde;
  --color-blue-12: #123164;

  --color-blue-a1: #0055ff03;
  --color-blue-a2: #0066ff0a;
  --color-blue-a3: #0062ff15;
  --color-blue-a4: #006eff23;
  --color-blue-a5: #006cff34;
  --color-blue-a6: #0065ff47;
  --color-blue-a7: #005df560;
  --color-blue-a8: #005bee84;
  --color-blue-a9: #005df3c4;
  --color-blue-a10: #0057e5d3;
  --color-blue-a11: #0053d8da;
  --color-blue-a12: #002158ed;

  --color-blue-contrast: #fff;
  --color-blue-surface: #f3f8ffcc;
  --color-blue-indicator: #3b82f6;
  --color-blue-track: #3b82f6;

  --color-info: #e8ebfe;
  --color-info-contrast: #0927ec;
  --color-success: #e8fef7;
  --color-success-contrast: #045d3c;
  --color-danger: #feefe8;
  --color-danger-contrast: #8e3106;
  --color-warning: #fefbe8;
  --color-warning-contrast: #5d5104;
}

@layer base {
  @import "@aura-design/system/main.css";

  *:root{
    --aura-font-stack: 'Geist', 'Geist Fallback'
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
  }
  p {
    line-height: 1.6;
  }
}

@layer utilities {
  .content a {
    text-decoration: underline;
  }
  a:has(.button-fill, .button-pill, .button-link) {
    outline: none !important;
  }
}

@layer components {}