Seed Color

Set --aura-seed to your brand color and aura auto-generates a full design system: a 10-stop palette, complementary color, triadic accent, analogous tones, and muted variants — all in pure CSS using color-mix() and oklch(). No build step. No config file.

10-stop palette from one color

Override --aura-seed on any element and all seed-* variables update automatically.

Purple (default) — #7c6af7

Red brand — #ef4444

Green brand — #10b981

Amber brand — #f59e0b

<div style="--aura-seed: #7c6af7;">
  <!-- All seed-* variables generated from this one value -->
  <div style="background: var(--aura-seed-100);">seed-100</div>
  <div style="background: var(--aura-seed-300);">seed-300</div>
  <div style="background: var(--aura-seed-500);">seed-500</div>
  <div style="background: var(--aura-seed-700);">seed-700</div>
  <div style="background: var(--aura-seed-900);">seed-900</div>
</div>

Harmonious companion colors

Complementary, triadic, warm, and cool variants — auto-generated from --aura-seed using oklch() hue rotation.

Seed

Complement

Triadic

Warm

Cool

<div style="--aura-seed: #7c6af7;">
  <div tone="seed"            surface="solid" density="compact" radius="md">Seed</div>
  <div tone="seed-complement" surface="solid" density="compact" radius="md">Complement (+180°)</div>
  <div tone="seed-triadic"    surface="solid" density="compact" radius="md">Triadic (+120°)</div>
  <div tone="seed-warm"       surface="solid" density="compact" radius="md">Warm (−30°)</div>
  <div tone="seed-cool"       surface="solid" density="compact" radius="md">Cool (+30°)</div>
</div>

Instant rebrand

Change --aura-seed on :root and the entire design system follows.

With --aura-seed: #ef4444

Glass + seed tone

Complement neon

/* One-line rebrand */
:root { --aura-seed: #ef4444; }

/* All these update automatically: */
--aura-color-primary  → red
--aura-seed-50 … 950  → red scale
--aura-seed-complement → teal/cyan
--aura-seed-warm       → orange
--aura-seed-cool       → rose

All generated variables

/* Set once — generates everything below */
:root { --aura-seed: #7c6af7; }

/* Palette */
--aura-seed-50 … --aura-seed-950  (10 stops: tints → shades)

/* Harmonious companions */
--aura-seed-complement  (hue + 180°)
--aura-seed-triadic     (hue + 120°)
--aura-seed-warm        (hue −  30°)
--aura-seed-cool        (hue +  30°)

/* Utility variants */
--aura-seed-subtle   (12% alpha)
--aura-seed-muted    (25% alpha)
--aura-seed-vivid    (boosted lightness + chroma)
--aura-seed-mellow   (reduced lightness + chroma)

/* Foreground text pairs */
--aura-seed-fg-dark   (dark text for light seed backgrounds)
--aura-seed-fg-light  (light text for dark seed backgrounds)

/* Tone aliases */
tone="seed"            → uses --aura-seed
tone="seed-complement" → uses --aura-seed-complement
tone="seed-warm"       → uses --aura-seed-warm
tone="seed-cool"       → uses --aura-seed-cool
tone="seed-vivid"      → uses --aura-seed-vivid