Handoff Design System

Effects

Effects are Drop Shadows, Inner Shadows and Blur Effects.

CSS Tokens SASS Tokens Style Dictionary Component Types

Shadow Effects

Base 100

effect-shadow-base-1000px 2px 4px rgba(0, 0, 0, .08)

Base 300

effect-shadow-base-3000px 3px 6px rgba(0, 0, 0, .08)

Base 500

effect-shadow-base-5000px 6px 12px rgba(0, 0, 0, .08)

Base 700

effect-shadow-base-7000px 12px 24px rgba(0, 0, 0, .08)

Base 900

effect-shadow-base-9000px 24px 42px rgba(0, 0, 0, .08)