Foundations/Shadows

Shadow System

Elevation and depth are communicated through a consistent shadow system with presets ranging from subtle to dramatic.

Shadow Presets

DSShadow.none

No shadow

Flat elements

DSShadow.sm

Subtle shadow (4pt blur)

Chips, tags

DSShadow.md

Medium shadow (8pt blur)

Cards, buttons

DSShadow.lg

Large shadow (16pt blur)

Modals, popovers

DSShadow.xl

Extra large (32pt blur)

Overlays, sheets

DSShadow.primary

Colored shadow

Primary buttons

DSShadow.glow

Glow effect

Focus states

Example

import SwiftUI

Card()
    .dsShadow(.md)

Button("Primary")
    .dsShadow(.primary)