Fundamentos

Sombras e movimento

Sombras frias e curtas, sempre com um anel de 1px. A sheet simula uma folha sobre a mesa e a stamp é um entalhe para áreas de conferência. No escuro, as mesmas classes trocam de valor sozinhas.

Sombras

.shadows-boxshadow-xs

.shadows-boxshadow-sm

.shadows-boxshadow-base

.shadows-boxshadow-xl

.shadows-boxshadow-sheet

.shadows-boxshadow-stamp

Movimento

Dois gestos próprios: .motion-stamp, o carimbo, entra maior e levemente girado; .motion-ink revela a assinatura da esquerda para a direita. Os dois respeitam prefers-reduced-motion.

SeloMarina A. Costa

--duration-quick120ms

--duration-base180ms

--duration-calm260ms

--duration-stamp420ms

--duration-stroke700ms

--ease-standardcubic-bezier(0.3, 0, 0.2, 1)

--ease-entercubic-bezier(0, 0, 0.2, 1)

--ease-stampcubic-bezier(0.34, 1.56, 0.64, 1)

--ease-pencubic-bezier(0.65, 0, 0.35, 1)