Taste

Discover the design tokens for spacing, colors, and typography that define the Aura aesthetic.

The following sections outline our approach to foundational design tokens that give Aura its distinct identity.

Spacing

A unit of space in this system is 13px. Spacing tokens are defined in increments of 1 or 0.5 units, such as 1 (13px), 1.5 (19.5px), 2 (26px), 2.5 (32.5px), 3 (39px), 3.5 (45.5px), and 4 (52px).

Example spacing scale:

Token	Value
1	13px
1.5	19.5px
2	26px
2.5	32.5px
3	39px
3.5	45.5px
4	52px

In CSS, you might define these as:

@theme inline {
  --spacing: 13px;
}

Use these variables for margin, padding, gaps, etc., to maintain consistent spacing across your design system.

Colors

To create a custom color palette, follow these steps:

Open the color mixer
Move to light mode
Input your Accent color (e.g., #0000b3 for blue).
Input your Gray color (e.g., #F0EFEB for gray).
Input your Background color (e.g., #fafafa for white).
Download the generated CSS variables.

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

Naming Logic:

color-{purpose}-{value} (e.g., color-accent-9 for primary brand color).

@import "tailwindcss";

@theme inline {
  --spacing: 13px;
  --font-sans: Inter, sans-serif;
  --info: #e8ebfe;
  --info-contrast: #0927ec;
  --success: #e8fef7;
  --success-contrast: #045d3c;
  --danger: #feefe8;
  --danger-contrast: #8e3106;
  --warning: #fefbe8;
  --warning-contrast: #5d5104;
  --radius-sm: calc(var(--spacing) * 0.5);
  --radius-md: calc(var(--spacing) * 1);
  --radius-lg: calc(var(--spacing) * 1.5);
  --radius-xl: calc(var(--spacing) * 2);
  --aura-loader: var(--aura-loader);
  --color-warning-contrast: var(--warning-contrast);
  --color-warning: var(--warning);
  --color-danger-contrast: var(--danger-contrast);
  --color-danger: var(--danger);
  --color-success-contrast: var(--success-contrast);
  --color-success: var(--success);
  --color-info-contrast: var(--info-contrast);
  --color-info: var(--info);
  --secundary-foreground: var(--secundary-foreground);
  --secundary: var(--secundary);
  --primary-foreground: var(--primary-foreground);
  --primary: var(--primary);
  --color-gray-track: var(--gray-track);
  --color-gray-indicator: var(--gray-indicator);
  --color-gray-surface: var(--gray-surface);
  --color-gray-contrast: var(--gray-contrast);
  --color-gray-a12: var(--gray-a12);
  --color-gray-a11: var(--gray-a11);
  --color-gray-a10: var(--gray-a10);
  --color-gray-a9: var(--gray-a9);
  --color-gray-a8: var(--gray-a8);
  --color-gray-a7: var(--gray-a7);
  --color-gray-a6: var(--gray-a6);
  --color-gray-a5: var(--gray-a5);
  --color-gray-a4: var(--gray-a4);
  --color-gray-a3: var(--gray-a3);
  --color-gray-a2: var(--gray-a2);
  --color-gray-a1: var(--gray-a1);
  --color-gray-12: var(--gray-12);
  --color-gray-11: var(--gray-11);
  --color-gray-10: var(--gray-10);
  --color-gray-9: var(--gray-9);
  --color-gray-8: var(--gray-8);
  --color-gray-7: var(--gray-7);
  --color-gray-6: var(--gray-6);
  --color-gray-5: var(--gray-5);
  --color-gray-4: var(--gray-4);
  --color-gray-3: var(--gray-3);
  --color-gray-2: var(--gray-2);
  --color-gray-1: var(--gray-1);
  --color-accent-track: var(--accent-track);
  --color-accent-indicator: var(--accent-indicator);
  --color-accent-surface: var(--accent-surface);
  --color-accent-contrast: var(--accent-contrast);
  --color-accent-a12: var(--accent-a12);
  --color-accent-a11: var(--accent-a11);
  --color-accent-a10: var(--accent-a10);
  --color-accent-a9: var(--accent-a9);
  --color-accent-a8: var(--accent-a8);
  --color-accent-a7: var(--accent-a7);
  --color-accent-a6: var(--accent-a6);
  --color-accent-a5: var(--accent-a5);
  --color-accent-a4: var(--accent-a4);
  --color-accent-a3: var(--accent-a3);
  --color-accent-a2: var(--accent-a2);
  --color-accent-a1: var(--accent-a1);
  --color-accent-12: var(--accent-12);
  --color-accent-11: var(--accent-11);
  --color-accent-10: var(--accent-10);
  --color-accent-9: var(--accent-9);
  --color-accent-8: var(--accent-8);
  --color-accent-7: var(--accent-7);
  --color-accent-6: var(--accent-6);
  --color-accent-5: var(--accent-5);
  --color-accent-4: var(--accent-4);
  --color-accent-3: var(--accent-3);
  --color-accent-2: var(--accent-2);
  --color-accent-1: var(--accent-1);
}

:root {
  /* Accent color scale */
  --accent-1: #faf9fc;
  --accent-2: #f7f4fc;
  --accent-3: #f1eafe;
  --accent-4: #ebdeff;
  --accent-5: #e2d1fe;
  --accent-6: #d7c0fa;
  --accent-7: #c9a9f5;
  --accent-8: #b78cef;
  --accent-9: #964ce1;
  --accent-10: #8841ce;
  --accent-11: #7d35c2;
  --accent-12: #421a68;

  --accent-a1: #7d3dfc04;
  --accent-a2: #6f1afc09;
  --accent-a3: #ece1ffaa;
  --accent-a4: #ebdeff;
  --accent-a5: #d5bcffaa;
  --accent-a6: #6202f43d;
  --accent-a7: #6201e754;
  --accent-a8: #6202df72;
  --accent-a9: #6b02d6b3;
  --accent-a10: #6102bfbe;
  --accent-a11: #5c01b3ca;
  --accent-a12: #2d0057e5;

  --accent-contrast: #fff;
  --accent-surface: #f6f3fdcc;
  --accent-indicator: #964ce1;
  --accent-track: #964ce1;

  /* Gray color scale */
  --gray-1: #f6f9ff;
  --gray-2: #f0f6ff;
  --gray-3: #e3ecff;
  --gray-4: #d7e4ff;
  --gray-5: #ccdcff;
  --gray-6: #c2d4ff;
  --gray-7: #b4c8ff;
  --gray-8: #99b3ff;
  --gray-9: #6d84d5;
  --gray-10: #647ac5;
  --gray-11: #4b5c9a;
  --gray-12: #121b48;

  --gray-a1: #f6f9ff;
  --gray-a2: #f0f6ff;
  --gray-a3: #e3ecff;
  --gray-a4: #d7e4ff;
  --gray-a5: #ccdcff;
  --gray-a6: #c2d4ff;
  --gray-a7: #b4c8ff;
  --gray-a8: #99b3ff;
  --gray-a9: #0029b791;
  --gray-a10: #0025a19a;
  --gray-a11: #021a72b4;
  --gray-a12: #000a3aed;

  --gray-contrast: #ffffff;
  --gray-surface: #ffffffcc;
  --gray-indicator: #6d84d5;
  --gray-track: #6d84d5;

  --primary: var(--accent-9);
  --primary-foreground: var(--accent-contrast);
  --secundary: var(--accent-8);
  --secundary-foreground: var(--accent-contrast);

  /* Aura Design System - Root Tokens */
  --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;

  /* Aura Background & Text - Mapped to gray scale */
  --aura-bg: var(--gray-1);
  --aura-text-primary: var(--accent-12);
  --aura-text-primary-inverse: var(--gray-contrast);

  --aura-accents-primary: var(--accent-9);
  --aura-accents-secondary: var(--accent-9);

  /* Aura Component Tokens - Mapped to 12-step system */
  --aura-input-radius: 6.5px;
  --aura-button-radius: 6.5px;
  --aura-input-bg: var(--accent-2);
  --aura-input-placeholder-color: var(--gray-11);
  --aura-radius: 0.5rem;
  --aura-opacity: 0.5;
  --aura-outline: var(--accent-9) solid 2px;
  --aura-button-hover: var(--accent-11);
  --aura-link: var(--gray-12);
  --aura-link-hover: var(--accent-2);
  --aura-selector: var(--accent-surface);
  --aura-loader: var(--primary);
  --aura-skeleton-start: var(--gray-8);
  --aura-skeleton-end: var(--gray-5);
  --radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Accent color scale */
  --accent-1: #17111e;
  --accent-2: #1c1527;
  --accent-3: #2d1b43;
  --accent-4: #3b1f58;
  --accent-5: #452767;
  --accent-6: #513176;
  --accent-7: #643f8f;
  --accent-8: #8152b8;
  --accent-9: #964ce1;
  --accent-10: #8151b7;
  --accent-11: #ce9dff;
  --accent-12: #e9d9ff;

  --accent-a1: #f600000c;
  --accent-a2: #fc3f0011;
  --accent-a3: #fd53da23;
  --accent-a4: #e64ffc37;
  --accent-a5: #d35cfd49;
  --accent-a6: #cd69fd5b;
  --accent-a7: #c671fd79;
  --accent-a8: #bc72ffaa;
  --accent-a9: #ac55ffdb;
  --accent-a10: #bd71fea9;
  --accent-a11: #ce9dff;
  --accent-a12: #e9d9ff;

  --accent-contrast: #fff;
  --accent-surface: #2c182480;
  --accent-indicator: #964ce1;
  --accent-track: #964ce1;

    /* Gray color scale */
  --gray-1: #0c122a;
  --gray-2: #131931;
  --gray-3: #182043;
  --gray-4: #1b2554;
  --gray-5: #1f2b62;
  --gray-6: #243275;
  --gray-7: #2e3f8b;
  --gray-8: #455aa9;
  --gray-9: #5268b8;
  --gray-10: #5f75c7;
  --gray-11: #94afff;
  --gray-12: #e5eeff;

  --gray-a1: #0d130106;
  --gray-a2: #ecf2eb08;
  --gray-a3: #768eff1d;
  --gray-a4: #5973fc32;
  --gray-a5: #5572fd43;
  --gray-a6: #506dfd5a;
  --gray-a7: #5675ff74;
  --gray-a8: #6c8bff98;
  --gray-a9: #7593ffaa;
  --gray-a10: #7d98ffbc;
  --gray-a11: #94afff;
  --gray-a12: #e5eeff;

  --gray-contrast: #ffffff;
  --gray-surface: rgba(0, 0, 0, 0.05);
  --gray-indicator: #5268b8;
  --gray-track: #5268b8;

   
  }
}

@layer base {
  @import "../styles/main.css";

  html {
    font-size: 17px;
  }
  main {
    background-color: var(--gray-1);
  }
}

@layer components {
}

The typography system is designed to ensure consistent and responsive text scaling across different screen sizes. It uses the CSS clamp() function combined with custom properties (CSS variables) to dynamically adjust font sizes based on the viewport width. This approach ensures readability and visual harmony on all devices.

How It Works

The system uses the clamp() function, which takes three arguments:

min: The minimum font size (in rem).
val: The preferred font size (in vw for responsiveness).
max: The maximum font size (in rem).

The formula ensures that the font size scales fluidly between the min and max values based on the viewport width.

font-size: clamp(var(--min), var(--val), var(--max));

Here’s the complete CSS code for the typography system:

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body .h1,
body .h2,
body .h3,
body .h4,
body .h5,
body .h6 {
  font-size: clamp(var(--min), var(--val), var(--max));
}

h1, .h1 {
  --min: 1.9838rem;
  --val: 4.029999999999999vw;
  --max: 3.052rem;
}

h2, .h2 {
  --min: 1.58665rem;
  --val: 4.029999999999999vw;
  --max: 2.441rem;
}

h3, .h3 {
  --min: 1.482rem;
  --val: 4.029999999999999vw;
  --max: 2.28rem;
}

h4, .h4, blockquote {
  --min: 1.26945rem;
  --val: 4.029999999999999vw;
  --max: 1.953rem;
}

h5, .h5 {
  --min: 1.17225rem;
  --val: 4.029999999999999vw;
  --max: 1.563rem;
}

h6, .h6 {
  --min: 1.0625rem;
  --val: 4.029999999999999vw;
  --max: 1.25rem;
}

p, .p {
  --min: 1rem;
  --val: 4.029999999999999vw;
  --max: 1rem;
}

Spacing

Colors

Typography

How It Works

On this page