Depth and elevation
Radius on the 13px grid, tonal sheets, and borders at gray steps 6–8. Aura does not define a shadow scale.
Aura specifies depth in DESIGN.md §6, so this page records that system. Surfaces separate by radius, background step, and border step. A numbered elevation or shadow ramp is not defined.
Radius
Radius tokens are multiples of --spacing (13px), from @theme inline in globals.css:
| Token | Formula | At 13px |
|---|---|---|
--radius-sm | calc(var(--spacing) * 0.5) | 6.5px |
--radius-md | calc(var(--spacing) * 1) | 13px |
--radius-lg | calc(var(--spacing) * 1.5) | 19.5px |
--radius-xl | calc(var(--spacing) * 2) | 26px |
Component tokens beside those:
| Token | Value in globals.css |
|---|---|
--aura-input-radius | 6.5px |
--aura-button-radius | 6.5px |
--aura-radius | 0.5rem |
Page-level chrome uses at least rounded-sm / --radius-sm. Outer registry cards can use rounded-xl; nested items step down to rounded-md when the hierarchy should come from radius rather than another border.
Tonal sheets
Stack backgrounds before adding lines:
| Layer | Step |
|---|---|
| Canvas | gray-1 |
| Secondary band | gray-2 |
| Lifted card | gray-2 or gray-3 |
main uses background-color: var(--gray-1). Default Card uses bg-gray-2 and border-gray-6. An editorial card may drop the border (border-0), take rounded-xl and bg-gray-3, and let padding carry the edge. Dialogs, menus, inputs, and focus rings keep visible structure.
When a surface sits on a similar background, a ghost outline is a low-alpha stroke of gray-7 or gray-8 (about 10–15% alpha). That recipe is written in DESIGN.md §6. It is not a separate CSS token.
Shadows
Aura does not ship a shadow scale. Components that need a lift use a soft tinted shadow when the design asks for one: blur on the order of 32–64px, opacity on the order of 4–6%, color biased toward the accent. DESIGN.md states that range as guidance for custom shadows. There is no --shadow-1 … --shadow-n ramp in globals.css or the Stylus tokens.
Focus stays on step 8 or --aura-outline (var(--accent-9) solid 2px), which reads as a ring rather than a drop shadow.
DESIGN.md also allows a semi-transparent panel (about 70% opacity on gray-1 or gray-2) with backdrop-blur around 20px for floating registry panels, provided contrast holds and reduced transparency is respected where the platform exposes it. That treatment is a pattern, not a token.