Foundations
Shadows
Adds depth and emphasis through simulated cast shadows, enhancing the visual appeal of elements.
Element Shadow
shadow-inverse-inset
Inner Shadow
X: 0px
Blur: 0px
Y: 0px
Spread: 1px
ironside-gray-950
Inner Shadow
X: 0px
Blur: 0px
Y: 1px
Spread: 1px
ironside-gray-700
shadow-inverse-inset-shadow
Inner Shadow
X: 0px
Blur: 0px
Y: 0px
Spread: 1px
ironside-gray-950
Inner Shadow (level 2)
X: 0px
Blur: 0px
Y: 1px
Spread: 1px
ironside-gray-700
Drop Shadow (level 1)
X: 0px
Blur: 8px
Y: 4px
Spread: -2px
ironside-gray-950/10
Drop Shadow (level 2)
X: 0px
Blur: 4px
Y: 2px
Spread: -2px
ironside-gray-950/10
shadow-logo
Drop Shadow
X: 0px
Blur: 0px
Y: 0px
Spread: 1px
white
Inner Shadow
X: 0px
Blur: 0px
Y: 0px
Spread: 1px
ironside-gray-950
Inner Shadow (level 2)
X: 0px
Blur: 0px
Y: 1px
Spread: 1px
ironside-gray-700
shadow-integration
Drop Shadow (level 2)
X: 0px
Blur: 0px
Y: 0px
Spread: 1px
ironside-gray-300
Inner Shadow
X: 0px
Blur: 0px
Y: 1px
Spread: 0px
white
Drop Shadow (level 1)
X: 0px
Blur: 0px
Y: 2px
Spread: 0px
white
shadow-line
Inner Shadow
X: 0px
Blur: 0px
Y: 1px
Spread: 0px
white
Box Shadow
shadow-xs
Drop Shadow
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
ironside-gray-950/5
shadow-sm
Drop Shadow (level 2)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
ironside-gray-950/5
Drop Shadow (level 1)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
ironside-gray-950/3
shadow-md
Drop Shadow (level 2)
X: 0px
Blur: 8px
Y: 4px
Spread: -2px
ironside-gray-950/5
Drop Shadow (level 1)
X: 0px
Blur: 4px
Y: 2px
Spread: -2px
ironside-gray-950/5
shadow-lg
Drop Shadow (level 2)
X: 0px
Blur: 18px
Y: 12px
Spread: -6px
ironside-gray-950/5
Drop Shadow (level 1)
X: 0px
Blur: 8px
Y: 4px
Spread: -4px
ironside-gray-950/5
shadow-xl
Drop Shadow (level 2)
X: 0px
Blur: 22px
Y: 18px
Spread: -4px
ironside-gray-950/5
Drop Shadow (level 1)
X: 0px
Blur: 10px
Y: 8px
Spread: -6px
ironside-gray-950/5
shadow-2xl
Drop Shadow
X: 0px
Blur: 46px
Y: 24px
Spread: -10px
ironside-gray-950/10
Box Shadow / Brand
shadow-brand-xs
Drop Shadow
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
crusta-600/30
shadow-brand-sm
Drop Shadow (level 2)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
crusta-600/30
Drop Shadow (level 1)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
crusta-600/20
shadow-brand-md
Drop Shadow (level 2)
X: 0px
Blur: 8px
Y: 4px
Spread: -2px
crusta-600/30
Drop Shadow (level 1)
X: 0px
Blur: 4px
Y: 2px
Spread: -2px
crusta-600/20
shadow-brand-lg
Drop Shadow (level 2)
X: 0px
Blur: 18px
Y: 12px
Spread: -6px
crusta-600/30
Drop Shadow (level 1)
X: 0px
Blur: 8px
Y: 4px
Spread: -4px
crusta-600/20
shadow-brand-xl
Drop Shadow (level 2)
X: 0px
Blur: 22px
Y: 18px
Spread: -4px
crusta-600/30
Drop Shadow (level 1)
X: 0px
Blur: 10px
Y: 8px
Spread: -6px
crusta-600/20
shadow-brand-2xl
Drop Shadow
X: 0px
Blur: 46px
Y: 24px
Spread: -10px
crusta-600/40
Box Shadow / Accent
shadow-accent-xs
Drop Shadow
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
keppel-600/30
shadow-accent-sm
Drop Shadow (level 2)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
keppel-600/30
Drop Shadow (level 1)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
keppel-600/20
shadow-accent-md
Drop Shadow (level 2)
X: 0px
Blur: 8px
Y: 4px
Spread: -2px
keppel-600/30
Drop Shadow (level 1)
X: 0px
Blur: 4px
Y: 2px
Spread: -2px
keppel-600/20
shadow-accent-lg
Drop Shadow (level 2)
X: 0px
Blur: 18px
Y: 12px
Spread: -6px
keppel-600/30
Drop Shadow (level 1)
X: 0px
Blur: 8px
Y: 4px
Spread: -4px
keppel-600/20
shadow-accent-xl
Drop Shadow (level 2)
X: 0px
Blur: 22px
Y: 18px
Spread: -4px
keppel-600/30
Drop Shadow (level 1)
X: 0px
Blur: 10px
Y: 8px
Spread: -6px
keppel-600/20
shadow-accent-2xl
Drop Shadow
X: 0px
Blur: 46px
Y: 24px
Spread: -10px
keppel-600/40
Box Shadow / Success
shadow-success-xs
Drop Shadow
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
emerald-600/30
shadow-success-sm
Drop Shadow (level 2)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
emerald-600/30
Drop Shadow (level 1)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
emerald-600/20
shadow-success-md
Drop Shadow (level 2)
X: 0px
Blur: 8px
Y: 4px
Spread: -2px
emerald-600/30
Drop Shadow (level 1)
X: 0px
Blur: 4px
Y: 2px
Spread: -2px
emerald-600/20
shadow-success-lg
Drop Shadow (level 2)
X: 0px
Blur: 18px
Y: 12px
Spread: -6px
emerald-600/30
Drop Shadow (level 1)
X: 0px
Blur: 8px
Y: 4px
Spread: -4px
emerald-600/20
shadow-success-xl
Drop Shadow (level 2)
X: 0px
Blur: 22px
Y: 18px
Spread: -4px
emerald-600/30
Drop Shadow (level 1)
X: 0px
Blur: 10px
Y: 8px
Spread: -6px
emerald-600/20
shadow-success-2xl
Drop Shadow
X: 0px
Blur: 46px
Y: 24px
Spread: -10px
emerald-600/40
Typography
Inner Shadows