Shadows

Use shadows to create a sense of depth and hierarchy.

Name	Value	Example
`.shadow-sm`	`0 1px 2px 0 rgb(15 23 42 / 0.05)`
`.shadow`	`0 1px 3px 0 rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.1)`
`.shadow-md`	`0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1)`
`.shadow-lg`	`0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1)`
`.shadow-xl`	`0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1)`
`.shadow-2xl`	`0 25px 50px -12px rgb(15 23 42 / 0.25)`
`.shadow-inner`	`inset 0 2px 4px 0 rgb(15 23 42 / 0.05)`
`.shadow-none`	`none`

Usage in Figma

Shadows are published from Stylus Design System and should be available by default in the Scribe workspace. Select the hexagon icon in applicable fields to apply shadow tokens.

Usage in code

Apply shadows using the shadow-{size} utility classes.

<Component className="shadow-sm" /> // Small shadow
<Component className="shadow-md" /> // Medium shadow
<Component className="shadow-lg" /> // Large shadow

For more information, see the Tailwind documentation.