Introduction

The thesis

Interfaces describe state with color, icons, and text — and then decorate with shadows. Emboss does the reverse: elevation is the state machine. Things you can press rest raised off the surface. Pressing one physically depresses it to flush. Inputs are recessed wells that receive. Selected things latch into the chassis. Overlays float above the work surface with real penumbra.

Every shadow in the system derives from a single global light source — two CSS variables on :root. Move the light and the whole interface re-lights, in pure CSS, with no re-render. That is not a party trick; it is the proof that depth here is a system, not a style.

Depth never works alone. Color, glyphs, and ARIA state carry every meaning in parallel, contrast is enforced by automated tests in both color schemes, and the machined 1px edge on every recipe keeps the look crisp where soft-shadow styles go blurry.

What ships

A growing set of components — actions, forms, hardware-grade controls, display, navigation, overlays, and AI primitives — plus the token system, spring presets, and hooks they share. Components are distributed as source through a registry: you run one command, the TypeScript lands in your repo, and you own it from there. There is no runtime package to depend on and no version to chase.

Start with Installation, then read Depth & Light to learn the grammar the components speak.

Requirements

React 19 and Tailwind CSS v4. Components use Base UI primitives for accessibility-critical behavior and motion where real spring state matters; both arrive automatically with the first component you install.