aura
A lightweight, zero-config CSS library where semantic HTML attributes produce complete, composable styles. Works directly in the browser with a CDN link — no build step required.
Quick start
<!-- CDN (no install) --> <link rel="stylesheet" href="https://unpkg.com/useaura@0.4.0/dist/forma.css" /> <!-- npm --> npm install useaura <!-- Then import --> import 'useaura/css'
Surfaces
glass · solid · matte · ghost · frosted · neon
Tones
primary · danger · success · warning · info · accent · neutral
Typography
display · heading · body · code · weight · truncate · balance
Layout
stack · row · grid · sidebar · masonry · prose · gap · align
Responsive
cols · span · sm-cols · md-cols · lg-cols · hide · show
Forms
input · textarea · select · range · checkbox · field · hint
States
loading · skeleton · disabled · error · success · warning
Elevation
none · low · mid · high · float
Motion & Reveal
motion · float · axis · reveal · reveal-delay
Scheme
scheme="dark" · scheme="light"
v0.3.0 — Advanced features
Fluid Scaling
fluid — clamp() scaling, no breakpoints
Animated Surfaces
aurora · mesh · noise
Scroll Animations
parallax · progress · sticky-fade — zero JS
Spring Motion
spring · spring-bouncy · spring-gentle
Container Queries
cq — layouts that respond to their container
Seed Color
--aura-seed — one variable, full palette
Tooltips
tooltip= · tooltip-pos= — zero JS
v0.4.0 — Visual effects
Gradients
gradient= · text-gradient= · 18 named presets
Glow & Ring
glow= · ring= · text-glow= · shadow=
Patterns
grid · dots · stripes · crosshatch · checker · diamonds
Filters & Backdrop
filter= · backdrop= · blur, grayscale, sepia & more
Masks
fade-bottom · fade-x · vignette · circle · spotlight
Clip Paths
circle · diamond · hex · star · arrow · notch & more
v0.4.0 — Animation & interaction
Animate
spin · pulse · bounce · wiggle · shake · ping · float
Tilt (3D Hover)
tilt= — mouse-aware 3D perspective tilt
Shimmer & Skeleton
shimmer= · skeleton= — loading states on any element
v0.4.0 — Utilities
General Utils
aspect · overflow · cursor · opacity · object · z · blend
Text Effects
text-shadow · text-stroke · highlight · tracking · leading
Badge
badge= — inline semantic labels & chips
Divide
divide="x|y" — lines between flex/grid children
Scroll Snap
scroll=snap-x · snap= · scrollbar= · overscroll=
Example
<!-- Composed card -->
<div surface="glass" tone="primary" density="spacious" radius="xl" elevation="mid" reveal="bottom">
<h2 text="heading" balance>Feature title</h2>
<p text="body">Describe the feature here.</p>
</div>
<!-- Responsive form -->
<form layout="stack" gap="md">
<div field>
<label>Email</label>
<input input type="email" placeholder="you@example.com" />
</div>
<button surface="solid" tone="primary" density="default" radius="full" motion="expressive">
Submit
</button>
</form>
<!-- Responsive grid -->
<div layout="grid" cols="1" md-cols="2" lg-cols="3" gap="lg">
<div surface="matte" density="spacious" radius="xl">Card 1</div>
<div surface="matte" density="spacious" radius="xl">Card 2</div>
<div surface="matte" density="spacious" radius="xl">Card 3</div>
</div>