Backgrounds
Background treatments and styles, to shape page areas and highlight particular types of content
Background colors and treatments used consistently across the design system.
Content background colors
Banding
Token: $sds-page-section-full-background-color
Hex code: #f2f2f2
Usage: Used for banded sections as described in Page Sections.
Sponsored
Token: $sds-color-shade-black
Hex code: #212121
Usage: Default ad background, which can be replaced or overlayed with a photo.
Marketing
Token: $sds-color-brand
Hex code: #532380
Usage: Often used for internal marketing campaigns or branded messaging, these sections would often include links or promotional text pointing toward our own products.
Forms
Token: $sds-color-shade-very-light-gray
Hex code: #f2f2f2
Usage: All forms (or most, at least) should live on this background, visually separating them from non-form content.
Overlays
Overlays are used to partially obscure content when focus is being directed elsewhere.
Gradients
Matchmaker duotone
Tokens: linear-gradient(-90deg, $sds-color-brand-accent 0%, $sds-color-brand 100%);
Values: #532380, #00BFDE
Usage: Representing the matchmaker branding, this is used in small strips as separators, or for matchmaker content backgrounds.