Spacing & elevation

Spacing

Spacing tokens sit on a 0.25rem grid. Fractional steps use a hyphen: --sb-space-0-5 is 0.125rem and --sb-space-1-5 is 0.375rem.

–sb-space-10.25rem

–sb-space-20.5rem

–sb-space-30.75rem

–sb-space-41rem

–sb-space-51.25rem

–sb-space-61.5rem

–sb-space-82rem

–sb-space-102.5rem

–sb-space-123rem

–sb-space-164rem

–sb-space-205rem

–sb-space-246rem

The full set is 0, px (1px), 0-5, 1, 1-5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20 and 24. Tailwind keeps its own spacing scale, which uses the same 0.25rem step, so p-4 equals --sb-space-4.

Radius

Soft corners are part of the identity: Static Bloom never uses chamfers as its main motif. Buttons and inputs use md, cards lg, dialogs xl.

xs 2px

sm 4px

md 6px

lg 10px

xl 14px

2xl 20px

Tokens: --sb-radius-xs to --sb-radius-2xl and --sb-radius-full (9999px). Tailwind: rounded-xs to rounded-2xl map to the tokens; rounded-full is Tailwind’s own.

Surfaces

Depth comes first from tone. Each step raises the surface one level; hover and active states move one more.

canvas-sunken crust

canvas-subtle mantle

canvas base

panel surface0

panel-hover surface1

panel-active surface2

Shadows

Shadows add separation for floating layers. They are near-black on dark flavors and a soft plum ink on Daybreak, at a lower strength.

shadow-sm –sb-shadow-sm

shadow-md –sb-shadow-md

shadow-lg –sb-shadow-lg

shadow-overlay –sb-shadow-overlay

Cards use sm, toasts and HUD panels md or lg, menus, popovers and dialogs overlay. Tailwind: shadow-sm, shadow-md, shadow-lg, shadow-overlay. The neon glow is an effect, not elevation: see Effects & motion.

Layers

Token	Value	For
--sb-z-dropdown	1000	Dropdowns and select lists
--sb-z-sticky	1100	Sticky headers and toolbars
--sb-z-overlay	1300	Backdrops
--sb-z-modal	1400	Dialogs and drawers
--sb-z-popover	1500	Popovers and menus
--sb-z-toast	1600	Toasts
--sb-z-tooltip	1700	Tooltips