- Documentation

Aura Design System Theming Overview

The Aura Design System is built on a flexible and scalable theming architecture using CSS root variables. This approach ensures consistency, maintainability, and easy customization across your application. The theming system is designed to adapt seamlessly to different brand identities.

Theme Structure

Aura’s theming system is structured around CSS root variables and Tailwind's utility-first approach. Here's how it works:

Root Variables (CSS Custom Properties)

All theme values—including colors, spacing, and typography—are defined as CSS variables in the :root selector. This enables dynamic theming and easy overrides.

Base Theme Configuration.

css

*:root {
    --aura: 13px;
    --aura-font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --aura-font-quotes: serif;
    
    /* Primary Colors */
    --aura-white: #fff;
    --aura-black: #333;
    --aura-grey: #f6f7f9;
    --aura-bg: var(--aura-white);
    --aura-text-primary: #030303;
    --aura-text-primary-inverse: #fff;

    /* Status Colors */
    --aura-accents-success: #045d3c;
    --aura-accents-success-bg: var(--aura-teal-green);
    --aura-accents-info: #0927ec;
    --aura-accents-info-bg: var(--aura-purple);
    --aura-accents-warning: #5d5104;
    --aura-accents-warning-bg: var(--aura-yellow);
    --aura-accents-danger: #8e3106;
    --aura-accents-danger-bg: var(--aura-orange);

    /* UI Elements */
    --aura-input-radius: 6.5px;
    --aura-button-radius: 6.5px;
    --aura-input-bg: #f0f0f7;
    --aura-input-placeholder-color: rgba(51, 51, 51, 0.5);
    --aura-outline: #0927ec solid 2px;
    --aura-button-hover: #323232;
    --aura-link: var(--aura-text-primary);
    --aura-link-hover: var(--aura-accents-1);
    --aura-loader: #d1fdef;
}

Customizing the Theme

To customize the theme, override the default CSS variables in your styles:

css

*:root {
    --aura-font-stack: 'Geist', 'Geist Fallback'
    --aura-accents-primary: #0071e3;
    --aura-button-hover: #0076DF;
}

Global Styles & Tailwind Integration

The theming system integrates seamlessly with TailwindCSS, allowing for structured and scalable design tokens.

Global Styles (globals.css) with Tailwind Overwrites

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-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 {}