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
`shadow-cn-nav-rail`	App shell navigation rail panel
`shadow-cn-chat-rail`	App shell chat panel (left of main content)
`shadow-cn-chat-rail-mirror`	App shell chat panel (right of main content)
`shadow-cn-pipeline-studio-page-header`	Pipelines Studio page header chrome

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 */

/* App shell rail shadows (component tokens) */
var(--cn-comp-shadow-nav-rail)
var(--cn-comp-shadow-chat-rail)
var(--cn-comp-shadow-chat-rail-mirror)
var(--cn-comp-shadow-pipeline-studio-page-header)

/* 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.

App shell rail shadows

Component shadows for the unified app shell navigation and chat panels. Values are theme-aware (light: subtle lift; dark: 0 7px 8px on #08090d at 80% alpha).

Use shadow-cn-nav-rail on the nav column shell and shadow-cn-chat-rail / shadow-cn-chat-rail-mirror on the chat panel shell based on chat position. Do not apply to seam overlays or resize handles.

Component shadow for the Pipelines Studio top header bar (breadcrumb + Studio / Executions tabs). Sourced from the 3dot0Vision prototype (--ds-shadow-2).

Use shadow-cn-pipeline-studio-page-header on the header shell. Do not apply on the Pipelines list view (header is flat there).

Mode	Value
Light	`0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.08)`
Dark	`0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.5)`

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)