Attribute Reference
Every attribute aura recognises. All values map to CSS custom properties
and can be overridden via init() or plain CSS.
Surfaces
surface= glass | solid | matte | ghost | frosted | neon
Visual material — controls background, blur, and border treatment.
density= compact | default | spacious
Internal padding scale.
radius= none | sm | md | lg | xl | full
Border radius scale.
Color
tone= primary | danger | success | warning | neutral | info | accent
Semantic color. Sets --aura-tone-color, consumed by surfaces, borders, and text.
Typography
text= display | heading | subheading | body | caption | label | overline | code
Semantic text style — font size, weight, line-height, and letter-spacing.
weight= light | regular | medium | semibold | bold | black
Font weight override.
truncate= (boolean) | 2 | 3 | 4 | 5
Single-line ellipsis or multi-line clamp.
balance= (boolean)
Applies text-wrap: balance to multi-line headings.
text-align= left | center | right
Text alignment.
Layout
layout= stack | row | cluster | grid | center | cover | sidebar | masonry | holy-grail | prose
Layout primitive. Sets display, flex-direction, and related properties.
gap= xs | sm | md | lg | xl
Gap between flex/grid children.
align= start | center | end | stretch
align-items shorthand.
justify= start | center | end | between
justify-content shorthand.
adaptive= (boolean)
Auto-switches layout direction at 768px.
wrap= (boolean)
Enables flex-wrap.
grow= (boolean)
flex-grow: 1.
shrink= (boolean)
flex-shrink: 0.
max= <CSS length>
Max-width constraint with auto inline margins.
Responsive Grid
cols= 1 | 2 | 3 | 4 | 5 | 6 | 12 | auto
Fixed grid column count.
span= 1 | 2 | 3 | 4 | 6 | full
Grid item column span.
sm-cols= 1–6
Column count at ≥ 640px.
md-cols= 1–6
Column count at ≥ 768px.
lg-cols= 1–6 | 12
Column count at ≥ 1024px.
xl-cols= 2–6
Column count at ≥ 1280px.
hide= mobile | tablet | desktop
Hide element at a given breakpoint.
show= mobile | tablet | desktop
Show element only at a given breakpoint.
Forms
input= (boolean) | textarea | select | range | checkbox | radio
Styles a form control. Boolean value targets text input.
field= (boolean)
Wrapper for label + input + hint. Applies spacing and state styles.
hint= (boolean)
Secondary text below a field. Inherits field error/success color.
States
state= loading | skeleton | disabled | error | success | warning
Interactive or semantic state. Applies opacity, spinner, shimmer, or tone color.
Elevation
elevation= none | low | mid | high | float
Box shadow depth level.
Layer (z-index)
layer= base | raised | floating | overlay | top
Semantic z-index.
Motion
motion= none | subtle | expressive | dramatic
Transition preset for hover/interaction animations.
float= slow | med | fast
Continuous idle float animation.
axis= x | xy
Float animation axis override (default: y).
reveal= bottom | top | left | right | scale | blur
Scroll-triggered entrance animation (requires JS runtime).
reveal-delay= <ms number>
Delay for reveal animation in milliseconds.
Scheme
scheme= dark | light
Forces a color scheme. Overrides surface and input tokens for the scoped element.
Key CSS custom properties
/* Tones */ --aura-color-primary: #7C6AF7 --aura-color-danger: #ef4444 --aura-color-success: #22c55e --aura-color-warning: #f59e0b --aura-color-neutral: #6b7280 --aura-color-info: #3b82f6 --aura-color-accent: #a855f7 /* Typography */ --aura-text-display: 4rem --aura-text-heading: 2rem --aura-text-subheading: 1.25rem --aura-font-mono: 'Fira Code', 'Cascadia Code', monospace /* Radius */ --aura-radius-sm: 0.25rem --aura-radius-md: 0.5rem --aura-radius-lg: 0.75rem --aura-radius-xl: 1.25rem /* Gap */ --aura-gap-xs: 0.25rem --aura-gap-sm: 0.5rem --aura-gap-md: 1rem --aura-gap-lg: 1.5rem --aura-gap-xl: 2.5rem /* Shadows */ --aura-shadow-low --aura-shadow-mid --aura-shadow-high --aura-shadow-float /* Layout */ --aura-sidebar-width: 260px --aura-prose-width: 65ch --aura-masonry-cols: 3 /* Forms */ --aura-input-bg: rgb(255 255 255 / 0.05) --aura-input-border: rgb(255 255 255 / 0.12) --aura-input-border-focus: var(--aura-color-primary) /* Motion */ --aura-motion-expressive-duration: 280ms --aura-reveal-distance: 24px --aura-reveal-duration: 480ms