Cynosure Design System

Effects

Effects are Drop Shadows, Inner Shadows and Blur Effects.

CSS Tokens SASS Tokens Style Dictionary Component Types

Shadow Effects

Base 100 (not used)

effect-shadow-base-100-not-used0px 2px 4px rgba(0, 0, 0, .08)

Base 300

effect-shadow-base-3000px 1px 2px rgba(0, 0, 0, .15)

Base 500

effect-shadow-base-5000px 2px 8px rgba(0, 0, 0, .1)

Base 700

effect-shadow-base-7000px 4px 4px rgba(0, 0, 0, .25)

Base 900 (not used)

effect-shadow-base-900-not-used0px 24px 42px rgba(0, 0, 0, .08)