Shadows #

Shadows create a consistent depth system throughout the design tokens.
They define how elements are layered — from subtle elevation on small components to strong depth for modals and overlays.

All shadows use the --afp-color-shadow token to ensure a unified appearance across the system.

Shadow Color System #

All shadow tokens apply a shared color treatment using:

color-mix(in oklab, var(--afp-color-shadow) 60%, transparent)

This mix defines the shadow color for all elevation levels. In the table below, the Default column lists only the geometric values (offset, blur, spread). The final computed shadow color is applied consistently through the shared mix defined above.

Custom Properties #

These properties use rem units in order to scale proportionately with the root font size.