Shadow

Explore how box shadows and borders give surfaces depth and definition.

Timer card

corner-squircle border-border bg-surface space-y-3 rounded-2xl border p-4 shadow-lg

IndexCard

corner-squircle border-border bg-surface space-y-3 rounded-2xl border p-4 shadow-none

Success

corner-squircle border-success bg-success text-foreground space-y-3 rounded-2xl border p-4 shadow-lg

Attention

corner-squircle border-attention bg-attention text-foreground space-y-3 rounded-2xl border p-4 shadow-lg

Danger

corner-squircle border-danger bg-danger text-white space-y-3 rounded-2xl border p-4 shadow-lg

Action

corner-squircle border-action-hover bg-action text-white space-y-3 rounded-2xl border p-4 shadow-lg

Foreground

corner-squircle border-foreground bg-foreground text-background space-y-3 rounded-2xl border p-4 shadow-lg

Background

corner-squircle border-border bg-background text-foreground space-y-3 rounded-2xl border p-4 shadow-lg

White

corner-squircle border-border bg-white text-foreground space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 50

corner-squircle border-border bg-zinc-50 text-foreground space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 100

corner-squircle border-border bg-zinc-100 text-foreground space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 200

corner-squircle border-border bg-zinc-200 text-foreground space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 300

corner-squircle border-border bg-zinc-300 text-foreground space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 400

corner-squircle border-border bg-zinc-400 text-foreground space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 500

corner-squircle border-border bg-zinc-500 text-white space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 600

corner-squircle border-border bg-zinc-600 text-white space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 700

corner-squircle border-border bg-zinc-700 text-white space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 800

corner-squircle border-border bg-zinc-800 text-white space-y-3 rounded-2xl border p-4 shadow-lg

Zinc 900

corner-squircle border-border bg-zinc-900 text-white space-y-3 rounded-2xl border p-4 shadow-lg

Black

corner-squircle border-black bg-black text-white space-y-3 rounded-2xl border p-4 shadow-lg