All collections
1 Color mode
306 custom properties · v0.4.3
Sections / Default / Background
13bg-primary
#ffffffbg-secondary
#f1f3f7bg-secondary-hover
#f8f9fbbg-tertiary
#dfe1e6bg-solid
#36393cbg-brand
#fde9eabg-brand-solid
#db1a24bg-overlay
#36393cbg-subtle
#f8f9fbbg-product-visual
#f1f3f7bg-product-visual_hover
#f8f9fbbg-gradient-fade
rgba(255, 255, 255, 0)bg-promotions
#f9ba1aSections / Default / Text
9text-primary
rgba(21, 21, 22, 0.8)text-secondary
rgba(21, 21, 22, 0.6)text-tertiary
rgba(21, 21, 22, 0.5)text-quaternary
rgba(21, 21, 22, 0.2)text-solid
#fffffftext-solid-secondary
rgba(255, 255, 255, 0.7)text-brand-primary
#c30b15text-brand-secondary
#db1a24text-brand-hi-contrast
#790005Sections / Default / Button / Primary
6bg
#db1a24bg-hover
#c30b15bg-disabled
rgba(21, 21, 22, 0.1)fg
#fffffffg-hover
#fffffffg-disabled
rgba(21, 21, 22, 0.4)Sections / Default / Button / Secondary Brand
6bg
rgba(255, 255, 255, 0.02)bg-hover
#fde9eafg
#c30b15fg-hover
#970109border
#fa5860border-hover
#fa5860Sections / Default / Button / Secondary Subtle
14bg
#ffffffbg-hover
rgba(21, 21, 22, 0.02)bg-selected
rgba(21, 21, 22, 0.05)bg-active
rgba(21, 21, 22, 0.5)fg
rgba(21, 21, 22, 0.7)fg-secondary
rgba(21, 21, 22, 0.4)fg-tertiary
rgba(21, 21, 22, 0.2)fg-active
#fffffffg-hover
rgba(21, 21, 22, 0.8)fg-secondary-hover
rgba(21, 21, 22, 0.6)fg-selected
rgba(21, 21, 22, 0.8)border
rgba(21, 21, 22, 0.2)border-active
rgba(255, 255, 255, 0.2)border-hover
rgba(21, 21, 22, 0.3)Sections / Default / Button / Tertiary
6bg
rgba(255, 255, 255, 0.02)bg-hover
rgba(21, 21, 22, 0.05)fg
rgba(21, 21, 22, 0.5)fg-hover
rgba(21, 21, 22, 0.6)border
rgba(21, 21, 22, 0.2)border-button-tertiary-hover
rgba(21, 21, 22, 0.4)Sections / Default / Button
1focus-ring
#fcbfc2Sections / Default / Foreground
6fg-primary
rgba(21, 21, 22, 0.8)fg-secondary
rgba(21, 21, 22, 0.6)fg-tertiary
rgba(21, 21, 22, 0.5)fg-quaternary
rgba(21, 21, 22, 0.2)fg-brand
#db1a24fg-promotions
rgba(21, 21, 22, 0.8)Sections / Default / Border
5border-primary
#b4babfborder-solid
#ffffffborder-secondary
#dfe1e6border-secondary-hover
#b4babfborder-tertiary
#f1f3f7Sections / Default / Input
25fg-primary
rgba(21, 21, 22, 0.8)fg-primary-disabled
rgba(21, 21, 22, 0.2)fg-secondary
rgba(21, 21, 22, 0.6)fg-secondary-disabled
rgba(21, 21, 22, 0.1)fg-tertiary
rgba(21, 21, 22, 0.4)fg-selected
#fffffffg-placeholder
rgba(21, 21, 22, 0.6)bg-primary
#ffffffbg-secondary
rgba(21, 21, 22, 0.1)bg-tertiary
rgba(21, 21, 22, 0.05)bg-selected
#db1a24bg-selected-hover
#c30b15bg-disabled
rgba(21, 21, 22, 0.02)border-primary
rgba(21, 21, 22, 0.2)border-brand-selected
#db1a24border-brand-focus
#fcbfc2border-error-focus
#fcbfc2border-success-focus
#7be2c2border-warning-focus
#ffffb5border-primary-hover
rgba(21, 21, 22, 0.4)border-primary-disabled
rgba(21, 21, 22, 0.2)border-secondary
rgba(21, 21, 22, 0.1)border-secondary-hover
rgba(21, 21, 22, 0.2)border-secondary-active
rgba(21, 21, 22, 0.3)border-secondary-disabled
rgba(21, 21, 22, 0.05)Sections / Default / Tabs / Default
6fg
rgba(21, 21, 22, 0.4)fg-selected
#c30b15fg-hover
#c30b15bg
rgba(255, 255, 255, 0)bg-selected
#fef9f9bg-hover
#fef9f9Sections / Default / Tabs / Subtle
8fg
rgba(21, 21, 22, 0.4)fg-selected
rgba(21, 21, 22, 0.8)fg-hover
rgba(21, 21, 22, 0.6)bg
rgba(21, 21, 22, 0)bg-selected
rgba(21, 21, 22, 0.05)bg-secondary-selected
rgba(21, 21, 22, 0.1)bg-hover
rgba(21, 21, 22, 0.02)bg-solid
#f8f9fbSections / Default / Tabs / Line
6fg
rgba(21, 21, 22, 0.4)fg-selected
#c30b15fg-hover
#c30b15bg
rgba(255, 255, 255, 0)border-hover
#db1a24border-selected
#db1a24Sections / Branch / Background
4bg-primary
#db1a24bg-secondary
#76013abg-accent
#ffa6ebbg-subtle
#fde9eaSections / Branch / Text
5text-primary
#fffffftext-secondary
rgba(255, 255, 255, 0.7)text-tertiary
rgba(255, 255, 255, 0.5)text-brand-primary
#c30b15text-brand-secondary
#fa5860Sections / Branch / Foreground
5fg-primary
#fffffffg-secondary
rgba(255, 255, 255, 0.7)fg-tertiary
rgba(255, 255, 255, 0.5)fg-brand
#db1a24fg-brand-secondary
#fa5860Sections / Branch / Button / Primary
6bg
#ffffffbg-hover
#fde9eabg-disabled
rgba(255, 255, 255, 0.4)fg
#c30b15fg-hover
#970109fg-disabled
rgba(21, 21, 22, 0.4)Sections / Branch / Button / Secondary Brand
6bg
rgba(21, 21, 22, 0.05)bg-hover
rgba(255, 255, 255, 0.1)fg-brand
#fde9eafg-hover
#fcbfc2border-brand
#fcbfc2border-hover
#fa5860Sections / Branch / Button / Secondary Subtle
9bg
rgba(21, 21, 22, 0.02)bg-hover
rgba(255, 255, 255, 0.1)bg-active
rgba(21, 21, 22, 0.6)fg-subtle
rgba(255, 255, 255, 0.8)fg-hover
#fffffffg-active
#ffffffborder-subtle
rgba(255, 255, 255, 0.6)border-hover
rgba(255, 255, 255, 0.6)border-active
rgba(255, 255, 255, 0.05)Sections / Branch / Button / Tertiary
6bg
rgba(21, 21, 22, 0.02)bg-hover
rgba(255, 255, 255, 0.1)fg-tertiary
rgba(255, 255, 255, 0.7)fg-hover
rgba(255, 255, 255, 0.8)border-tertiary
rgba(255, 255, 255, 0.5)border-hover
rgba(255, 255, 255, 0.7)Sections / Branch / Border
4border-primary
rgba(255, 255, 255, 0.4)border-secondary
rgba(255, 255, 255, 0.2)border-tertiary
rgba(255, 255, 255, 0.1)border-solid
#c30b15Semantic / Background
12bg-error-primary
#fef9f9bg-error-secondary
#fb8f94bg-error-solid
#c30b15bg-warning-primary
#fffef4bg-warning-secondary
#ffde4abg-warning-solid
#7d5407bg-success-primary
#f5fdfabg-success-secondary
#00c88abg-success-solid
#00704dbg-neutral-primary
#f8f9fbbg-neutral-secondary
#b4babfbg-neutral-solid
#5c6266Semantic / Button
17bg-button-error-primary
#c30b15bg-button-error-primary-hover
#970109fg-button-error-primary
#fffffffg-button-error-primary-hover
#ffffffbg-button-error-secondary
#ffffffbg-button-error-secondary-hover
#fde9eafg-button-error-secondary
#970109fg-button-error-secondary-hover
#790005border-button-error-secondary
#fb8f94border-button-success-secondary
#00c88aborder-button-warning-secondary
#fff372border-button-error-secondary-hover
#fa5860border-button-success-secondary-hover
#00a774border-button-warning-secondary-hover
#ffde4afocus-ring-error
#db1a24focus-ring-success
#00875dfocus-ring-warning
#f9ba1aSemantic / Foreground
9fg-error-primary
#970109fg-error-secondary
#db1a24fg-warning-primary
#7d5407fg-warning-secondary
#f9ba1afg-success-primary
#0e5341fg-success-secondary
#00875dfg-neutral-primary
#464a4dfg-neutral-secondary
#70787dfg-neutral-tertiary
#dfe1e6Semantic / Border
7border-error
#fde9eaborder-error-solid
#db1a24border-warning
#ffffb5border-warning-solid
#f9ba1aborder-success
#d1f5eaborder-success-solid
#00704dborder-neutral
#f1f3f7Utility / Alpha
26alpha-white-0
rgba(255, 255, 255, 0)alpha-white-2
rgba(255, 255, 255, 0.02)alpha-white-5
rgba(255, 255, 255, 0.05)alpha-white-10
rgba(255, 255, 255, 0.1)alpha-white-20
rgba(255, 255, 255, 0.2)alpha-white-30
rgba(255, 255, 255, 0.3)alpha-white-40
rgba(255, 255, 255, 0.4)alpha-white-50
rgba(255, 255, 255, 0.5)alpha-white-60
rgba(255, 255, 255, 0.6)alpha-white-70
rgba(255, 255, 255, 0.7)alpha-white-80
rgba(255, 255, 255, 0.8)alpha-white-90
rgba(255, 255, 255, 0.9)alpha-white-100
#ffffffalpha-black-0
rgba(21, 21, 22, 0)alpha-black-2
rgba(21, 21, 22, 0.02)alpha-black-5
rgba(21, 21, 22, 0.05)alpha-black-10
rgba(21, 21, 22, 0.1)alpha-black-20
rgba(21, 21, 22, 0.2)alpha-black-30
rgba(21, 21, 22, 0.3)alpha-black-40
rgba(21, 21, 22, 0.4)alpha-black-50
rgba(21, 21, 22, 0.5)alpha-black-60
rgba(21, 21, 22, 0.6)alpha-black-70
rgba(21, 21, 22, 0.7)alpha-black-80
rgba(21, 21, 22, 0.8)alpha-black-90
rgba(21, 21, 22, 0.9)alpha-black-100
#151516Utility / Gray
12utility-gray-0
#ffffffutility-gray-50
#f8f9fbutility-gray-100
#f1f3f7utility-gray-200
#dfe1e6utility-gray-300
#b4babfutility-gray-400
#9fa8b0utility-gray-500
#70787dutility-gray-600
#5c6266utility-gray-700
#464a4dutility-gray-800
#36393cutility-gray-900
#282a2dutility-gray-1000
#151516Utility / Brand
11utility-brand-50
#fef9f9utility-brand-100
#fde9eautility-brand-200
#fcbfc2utility-brand-300
#fb8f94utility-brand-400
#fa5860utility-brand-500
#db1a24utility-brand-600
#c30b15utility-brand-700
#970109utility-brand-800
#790005utility-brand-900
#5c0003utility-brand-950
#4d0003Utility / Error
8utility-error-50
#fef9f9utility-error-100
#fde9eautility-error-200
#fcbfc2utility-error-300
#fb8f94utility-error-400
#fa5860utility-error-500
#db1a24utility-error-600
#c30b15utility-error-700
#970109Utility / Warning
8utility-warning-50
#fffef4utility-warning-100
#ffffe4utility-warning-200
#ffffb5utility-warning-300
#fff372utility-warning-400
#ffde4autility-warning-500
#f9ba1autility-warning-600
#b77d00utility-warning-700
#7d5407Utility / Success
8utility-success-50
#f5fdfautility-success-100
#d1f5eautility-success-200
#7be2c2utility-success-300
#00c88autility-success-400
#00a774utility-success-500
#00875dutility-success-600
#00704dutility-success-700
#0e5341Utility / Green
8utility-green-50
#f5fdfautility-green-100
#d1f5eautility-green-200
#7be2c2utility-green-300
#00c88autility-green-400
#00a774utility-green-500
#00875dutility-green-600
#00704dutility-green-700
#0e5341Utility / Blue
8utility-blue-50
#f9fcfeutility-blue-100
#e1f0f9utility-blue-200
#aad4eeutility-blue-300
#6fb6e1utility-blue-400
#3c9cd7utility-blue-500
#237ab8utility-blue-600
#1e5da6utility-blue-700
#224599Utility / Orange
8utility-orange-50
#fffaf6utility-orange-100
#ffe9dbutility-orange-200
#ffc299utility-orange-300
#ff9248utility-orange-400
#ff6701utility-orange-500
#c75101utility-orange-600
#a54201utility-orange-700
#7d3200Utility / Yellow
8utility-yellow-50
#fffef4utility-yellow-100
#ffffe4utility-yellow-200
#ffffb5utility-yellow-300
#fff372utility-yellow-400
#ffde4autility-yellow-500
#f9ba1autility-yellow-600
#b77d00utility-yellow-700
#7d5407