Taste

The concept of "Taste" in a design system is the deliberate and cohesive aesthetic identity that differentiates it.

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:

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.

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).

@theme inline {
...
  --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-1: #fcfdff;
  --accent-2: #f3f9ff;
  --accent-3: #e8f3ff;
  --accent-4: #d8eaff;
  --accent-5: #c9e0ff;
  --accent-6: #b5d3ff;
  --accent-7: #9abfff;
  --accent-8: #73a3ff;
  --accent-9: #007;
  --accent-10: #042692;
  --accent-11: #2458de;
  --accent-12: #011d8a;
  --accent-a1: #0055ff03;
  --accent-a2: #0080ff0c;
  --accent-a3: #007aff17;
  --accent-a4: #0076ff27;
  --accent-a5: #006dff36;
  --accent-a6: #0168ff4a;
  --accent-a7: #005eff65;
  --accent-a8: #0058ff8c;
  --accent-a9: #000077;
  --accent-a10: #002390fb;
  --accent-a11: #003dd9db;
  --accent-a12: #001c8afe;
  --accent-contrast: #fff;
  --accent-surface: #f0f8ffcc;
  --accent-indicator: #007;
  --accent-track: #007;
  ...
}

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

Taste

Spacing

Colors

Typography

How It Works

On this page