Visuals

Visuals

Title
colorTitle
Gray 700
Color for titles (primary non-interactive text elements).
Title Placeholder
colorTitlePlaceholder
Gray 300
Color for title placeholders (e.g. text field input placeholder).
Subtitle
colorSubtitle
Gray 400
Color for subtitles (secondary non-interactive text elements).
Heading
colorHeading
Gray 600
Color for headings (titles of lists or content sections).
Action
colorAction
#404C63
Color for most interactive elements - buttons, text, and icons. Each product should override this value.
Action Translucent
colorActionTranslucent
System Action, 0.08
Translucent color for backgrounds of most translucent actions - to be used with Action color. Each product should override this value.
Action Disabled
colorActionDisabled
Gray 400, 0.48
Disabled action color - to be used when action or tint color is disabled.
Action Translucent Disabled
colorActionTranslucentDisabled
Gray 400, 0.08
Disabled translucent action color.
Tint
colorTint
#5085EB
Color for primary actions and CTAs. Each product should override this value.
Tint Translucent
colorTintTranslucent
System Tint, 0.16
Translucent color for backgrounds of primary translucent actions and CTAs - to be used with Tint color. Each product should override this.
Background Primary
colorBackgroundPrimary
White
Color for top-level backgrounds.
Background Secondary
colorBackgroundSecondary
Gray 100
Colors for mid-level backgrounds.
Background Tertiary
colorBackgroundTertiary
Gray 200
Colors for lowest-level backgrounds.
Separator
colorSeparator
Black 0.08
Color for separators and borders.
Overlay
colorOverlay
Black 0.4
Color for overlays - backgrounds behind dialogs and sheets.
Destructive
colorDestructive
#E45A4F
Color for actions that result in deletion / removal.
Destructive Translucent
colorDestructiveTranslucent
Destructive, 0.16
Translucent color for actions that result in deletion / removal.

Static Colors

White
colorWhite
#FFFFFF
Gray 100
colorGray100
#F1F1F1
Gray 200
colorGray200
#E5E5E6
Gray 300
colorGray300
#C4C4C4
Gray 400
colorGray400
#98989A
Gray 500
colorGray500
#636367
Gray 600
colorGray600
#3B3B40
Gray 700
colorGray700
#1F1F24
Gray 800
colorGray800
#1D1D20
Gray 900
colorGray900
#111112
Black
colorBlack
#000000
Clear
colorClear