Effects
Shadows and border radius tokens
Shadows
Elevation shadows for cards, modals, and interactive elements. Shadows appear more visible on dark backgrounds.
sm
sm
--shadow-dg-sm shadow-dg-sm 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05) md
md
--shadow-dg-md shadow-dg-md 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06) lg
lg
--shadow-dg-lg shadow-dg-lg 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05) Border Radius
Corner radius tokens for buttons, cards, and containers.
Button
sm
0.25rem --radius-dg-sm rounded-dg-sm
Button
md
0.5rem --radius-dg-md rounded-dg-md
Button
lg
0.75rem --radius-dg-lg rounded-dg-lg
Button
xl
1rem --radius-dg-xl rounded-dg-xl Custom Utilities
Brand-specific CSS utilities for gradients, glows, and resets.
dg-gradient-border
Gradient border using brand colors with adaptive inner fill. Uses --dg-primary and --dg-secondary.
class="dg-gradient-border"
Glow
dg-glow-cyan-green
Box shadow glow effect using brand primary and secondary colors.
class="dg-glow-cyan-green"
Subtle
dg-shadow-subtle
A delicate, barely-there box shadow for understated elevation.
class="dg-shadow-subtle"
Reset
dg-bg-reset
Clears background-image, origin, and clip. Useful for hover states on gradient-border elements.
class="dg-bg-reset"