Shadows

Component Usage

The design system maps specific shadow levels to component categories:

Shadow	Components
`shadow-0`	Flat elements, disabled states, mobile resets
`shadow-1`	Buttons (rest state), form inputs, subtle UI
`shadow-2`	Cards, containers, default elevation
`shadow-3`	Toasts, elevated cards, hover states
`shadow-4`	Dropdowns, popovers, tooltips, context menus
`shadow-5`	Dialogs, drawers, modal overlays
`shadow-6`	Full-screen overlays, maximum emphasis
`shadow-inner`	Inset containers, recessed surfaces

CSS Variables

All shadow tokens are available as CSS custom properties:

/* Shadow definitions */
var(--cn-shadow-0)      /* none */
var(--cn-shadow-1)      /* subtle */
var(--cn-shadow-2)      /* default */
var(--cn-shadow-3)      /* medium */
var(--cn-shadow-4)      /* prominent */
var(--cn-shadow-5)      /* strong */
var(--cn-shadow-6)      /* maximum */
var(--cn-shadow-inner)  /* inset */

/* Shadow colors (for custom shadows) */
var(--cn-shadow-color-0)
var(--cn-shadow-color-1)
/* ... through shadow-color-6 and shadow-color-inner */

Tailwind Utilities

Use the shadow-cn-{level} utilities in Tailwind:

<div className="shadow-cn-2">Default card shadow</div>
<div className="shadow-cn-4">Dropdown shadow</div>
<div className="shadow-cn-inner">Inset shadow</div>
<div className="shadow-cn-none">No shadow</div>

{/* Combine with hover for interactive elevation */}
<div className="shadow-cn-2 hover:shadow-cn-4 transition-shadow">
  Elevates on hover
</div>

Token Architecture

Each shadow level is composed of two parts:

shadow-color.{n} — a color token with an alpha modifier applied in LCH color space
shadow.{n} — a boxShadow token referencing shadow-color.{n} with offset/blur/spread values

This separation means shadow geometry stays constant across themes, while shadow intensity adapts automatically.

Token	Light	Dark
`shadow-color.0`	`gray.600` / alpha `0`	`pure.black` / alpha `0`
`shadow-color.1`	`gray.600` / alpha `0.13`	`pure.black` / alpha `0.6`
`shadow-color.2`	`gray.600` / alpha `0.13`	`pure.black` / alpha `0.6`
`shadow-color.3`	`gray.600` / alpha `0.08`	`pure.black` / alpha `0.5`
`shadow-color.4`	`gray.600` / alpha `0.08`	`pure.black` / alpha `0.5`
`shadow-color.5`	`gray.600` / alpha `0.08`	`pure.black` / alpha `0.5`
`shadow-color.6`	`gray.600` / alpha `0.10`	`pure.black` / alpha `0.6`
`shadow-color.inner`	`pure.black` / alpha `0.15`	`pure.black` / alpha `0.6`

Elevation Scale

Seven levels (0–6) plus an inner shadow provide a complete elevation vocabulary.

Shadow Geometry

Each level defines specific offset, blur, and spread values. Levels 2–5 use dual-layer shadows (two box-shadow values) for more natural depth.

Level	CSS Value	Layers
`shadow-0`	`0 0 0 0`	Single
`shadow-1`	`0 1px 2px 0`	Single
`shadow-2`	`0 1px 3px 0` , `0 1px 15px -1px`	Dual
`shadow-3`	`0 4px 6px -1px` , `0 2px 8px -2px`	Dual
`shadow-4`	`0 10px 15px -3px` , `0 4px 8px -4px`	Dual
`shadow-5`	`0 20px 25px -5px` , `0 8px 10px -6px`	Dual
`shadow-6`	`0 25px 50px -12px`	Single
`shadow-inner`	`inset 0 0 4.5px 0`	Single (inset)