Effect tokens er en type design tokens som brukes til å standardisere visuelle effekter i et designsystem. De dekker alt fra skygger og overganger til uskarphet og animasjoner, og bidrar til å skape dybde, bevegelse og et mer dynamisk brukergrensesnitt.

Effect tokens kan omfatte:

• Skygger (box-shadow): Definerer skyggeeffekter på komponenter, for eksempel shadow.card.default med verdien 0px 4px 8px rgba(0, 0, 0, 0.1). Dette kan gi dybde og separasjon mellom elementer.
• Uskarphet (blur): Brukes for å skape visuelle effekter som bakgrunnsuskarphet.
• Overganger (transition): Angir hvordan og hvor raskt en stilendring skal skje.
• Animasjoner (animation): Definerer mer komplekse bevegelser, som animation.spinner med verdien "spin 1s linear infinite".
• Gjennomsiktighet (opacity): Kontrollerer hvor gjennomsiktige elementer skal være, som opacity.low med verdien "25%".