UI Primitives

The Color System provides essential UI primitives that adapt to the current theme context.

Elevation (Shadows)

Shadows provide depth and hierarchy. The system generates a semantic scale of shadows that are subtle in Light Mode and stronger in Dark Mode to ensure visibility.

Usage

Use the utility classes or CSS variables:

.my-card {
  box-shadow: var(--shadow-md);
}
/* OR */
<div class="shadow-md">...</div>

Focus Indicators

Accessible focus indicators are critical for keyboard navigation. The system provides a universal focus ring that adapts to the brand color and ensures contrast.

Usage

Apply the .focus-ring utility class to interactive elements. It applies styles on :focus-visible.

<button class="surface-action focus-ring">Click Me</button>

The focus ring uses the --focus-ring-color variable, which is derived from your brand hue.

:root {
  --focus-ring-color: ...; /* Auto-generated */
}