All collections
Color
315 custom properties · v0.7.3
bg-primary
#ffffffbranch
12bg-primary
#db1a24bg-secondary
#76013abg-accent
#ffa6ebbg-subtle
#fde9eatext-primary
#fffffftext-secondary
rgba(255, 255, 255, 0.7)text-tertiary
rgba(255, 255, 255, 0.5)fg-primary
#fffffffg-secondary
rgba(255, 255, 255, 0.7)fg-tertiary
rgba(255, 255, 255, 0.5)fg-brand
#db1a24fg-brand-secondary
#fa5860branch / button / primary
6bg
#ffffffbg-hover
#fde9eabg-disabled
rgba(255, 255, 255, 0.4)fg
#c30b15fg-hover
#970109fg-disabled
rgba(21, 21, 22, 0.4)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
#fa5860branch / 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)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)branch
6border-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
#c30b15text-brand-primary
#c30b15text-brand-secondary
#fa5860button / primary
6bg
#db1a24bg-hover
#c30b15bg-disabled
rgba(21, 21, 22, 0.1)fg
#fffffffg-hover
#fffffffg-disabled
rgba(21, 21, 22, 0.4)button / secondary-brand
6bg
rgba(255, 255, 255, 0.02)bg-hover
#fde9eafg
#c30b15fg-hover
#970109border
#fa5860border-hover
#fa5860button / 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)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)button
18focus-ring
#fcbfc2bg-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
#fff08aborder-button-error-secondary-hover
#fa5860border-button-success-secondary-hover
#00a774border-button-warning-secondary-hover
#ffe95efocus-ring-error
#fb8f94focus-ring-success
#00c88afocus-ring-warning
#fff08atext-primary
rgba(21, 21, 22, 0.8)bg-secondary
#f1f3f7bg-secondary-hover
#f8f9fbfg-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)border-primary
#b4babfborder-solid
#ffffffborder-secondary
#dfe1e6border-secondary-hover
#b4babfborder-tertiary
#f1f3f7text-secondary
rgba(21, 21, 22, 0.6)bg-tertiary
#dfe1e6text-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)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
#fff6b8border-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)bg-error-primary
#fef9f9utility
105alpha-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)gray-0
#ffffffalpha-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
#151516gray-50
#f8f9fbgray-100
#f1f3f7gray-200
#dfe1e6gray-300
#b4babfgray-400
#9fa8b0gray-500
#70787dgray-600
#5c6266gray-700
#464a4dgray-800
#36393cgray-900
#282a2dgray-1000
#151516brand-50
#fef9f9brand-100
#fde9eabrand-200
#fcbfc2brand-300
#fb8f94brand-400
#fa5860brand-500
#db1a24brand-600
#c30b15brand-700
#970109brand-800
#790005brand-900
#5c0003brand-950
#4d0003error-50
#fef9f9error-100
#fde9eaerror-200
#fcbfc2error-300
#fb8f94error-400
#fa5860error-500
#db1a24error-600
#c30b15error-700
#970109warning-50
#fffdf3warning-100
#fffbe0warning-200
#fff6b8warning-300
#fff08awarning-400
#ffe95ewarning-500
#ffe137warning-600
#d9be17warning-700
#ad9812success-50
#f5fdfasuccess-100
#d1f5easuccess-200
#7be2c2success-300
#00c88asuccess-400
#00a774success-500
#00875dsuccess-600
#00704dsuccess-700
#0e5341green-50
#f5fdfagreen-100
#d1f5eagreen-200
#7be2c2green-300
#00c88agreen-400
#00a774green-500
#00875dgreen-600
#00704dgreen-700
#0e5341blue-50
#f9fcfeblue-100
#e1f0f9blue-200
#aad4eeblue-300
#6fb6e1blue-400
#3c9cd7blue-500
#237ab8blue-600
#1e5da6blue-700
#224599orange-50
#fffaf6orange-100
#ffe9dborange-200
#ffc299orange-300
#ff9248orange-400
#ff6701orange-500
#c75101orange-600
#a54201orange-700
#7d3200yellow-50
#fffdf3yellow-100
#fffbe0yellow-200
#fff6b8yellow-300
#fff08ayellow-400
#ffe95eyellow-500
#ffe137yellow-600
#d9be17yellow-700
#ad9812bg-error-secondary
#fb8f94bg-error-solid
#c30b15bg-warning-primary
#fffdf3bg-warning-secondary
#ffe95ebg-warning-solid
#ad9812bg-success-primary
#f5fdfabg-success-secondary
#00c88abg-success-solid
#00704dbg-neutral-primary
#f8f9fbbg-neutral-secondary
#b4babfbg-neutral-solid
#5c6266fg-error-primary
#970109fg-error-secondary
#db1a24border-error
#fde9eaborder-error-solid
#db1a24border-warning
#fff6b8border-warning-solid
#ffe137border-success
#d1f5eaborder-success-solid
#00704dborder-neutral
#f1f3f7fg-warning-primary
#ad9812fg-warning-secondary
#ffe137fg-success-primary
#0e5341fg-success-secondary
#00875dfg-neutral-primary
#464a4dfg-neutral-secondary
#70787dfg-neutral-tertiary
#dfe1e6bg-solid
#36393cbg-brand
#fde9eabg-brand-solid
#db1a24bg-overlay
#36393ctext-brand-primary
#c30b15text-brand-secondary
#db1a24text-brand-hi-contrast
#790005tabs / default
6fg
rgba(21, 21, 22, 0.4)fg-selected
#c30b15fg-hover
#c30b15bg
rgba(255, 255, 255, 0)bg-selected
#fef9f9bg-hover
#fef9f9tabs / 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
#f8f9fbtabs / line
6fg
rgba(21, 21, 22, 0.4)fg-selected
#c30b15fg-hover
#c30b15bg
rgba(255, 255, 255, 0)border-hover
#db1a24border-selected
#db1a24bg-subtle
#f8f9fbbg-product-visual
#f1f3f7bg-product-visual-hover
#f8f9fbbg-gradient-fade
rgba(255, 255, 255, 0)bg-promotions
#ffe137shadow
9xs
rgba(10, 13, 18, 0.05)xs-skeumorphic
rgba(10, 13, 18, 0.05)xs-skeumorphic-border
rgba(10, 13, 18, 0.18)sm
rgba(10, 13, 18, 0.1)md
rgba(10, 13, 18, 0.1)lg
rgba(10, 13, 18, 0.08)xl
rgba(10, 13, 18, 0.03)2xl
rgba(10, 13, 18, 0.04)3xl
rgba(10, 13, 18, 0.14)