⚡ Quick Reference

Everything you need to build with aura — on one page. No deep reading required. Copy any example and customize from there.

The one thing to know

Put aura="" on any element. Write space-separated words that describe what you want. Done.

<div aura="glass primary xl">           <!-- glass card, purple tint, rounded corners -->
<button aura="solid danger pill">       <!-- solid red button, pill shape -->
<div aura="frosted spacious rounded">   <!-- frosted panel, lots of padding -->
<button aura="ghost success">           <!-- outlined green button -->

All tokens at a glance

Surface — how it looks

 glass — frosted blur (default for card) solid — filled with tone color frosted — heavy blur, high opacity ghost — border only, no fill matte — no border, subtle fill neon — glowing border edge 

Tone — the color

 primary — purple (default brand) danger — red success — green warning — amber accent — violet info — blue neutral — gray 

Shape — corner radius

 sharp — no rounding (0px) sm — slight rounding (4px) md — medium (8px) rounded — comfortable (12px) xl — large (20px) pill — fully rounded (9999px) 

Spacing — padding inside

 compact — tight (buttons, chips) default — comfortable (cards) spacious — generous (hero sections) 

Layout — arrangement

 stack — vertical flex column row — horizontal flex row grid — CSS grid cluster — wrapping flex (tags, buttons) cover — centered full-height sidebar — sidebar + main layout 

Elevation — shadow depth

 low — subtle drop shadow mid — medium shadow high — prominent shadow 

Copy-paste examples

All examples use the aura="" unified attribute. Runtime expands tokens automatically.

Buttons — one word is all you need

<button aura="solid primary pill compact">Primary</button>
<button aura="solid danger pill compact">Danger</button>
<button aura="solid success pill compact">Success</button>
<button aura="ghost primary pill compact">Ghost</button>
<button aura="glass accent pill compact">Glass</button>
<button aura="neon primary pill compact">Neon</button>

Even simpler — one-word tone buttons

Use shorthand tone attrs directly on a button. No surface/radius/density needed.

<button primary>Primary</button>
<button danger>Danger</button>
<button success>Success</button>
<button warning>Warning</button>
<button accent>Accent</button>

Cards

Glass + Primary

aura="glass primary rounded"

Solid + Success

aura="solid success rounded"

Ghost + Danger

aura="ghost danger rounded"

Frosted + Accent

aura="frosted accent xl"

<div aura="glass primary rounded">...</div>
<div aura="solid success rounded">...</div>
<div aura="ghost danger rounded">...</div>
<div aura="frosted accent xl">...</div>

Zero-config presets — no value needed

Bare attribute = sensible defaults applied automatically.

card

glass + padding + rounded

chip chip primary chip danger

<div card>...</div>             <!-- glass, default padding, rounded -->
<span chip>chip</span>         <!-- subtle pill -->
<span chip primary>tag</span>  <!-- primary-toned pill -->

Customize anything

Not happy with the built-in colors, sizes, or shapes? Escape the token system with square brackets — write any valid CSS value.

Custom color — your brand, not ours

Orange tint

Any hex / rgb / oklch

<!-- tone="[any CSS color]" -->
<button aura="solid pill" tone="[#e11d48]">Custom red</button>
<button aura="solid pill" tone="[oklch(70%_0.2_250)]">oklch blue</button>
<div aura="glass rounded" tone="[#f97316]">Orange tint</div>

Custom radius, padding & size

20px radius

2rem padding

Sharp corners

Asymmetric padding

<!-- radius / p / px / py / m / w / h all accept [value] -->
<div aura="glass primary" radius="[20px]" p="[2rem]">...</div>
<div aura="solid success" radius="[4px]" p="[0.5rem_1.5rem]">...</div>
<!-- underscores become spaces: p="[0.5rem_1.5rem]" → padding: 0.5rem 1.5rem -->

Custom background — fully escape the surface system

Custom gradient

bg="[linear-gradient(...)]"

Custom solid bg

bg="[#0d1117]"

<!-- bg="[any CSS background value]" -->
<div bg="[linear-gradient(135deg,#1a1a2e,#16213e)]" radius="[12px]" p="[1.5rem]">
  Custom gradient
</div>

Rebrand the whole system

Override CSS custom properties to change the defaults globally — or just for a subtree. All aura components pick up the change automatically.

Global token overrides — one place changes everything

 /* In your global CSS */
 :root {

  --aura-color-primary: #your-brand;

  --aura-radius-lg: 20px;

  --aura-glass-blur: 20px;

  --aura-density-compact: 0.5rem 1rem;

}
 /* Now every component using primary, glass, compact, lg radius
  automatically uses your brand values — no attribute changes needed */ 

:root {
  --aura-color-primary: #your-brand;   /* changes ALL primary buttons, cards, etc. */
  --aura-radius-lg:     20px;          /* changes default card corner radius */
  --aura-glass-blur:    20px;          /* changes frosted glass intensity */
  --aura-density-compact: 0.5rem 1rem; /* changes all button padding */
}

Scoped theme — different tokens for a section

This section has --aura-color-primary: #e11d48

Glass chip

<!-- Override tokens for just one section -->
<section style="--aura-color-primary: #e11d48">
  <button primary>Now red, not purple</button>
  <div aura="glass primary">Also uses the red</div>
</section>

All customisable tokens

Token	Default	What it controls
--aura-color-primary	#7C6AF7	Primary tone color everywhere
--aura-color-danger	#ef4444	Danger / error color
--aura-color-success	#22c55e	Success color
--aura-color-warning	#f59e0b	Warning / amber color
--aura-color-accent	#a855f7	Accent / violet color
--aura-radius-lg	0.75rem	Default card corner radius
--aura-radius-xl	1.25rem	Large corner radius
--aura-glass-blur	14px	Glass / frosted blur amount
--aura-glass-opacity	0.10	Glass surface opacity
--aura-density-compact	0.375rem 0.625rem	Button / chip padding
--aura-density-default	0.75rem 1rem	Card padding
--aura-density-spacious	1.5rem 2rem	Hero / section padding

The 3 levels — from simple to fully custom

Level 1 — Zero config

<div card>    <button primary>    <span chip>    <section hero>

Just write the element type or tone. Sensible defaults apply automatically.

Level 2 — Token modifiers

<div aura="glass danger xl spacious">
<button aura="solid primary pill compact">

Combine any tokens in aura="". Order doesn't matter. The system figures out what each word means.

Level 3 — Custom values

<div aura="glass xl" tone="[#ff6b6b]" p="[2rem_1rem]">
<div bg="[linear-gradient(...)]" radius="[20px]">

Any attribute accepts [value] syntax for raw CSS. Underscores become spaces.