v33.5.0
Tools
Design Tokens
Tokens are design decisions stored inside variables
| Token | Value |
|---|---|
breakpoints | |
breakpoints.global | |
breakpoints.global.mobile | 599 |
breakpoints.global.tablet | |
breakpoints.global.tablet.portrait | 899 |
breakpoints.global.tablet.landscape | 1199 |
breakpoints.global.desktop | |
breakpoints.global.desktop.normal | 1535 |
breakpoints.global.desktop.large | 2000 |
color | |
color.global | |
color.global.background | |
color.global.background.input | |
color.global.background.input.base | |
color.global.background.input.base.default | #ffffff |
color.global.background.input.base.disabled | #EBECEC |
color.global.background.container | |
color.global.background.container.base | |
color.global.background.container.base.default | #ffffff |
color.global.background.container.base.hover | #EBECEC |
color.global.background.container.brand | |
color.global.background.container.brand.default | #1C2222 |
color.global.background.container.brand.down | #232B2B |
color.global.background.container.transparent | |
color.global.background.container.transparent.default | transparent |
color.global.background.shine | |
color.global.background.shine.primary | |
color.global.background.shine.primary.default | #DEDFDF |
color.global.background.shine.secondary | |
color.global.background.shine.secondary.default | #EBECEC |
color.global.background.feedback | |
color.global.background.feedback.positive | |
color.global.background.feedback.positive.intensity-10 | |
color.global.background.feedback.positive.intensity-10.default | #EBF7F6 |
color.global.background.feedback.positive.intensity-20 | |
color.global.background.feedback.positive.intensity-20.default | #D6EFEC |
color.global.background.feedback.informational | |
color.global.background.feedback.informational.intensity-10 | |
color.global.background.feedback.informational.intensity-10.default | #EAF0F8 |
color.global.background.feedback.informational.intensity-20 | |
color.global.background.feedback.informational.intensity-20.default | #DFE8F4 |
color.global.background.feedback.informational.intensity-30 | |
color.global.background.feedback.informational.intensity-30.default | #C0D1E9 |
color.global.background.feedback.informational.intensity-40 | |
color.global.background.feedback.informational.intensity-40.default | #8BABD6 |
color.global.background.feedback.informational.intensity-60 | |
color.global.background.feedback.informational.intensity-60.default | #3873C1 |
color.global.background.feedback.informational.intensity-70 | |
color.global.background.feedback.informational.intensity-70.default | #285DA3 |
color.global.background.feedback.informational.intensity-90 | |
color.global.background.feedback.informational.intensity-90.default | #1F487F |
color.global.background.feedback.negative | |
color.global.background.feedback.negative.intensity-10 | |
color.global.background.feedback.negative.intensity-10.default | #F9E9EC |
color.global.background.feedback.negative.intensity-20 | |
color.global.background.feedback.negative.intensity-20.default | #F4D3D8 |
color.global.background.feedback.negative.intensity-60 | |
color.global.background.feedback.negative.intensity-60.default | #C7223E |
color.global.background.feedback.negative.intensity-70 | |
color.global.background.feedback.negative.intensity-70.default | #B31F38 |
color.global.background.feedback.negative.intensity-80 | |
color.global.background.feedback.negative.intensity-80.default | #9F1B32 |
color.global.background.feedback.notice | |
color.global.background.feedback.notice.intensity-10 | |
color.global.background.feedback.notice.intensity-10.default | #FFEEE8 |
color.global.background.feedback.notice.intensity-20 | |
color.global.background.feedback.notice.intensity-20.default | #FAE5DE |
color.global.background.feedback.pending | |
color.global.background.feedback.pending.intensity-10 | |
color.global.background.feedback.pending.intensity-10.default | #fffef7 |
color.global.background.feedback.pending.intensity-20 | |
color.global.background.feedback.pending.intensity-20.default | #fffced |
color.global.background.feedback.pending.intensity-40 | |
color.global.background.feedback.pending.intensity-40.default | #fcefb6 |
color.global.background.feedback.staff | |
color.global.background.feedback.staff.default | #EFB09C |
color.global.background.feedback.neutral | |
color.global.background.feedback.neutral.intensity-10 | |
color.global.background.feedback.neutral.intensity-10.default | #F4F4F4 |
color.global.background.feedback.neutral.intensity-20 | |
color.global.background.feedback.neutral.intensity-20.default | #EBECEC |
color.global.background.feedback.neutral.intensity-30 | |
color.global.background.feedback.neutral.intensity-30.default | #DEDFDF |
color.global.background.feedback.neutral.intensity-100 | |
color.global.background.feedback.neutral.intensity-100.default | #1C2222 |
color.global.background.equity | |
color.global.background.equity.common | |
color.global.background.equity.common.default | #32B0A0 |
color.global.background.equity.preferred | |
color.global.background.equity.preferred.default | #3873C1 |
color.global.background.equity.convertible | |
color.global.background.equity.convertible.default | #7358b8 |
color.global.background.equity.warrant | |
color.global.background.equity.warrant.default | #ea657f |
color.global.background.equity.option | |
color.global.background.equity.option.default | #A7AAAA |
color.global.background.equity.pool | |
color.global.background.equity.pool.default | #C4C4C4 |
color.global.background.accessory | |
color.global.background.accessory.accent-1 | |
color.global.background.accessory.accent-1.default | #FBF8F7 |
color.global.background.accessory.accent-2 | |
color.global.background.accessory.accent-2.default | #F2F0FB |
color.global.background.accessory.accent-3 | |
color.global.background.accessory.accent-3.default | #EAF0F8 |
color.global.background.accessory.accent-4 | |
color.global.background.accessory.accent-4.default | #F4F4F4 |
color.global.background.cta | |
color.global.background.cta.primary | |
color.global.background.cta.primary.default | #232B2B |
color.global.background.cta.primary.hover | #394040 |
color.global.background.cta.primary.down | #1F487F |
color.global.background.cta.primary.disabled | #DEDFDF |
color.global.background.cta.secondary | |
color.global.background.cta.secondary.default | #ffffff |
color.global.background.cta.secondary.hover | #ffffff |
color.global.background.cta.secondary.down | #ffffff |
color.global.background.cta.secondary.disabled | #ffffff |
color.global.background.cta.danger | |
color.global.background.cta.danger.default | #B31F38 |
color.global.background.cta.danger.hover | #C7223E |
color.global.background.cta.danger.down | #9F1B32 |
color.global.background.cta.danger.disabled | #F4D3D8 |
color.global.border | |
color.global.border.cta | |
color.global.border.cta.primary | |
color.global.border.cta.primary.default | transparent |
color.global.border.cta.primary.hover | transparent |
color.global.border.cta.primary.keyboardFocus | #285DA3 |
color.global.border.cta.secondary | |
color.global.border.cta.secondary.default | #C4C4C4 |
color.global.border.cta.secondary.hover | #394040 |
color.global.border.cta.secondary.down | #1F487F |
color.global.border.cta.danger | |
color.global.border.cta.danger.default | transparent |
color.global.border.cta.danger.hover | transparent |
color.global.border.cta.danger.keyboardFocus | #771425 |
color.global.border.cta.inverse | |
color.global.border.cta.inverse.default | transparent |
color.global.border.cta.inverse.down | #285DA3 |
color.global.border.cta.inverse.keyboardFocus | #285DA3 |
color.global.border.cta.filter | |
color.global.border.cta.filter.default | #C4C4C4 |
color.global.border.cta.filter.hover | #394040 |
color.global.border.cta.filter.down | #1F487F |
color.global.border.cta.filter.active | #1C2222 |
color.global.border.separation | |
color.global.border.separation.weak | |
color.global.border.separation.weak.default | #EBECEC |
color.global.border.separation.regular | |
color.global.border.separation.regular.default | #DEDFDF |
color.global.border.separation.strong | |
color.global.border.separation.strong.default | #C4C4C4 |
color.global.border.input | |
color.global.border.input.base | |
color.global.border.input.base.default | #C4C4C4 |
color.global.border.input.base.hover | #394040 |
color.global.border.input.base.keyboardFocus | #285DA3 |
color.global.border.input.base.disabled | #EBECEC |
color.global.border.input.invalid | |
color.global.border.input.invalid.default | #B31F38 |
color.global.border.input.invalid.hover | #B31F38 |
color.global.border.feedback | |
color.global.border.feedback.positive | |
color.global.border.feedback.positive.intensity-50 | |
color.global.border.feedback.positive.intensity-50.default | #5BC0B3 |
color.global.border.feedback.negative | |
color.global.border.feedback.negative.intensity-30 | |
color.global.border.feedback.negative.intensity-30.default | #E9A7B2 |
color.global.border.feedback.negative.intensity-50 | |
color.global.border.feedback.negative.intensity-50.default | #D24E65 |
color.global.border.feedback.notice | |
color.global.border.feedback.notice.intensity-50 | |
color.global.border.feedback.notice.intensity-50.default | #EA957B |
color.global.border.feedback.pending | |
color.global.border.feedback.pending.intensity-60 | |
color.global.border.feedback.pending.intensity-60.default | #f8d648 |
color.global.border.feedback.neutral | |
color.global.border.feedback.neutral.intensity-90 | |
color.global.border.feedback.neutral.intensity-90.default | #232B2B |
color.global.border.feedback.informational | |
color.global.border.feedback.informational.intensity-40 | |
color.global.border.feedback.informational.intensity-40.default | #8BABD6 |
color.global.border.feedback.informational.intensity-70 | |
color.global.border.feedback.informational.intensity-70.default | #285DA3 |
color.global.border.feedback.staff | |
color.global.border.feedback.staff.default | #EFB09C |
color.global.border.progression | |
color.global.border.progression.base | |
color.global.border.progression.base.default | #656B6B |
color.global.border.progression.base.hover | #232B2B |
color.global.border.progression.base.disabled | #A7AAAA |
color.global.border.progression.base.selected | #3873C1 |
color.global.border.container | |
color.global.border.container.base | |
color.global.border.container.base.default | #DEDFDF |
color.global.border.container.transparent | |
color.global.border.container.transparent.default | transparent |
color.global.brand | |
color.global.brand.blue-10 | #EAF0F8 |
color.global.brand.blue-20 | #DFE8F4 |
color.global.brand.blue-30 | #C0D1E9 |
color.global.brand.blue-40 | #8BABD6 |
color.global.brand.blue-50 | #618EC7 |
color.global.brand.blue-60 | #3873C1 |
color.global.brand.blue-70 | #285DA3 |
color.global.brand.blue-80 | #265593 |
color.global.brand.blue-90 | #1F487F |
color.global.brand.blue-100 | #17355D |
color.global.brand.green-10 | #EBF7F6 |
color.global.brand.green-20 | #D6EFEC |
color.global.brand.green-30 | #ADDFD9 |
color.global.brand.green-40 | #84D0C6 |
color.global.brand.green-50 | #5BC0B3 |
color.global.brand.green-60 | #32B0A0 |
color.global.brand.green-70 | #2D9E90 |
color.global.brand.green-80 | #237C70 |
color.global.brand.green-90 | #1E6A60 |
color.global.brand.green-100 | #144640 |
color.global.brand.lime-10 | #fafdee |
color.global.brand.lime-20 | #f5fcd5 |
color.global.brand.lime-30 | #ebfcac |
color.global.brand.lime-40 | #ddfb74 |
color.global.brand.lime-50 | #c9ec56 |
color.global.brand.lime-60 | #b1d636 |
color.global.brand.lime-70 | #94b524 |
color.global.brand.lime-80 | #738c12 |
color.global.brand.lime-90 | #536507 |
color.global.brand.lime-100 | #384202 |
color.global.brand.yellow-10 | #fffef7 |
color.global.brand.yellow-20 | #fffced |
color.global.brand.yellow-30 | #fef8da |
color.global.brand.yellow-40 | #fcefb6 |
color.global.brand.yellow-50 | #fbe284 |
color.global.brand.yellow-60 | #f8d648 |
color.global.brand.yellow-70 | #ddb31f |
color.global.brand.yellow-80 | #b48804 |
color.global.brand.yellow-90 | #825a00 |
color.global.brand.yellow-100 | #4d2f00 |
color.global.brand.orange-10 | #FFEEE8 |
color.global.brand.orange-20 | #FAE5DE |
color.global.brand.orange-30 | #F5CABD |
color.global.brand.orange-40 | #EFB09C |
color.global.brand.orange-50 | #EA957B |
color.global.brand.orange-60 | #E57B5A |
color.global.brand.orange-70 | #CE6F51 |
color.global.brand.orange-80 | #B76248 |
color.global.brand.orange-90 | #A0563F |
color.global.brand.orange-100 | #733E2D |
color.global.brand.red-10 | #F9E9EC |
color.global.brand.red-20 | #F4D3D8 |
color.global.brand.red-30 | #E9A7B2 |
color.global.brand.red-40 | #DD7A8B |
color.global.brand.red-50 | #D24E65 |
color.global.brand.red-60 | #C7223E |
color.global.brand.red-70 | #B31F38 |
color.global.brand.red-80 | #9F1B32 |
color.global.brand.red-90 | #771425 |
color.global.brand.red-100 | #500E19 |
color.global.brand.brown-10 | #FBF8F7 |
color.global.brand.brown-20 | #F0EAE1 |
color.global.brand.brown-30 | #E2D5C2 |
color.global.brand.brown-40 | #CCB695 |
color.global.brand.brown-50 | #C5AB85 |
color.global.brand.brown-60 | #B69667 |
color.global.brand.brown-70 | #A4875D |
color.global.brand.brown-80 | #7F6948 |
color.global.brand.brown-90 | #5B4B34 |
color.global.brand.brown-100 | #493C29 |
color.global.brand.gray-10 | #F4F4F4 |
color.global.brand.gray-20 | #EBECEC |
color.global.brand.gray-30 | #DEDFDF |
color.global.brand.gray-40 | #C4C4C4 |
color.global.brand.gray-50 | #A7AAAA |
color.global.brand.gray-60 | #7B8080 |
color.global.brand.gray-70 | #656B6B |
color.global.brand.gray-80 | #394040 |
color.global.brand.gray-90 | #232B2B |
color.global.brand.gray-100 | #1C2222 |
color.global.brand.black | #000000 |
color.global.brand.white | #ffffff |
color.global.category | |
color.global.category.category-1 | |
color.global.category.category-1.intensity-10 | #EAF0F8 |
color.global.category.category-1.intensity-20 | #DFE8F4 |
color.global.category.category-1.intensity-30 | #C0D1E9 |
color.global.category.category-1.intensity-40 | #8BABD6 |
color.global.category.category-1.intensity-50 | #618EC7 |
color.global.category.category-1.intensity-60 | #3873C1 |
color.global.category.category-1.intensity-70 | #285DA3 |
color.global.category.category-1.intensity-80 | #265593 |
color.global.category.category-1.intensity-90 | #1F487F |
color.global.category.category-1.intensity-100 | #17355D |
color.global.category.category-2 | |
color.global.category.category-2.intensity-10 | #EBF7F6 |
color.global.category.category-2.intensity-20 | #D6EFEC |
color.global.category.category-2.intensity-30 | #ADDFD9 |
color.global.category.category-2.intensity-40 | #84D0C6 |
color.global.category.category-2.intensity-50 | #5BC0B3 |
color.global.category.category-2.intensity-60 | #32B0A0 |
color.global.category.category-2.intensity-70 | #2D9E90 |
color.global.category.category-2.intensity-80 | #237C70 |
color.global.category.category-2.intensity-90 | #1E6A60 |
color.global.category.category-2.intensity-100 | #144640 |
color.global.category.category-3 | |
color.global.category.category-3.intensity-10 | #FBF8F7 |
color.global.category.category-3.intensity-20 | #F0EAE1 |
color.global.category.category-3.intensity-30 | #E2D5C2 |
color.global.category.category-3.intensity-40 | #CCB695 |
color.global.category.category-3.intensity-50 | #C5AB85 |
color.global.category.category-3.intensity-60 | #B69667 |
color.global.category.category-3.intensity-70 | #A4875D |
color.global.category.category-3.intensity-80 | #7F6948 |
color.global.category.category-3.intensity-90 | #5B4B34 |
color.global.category.category-3.intensity-100 | #493C29 |
color.global.category.category-4 | |
color.global.category.category-4.intensity-10 | #FFEEE8 |
color.global.category.category-4.intensity-20 | #FAE5DE |
color.global.category.category-4.intensity-30 | #F5CABD |
color.global.category.category-4.intensity-40 | #EFB09C |
color.global.category.category-4.intensity-50 | #EA957B |
color.global.category.category-4.intensity-60 | #E57B5A |
color.global.category.category-4.intensity-70 | #CE6F51 |
color.global.category.category-4.intensity-80 | #B76248 |
color.global.category.category-4.intensity-90 | #A0563F |
color.global.category.category-4.intensity-100 | #733E2D |
color.global.category.category-5 | |
color.global.category.category-5.intensity-10 | #fafdee |
color.global.category.category-5.intensity-20 | #f5fcd5 |
color.global.category.category-5.intensity-30 | #ebfcac |
color.global.category.category-5.intensity-40 | #ddfb74 |
color.global.category.category-5.intensity-50 | #c9ec56 |
color.global.category.category-5.intensity-60 | #b1d636 |
color.global.category.category-5.intensity-70 | #94b524 |
color.global.category.category-5.intensity-80 | #738c12 |
color.global.category.category-5.intensity-90 | #536507 |
color.global.category.category-5.intensity-100 | #384202 |
color.global.equity | |
color.global.equity.pool | #C4C4C4 |
color.global.equity.option | #A7AAAA |
color.global.equity.common | #32B0A0 |
color.global.equity.preferred | #3873C1 |
color.global.equity.warrant | #ea657f |
color.global.equity.convertible | #7358b8 |
color.global.feedback | |
color.global.feedback.positive | |
color.global.feedback.positive.intensity-10 | #EBF7F6 |
color.global.feedback.positive.intensity-20 | #D6EFEC |
color.global.feedback.positive.intensity-30 | #ADDFD9 |
color.global.feedback.positive.intensity-40 | #84D0C6 |
color.global.feedback.positive.intensity-50 | #5BC0B3 |
color.global.feedback.positive.intensity-60 | #32B0A0 |
color.global.feedback.positive.intensity-70 | #2D9E90 |
color.global.feedback.positive.intensity-80 | #237C70 |
color.global.feedback.positive.intensity-90 | #1E6A60 |
color.global.feedback.positive.intensity-100 | #144640 |
color.global.feedback.negative | |
color.global.feedback.negative.intensity-10 | #F9E9EC |
color.global.feedback.negative.intensity-20 | #F4D3D8 |
color.global.feedback.negative.intensity-30 | #E9A7B2 |
color.global.feedback.negative.intensity-40 | #DD7A8B |
color.global.feedback.negative.intensity-50 | #D24E65 |
color.global.feedback.negative.intensity-60 | #C7223E |
color.global.feedback.negative.intensity-70 | #B31F38 |
color.global.feedback.negative.intensity-80 | #9F1B32 |
color.global.feedback.negative.intensity-90 | #771425 |
color.global.feedback.negative.intensity-100 | #500E19 |
color.global.feedback.notice | |
color.global.feedback.notice.intensity-10 | #FFEEE8 |
color.global.feedback.notice.intensity-20 | #FAE5DE |
color.global.feedback.notice.intensity-30 | #F5CABD |
color.global.feedback.notice.intensity-40 | #EFB09C |
color.global.feedback.notice.intensity-50 | #EA957B |
color.global.feedback.notice.intensity-60 | #E57B5A |
color.global.feedback.notice.intensity-70 | #CE6F51 |
color.global.feedback.notice.intensity-80 | #B76248 |
color.global.feedback.notice.intensity-90 | #A0563F |
color.global.feedback.notice.intensity-100 | #733E2D |
color.global.feedback.pending | |
color.global.feedback.pending.intensity-10 | #fffef7 |
color.global.feedback.pending.intensity-20 | #fffced |
color.global.feedback.pending.intensity-30 | #fef8da |
color.global.feedback.pending.intensity-40 | #fcefb6 |
color.global.feedback.pending.intensity-50 | #fbe284 |
color.global.feedback.pending.intensity-60 | #f8d648 |
color.global.feedback.pending.intensity-70 | #ddb31f |
color.global.feedback.pending.intensity-80 | #b48804 |
color.global.feedback.pending.intensity-90 | #825a00 |
color.global.feedback.pending.intensity-100 | #4d2f00 |
color.global.feedback.neutral | |
color.global.feedback.neutral.intensity-10 | #F4F4F4 |
color.global.feedback.neutral.intensity-20 | #EBECEC |
color.global.feedback.neutral.intensity-30 | #DEDFDF |
color.global.feedback.neutral.intensity-40 | #C4C4C4 |
color.global.feedback.neutral.intensity-50 | #A7AAAA |
color.global.feedback.neutral.intensity-60 | #7B8080 |
color.global.feedback.neutral.intensity-70 | #656B6B |
color.global.feedback.neutral.intensity-80 | #394040 |
color.global.feedback.neutral.intensity-90 | #232B2B |
color.global.feedback.neutral.intensity-100 | #1C2222 |
color.global.feedback.informational | |
color.global.feedback.informational.intensity-10 | #EAF0F8 |
color.global.feedback.informational.intensity-20 | #DFE8F4 |
color.global.feedback.informational.intensity-30 | #C0D1E9 |
color.global.feedback.informational.intensity-40 | #8BABD6 |
color.global.feedback.informational.intensity-50 | #618EC7 |
color.global.feedback.informational.intensity-60 | #3873C1 |
color.global.feedback.informational.intensity-70 | #285DA3 |
color.global.feedback.informational.intensity-80 | #265593 |
color.global.feedback.informational.intensity-90 | #1F487F |
color.global.feedback.informational.intensity-100 | #17355D |
color.global.font | |
color.global.font.hierarchy | |
color.global.font.hierarchy.title | |
color.global.font.hierarchy.title.default | #232B2B |
color.global.font.hierarchy.legend | |
color.global.font.hierarchy.legend.default | #656B6B |
color.global.font.hierarchy.body | |
color.global.font.hierarchy.body.default | #1C2222 |
color.global.font.hierarchy.hidden | |
color.global.font.hierarchy.hidden.default | transparent |
color.global.font.hierarchy.secondary | |
color.global.font.hierarchy.secondary.default | #ffffff |
color.global.font.link | |
color.global.font.link.base | |
color.global.font.link.base.default | #285DA3 |
color.global.font.link.base.hover | #1F487F |
color.global.font.link.base.down | #1F487F |
color.global.font.link.base.disabled | #A7AAAA |
color.global.font.link.inverse | |
color.global.font.link.inverse.default | #8BABD6 |
color.global.font.link.inverse.down | #3873C1 |
color.global.font.link.inverse.disabled | #A7AAAA |
color.global.font.link.underline | |
color.global.font.link.underline.default | #1C2222 |
color.global.font.link.underline.hover | #285DA3 |
color.global.font.link.underline.down | #1F487F |
color.global.font.link.underline.disabled | #A7AAAA |
color.global.font.custom | |
color.global.font.custom.black | |
color.global.font.custom.black.default | #1C2222 |
color.global.font.custom.gray | |
color.global.font.custom.gray.default | #656B6B |
color.global.font.custom.white | |
color.global.font.custom.white.default | #ffffff |
color.global.font.custom.blue | |
color.global.font.custom.blue.default | #285DA3 |
color.global.font.custom.red | |
color.global.font.custom.red.default | #B31F38 |
color.global.font.custom.green | |
color.global.font.custom.green.default | #2D9E90 |
color.global.font.progression | |
color.global.font.progression.active | |
color.global.font.progression.active.default | #3873C1 |
color.global.font.progression.complete | |
color.global.font.progression.complete.default | #656B6B |
color.global.font.progression.disabled | |
color.global.font.progression.disabled.default | #A7AAAA |
color.global.font.feedback | |
color.global.font.feedback.positive | |
color.global.font.feedback.positive.intensity-50 | |
color.global.font.feedback.positive.intensity-50.default | #5BC0B3 |
color.global.font.feedback.positive.intensity-70 | |
color.global.font.feedback.positive.intensity-70.default | #2D9E90 |
color.global.font.feedback.positive.intensity-80 | |
color.global.font.feedback.positive.intensity-80.default | #237C70 |
color.global.font.feedback.positive.intensity-90 | |
color.global.font.feedback.positive.intensity-90.default | #1E6A60 |
color.global.font.feedback.negative | |
color.global.font.feedback.negative.intensity-30 | |
color.global.font.feedback.negative.intensity-30.default | #E9A7B2 |
color.global.font.feedback.negative.intensity-70 | |
color.global.font.feedback.negative.intensity-70.default | #B31F38 |
color.global.font.feedback.negative.intensity-80 | |
color.global.font.feedback.negative.intensity-80.default | #9F1B32 |
color.global.font.feedback.pending | |
color.global.font.feedback.pending.intensity-80 | |
color.global.font.feedback.pending.intensity-80.default | #394040 |
color.global.font.feedback.pending.intensity-90 | |
color.global.font.feedback.pending.intensity-90.default | #5B4B34 |
color.global.font.feedback.notice | |
color.global.font.feedback.notice.intensity-80 | |
color.global.font.feedback.notice.intensity-80.default | #B76248 |
color.global.font.feedback.notice.intensity-90 | |
color.global.font.feedback.notice.intensity-90.default | #A0563F |
color.global.font.feedback.neutral | |
color.global.font.feedback.neutral.intensity-50 | |
color.global.font.feedback.neutral.intensity-50.default | #A7AAAA |
color.global.font.feedback.neutral.intensity-70 | |
color.global.font.feedback.neutral.intensity-70.default | #656B6B |
color.global.font.feedback.neutral.intensity-80 | |
color.global.font.feedback.neutral.intensity-80.default | #394040 |
color.global.font.feedback.neutral.intensity-90 | |
color.global.font.feedback.neutral.intensity-90.default | #232B2B |
color.global.font.feedback.informational | |
color.global.font.feedback.informational.intensity-70 | |
color.global.font.feedback.informational.intensity-70.default | #285DA3 |
color.global.font.feedback.informational.intensity-80 | |
color.global.font.feedback.informational.intensity-80.default | #265593 |
color.global.font.feedback.informational.intensity-100 | |
color.global.font.feedback.informational.intensity-100.default | #17355D |
color.global.font.feedback.staff | |
color.global.font.feedback.staff.default | #000000 |
color.global.font.equity | |
color.global.font.equity.common | |
color.global.font.equity.common.default | #ffffff |
color.global.font.equity.preferred | |
color.global.font.equity.preferred.default | #ffffff |
color.global.font.equity.convertible | |
color.global.font.equity.convertible.default | #ffffff |
color.global.font.equity.warrant | |
color.global.font.equity.warrant.default | #ffffff |
color.global.font.equity.option | |
color.global.font.equity.option.default | #1C2222 |
color.global.font.equity.pool | |
color.global.font.equity.pool.default | #1C2222 |
color.global.font.cta | |
color.global.font.cta.primary | |
color.global.font.cta.primary.default | #EBECEC |
color.global.font.cta.primary.disabled | #A7AAAA |
color.global.font.cta.secondary | |
color.global.font.cta.secondary.default | #1C2222 |
color.global.font.cta.secondary.hover | #394040 |
color.global.font.cta.secondary.down | #1F487F |
color.global.font.cta.secondary.disabled | #A7AAAA |
color.global.font.cta.danger | |
color.global.font.cta.danger.default | #EBECEC |
color.global.font.cta.danger.disabled | #DD7A8B |
color.global.font.cta.inverse | |
color.global.font.cta.inverse.default | #EBECEC |
color.global.font.input | |
color.global.font.input.placeholder | |
color.global.font.input.placeholder.default | #cecfd1 |
color.global.font.input.base | |
color.global.font.input.base.disabled | #A7AAAA |
color.global.graphic | |
color.global.graphic.foreground | |
color.global.graphic.foreground.cta | |
color.global.graphic.foreground.cta.base | |
color.global.graphic.foreground.cta.base.hover | #656B6B |
color.global.graphic.foreground.scroll | |
color.global.graphic.foreground.scroll.base | |
color.global.graphic.foreground.scroll.base.default | #656B6B |
color.global.graphic.foreground.progression | |
color.global.graphic.foreground.progression.base | |
color.global.graphic.foreground.progression.base.default | #656B6B |
color.global.graphic.foreground.progression.base.hover | #232B2B |
color.global.graphic.foreground.progression.base.down | #3873C1 |
color.global.graphic.foreground.input | |
color.global.graphic.foreground.input.base | |
color.global.graphic.foreground.input.base.default | #1C2222 |
color.global.graphic.foreground.input.base.disabled | #A7AAAA |
color.global.graphic.foreground.feedback | |
color.global.graphic.foreground.feedback.positive | |
color.global.graphic.foreground.feedback.positive.contrast | |
color.global.graphic.foreground.feedback.positive.contrast.default | #ffffff |
color.global.graphic.foreground.feedback.notice | |
color.global.graphic.foreground.feedback.notice.contrast | |
color.global.graphic.foreground.feedback.notice.contrast.default | #ffffff |
color.global.graphic.foreground.feedback.notice.intensity-60 | |
color.global.graphic.foreground.feedback.notice.intensity-60.default | #E57B5A |
color.global.graphic.foreground.feedback.notice.intensity-80 | |
color.global.graphic.foreground.feedback.notice.intensity-80.default | #B76248 |
color.global.graphic.foreground.feedback.negative | |
color.global.graphic.foreground.feedback.negative.contrast | |
color.global.graphic.foreground.feedback.negative.contrast.default | #ffffff |
color.global.graphic.foreground.feedback.neutral | |
color.global.graphic.foreground.feedback.neutral.contrast | |
color.global.graphic.foreground.feedback.neutral.contrast.default | #ffffff |
color.global.graphic.foreground.feedback.pending | |
color.global.graphic.foreground.feedback.pending.contrast | |
color.global.graphic.foreground.feedback.pending.contrast.default | #000000 |
color.global.graphic.foreground.feedback.informational | |
color.global.graphic.foreground.feedback.informational.contrast | |
color.global.graphic.foreground.feedback.informational.contrast.default | #ffffff |
color.global.graphic.foreground.feedback.staff | |
color.global.graphic.foreground.feedback.staff.contrast | |
color.global.graphic.foreground.feedback.staff.contrast.default | #ffffff |
color.global.graphic.background | |
color.global.graphic.background.feedback | |
color.global.graphic.background.feedback.positive | |
color.global.graphic.background.feedback.positive.intensity-60 | |
color.global.graphic.background.feedback.positive.intensity-60.default | #32B0A0 |
color.global.graphic.background.feedback.notice | |
color.global.graphic.background.feedback.notice.intensity-60 | |
color.global.graphic.background.feedback.notice.intensity-60.default | #E57B5A |
color.global.graphic.background.feedback.negative | |
color.global.graphic.background.feedback.negative.intensity-60 | |
color.global.graphic.background.feedback.negative.intensity-60.default | #C7223E |
color.global.graphic.background.feedback.neutral | |
color.global.graphic.background.feedback.neutral.intensity-40 | |
color.global.graphic.background.feedback.neutral.intensity-40.default | #C4C4C4 |
color.global.graphic.background.feedback.pending | |
color.global.graphic.background.feedback.pending.intensity-60 | |
color.global.graphic.background.feedback.pending.intensity-60.default | #f8d648 |
color.global.graphic.background.feedback.informational | |
color.global.graphic.background.feedback.informational.intensity-60 | |
color.global.graphic.background.feedback.informational.intensity-60.default | #3873C1 |
color.global.graphic.background.feedback.staff | |
color.global.graphic.background.feedback.staff.default | #E57B5A |
color.global.outline | |
color.global.outline.base | |
color.global.outline.base.keyboardFocus | #285DA3 |
color.global.outline.inverse | |
color.global.outline.inverse.keyboardFocus | #285DA3 |
color.global.shadow | |
color.global.shadow.outer | |
color.global.shadow.outer.separation | |
color.global.shadow.outer.separation.subtle | |
color.global.shadow.outer.separation.subtle.default | rgba(0, 0, 0, 0.1) |
color.global.shadow.outer.separation.strong | |
color.global.shadow.outer.separation.strong.default | rgba(21, 22, 26, 0.3) |
color.global.shadow.outer.accessible | |
color.global.shadow.outer.accessible.base | |
color.global.shadow.outer.accessible.base.keyboardFocus | #285DA3 |
color.global.shadow.input | |
color.global.shadow.input.base | |
color.global.shadow.input.base.keyboardFocus | #8BABD6 |
color.global.shadow.input.invalid | |
color.global.shadow.input.invalid.keyboardFocus | #DD7A8B |
color.global.shadow.cta | |
color.global.shadow.cta.base | |
color.global.shadow.cta.base.keyboardFocus | #8BABD6 |
color.global.shadow.cta.danger | |
color.global.shadow.cta.danger.keyboardFocus | #DD7A8B |
color.global.visualization | |
color.global.visualization.positive | |
color.global.visualization.positive.intensity-0 | #a8d8bc |
color.global.visualization.positive.intensity-1 | #79c298 |
color.global.visualization.positive.intensity-2 | #49a471 |
color.global.visualization.positive.intensity-3 | #2a8652 |
color.global.visualization.positive.intensity-4 | #156d3b |
color.global.visualization.positive.default | #49a471 |
color.global.visualization.negative | |
color.global.visualization.negative.intensity-0 | #DD7A8B |
color.global.visualization.negative.intensity-1 | #D24E65 |
color.global.visualization.negative.intensity-2 | #C7223E |
color.global.visualization.negative.intensity-3 | #B31F38 |
color.global.visualization.negative.intensity-4 | #9F1B32 |
color.global.visualization.negative.default | #C7223E |
color.global.visualization.neutral | |
color.global.visualization.neutral.intensity-0 | #C4C4C4 |
color.global.visualization.neutral.intensity-1 | #A7AAAA |
color.global.visualization.neutral.intensity-2 | #7B8080 |
color.global.visualization.neutral.intensity-3 | #656B6B |
color.global.visualization.neutral.intensity-4 | #394040 |
color.global.visualization.neutral.default | #A7AAAA |
color.global.visualization.category-1 | |
color.global.visualization.category-1.intensity-0 | #C0D1E9 |
color.global.visualization.category-1.intensity-1 | #8BABD6 |
color.global.visualization.category-1.intensity-2 | #3873C1 |
color.global.visualization.category-1.intensity-3 | #265593 |
color.global.visualization.category-1.intensity-4 | #1F487F |
color.global.visualization.category-1.default | #3873C1 |
color.global.visualization.category-2 | |
color.global.visualization.category-2.intensity-0 | #ADDFD9 |
color.global.visualization.category-2.intensity-1 | #84D0C6 |
color.global.visualization.category-2.intensity-2 | #32B0A0 |
color.global.visualization.category-2.intensity-3 | #237C70 |
color.global.visualization.category-2.intensity-4 | #1E6A60 |
color.global.visualization.category-2.default | #32B0A0 |
color.global.visualization.category-3 | |
color.global.visualization.category-3.intensity-0 | #E2D5C2 |
color.global.visualization.category-3.intensity-1 | #CCB695 |
color.global.visualization.category-3.intensity-2 | #C5AB85 |
color.global.visualization.category-3.intensity-3 | #7F6948 |
color.global.visualization.category-3.intensity-4 | #5B4B34 |
color.global.visualization.category-3.default | #C5AB85 |
color.global.visualization.category-4 | |
color.global.visualization.category-4.intensity-0 | #F5CABD |
color.global.visualization.category-4.intensity-1 | #EFB09C |
color.global.visualization.category-4.intensity-2 | #E57B5A |
color.global.visualization.category-4.intensity-3 | #B76248 |
color.global.visualization.category-4.intensity-4 | #A0563F |
color.global.visualization.category-4.default | #E57B5A |
color.global.visualization.category-5 | |
color.global.visualization.category-5.intensity-0 | #c9ec56 |
color.global.visualization.category-5.intensity-1 | #b1d636 |
color.global.visualization.category-5.intensity-2 | #94b524 |
color.global.visualization.category-5.intensity-3 | #738c12 |
color.global.visualization.category-5.intensity-4 | #536507 |
color.global.visualization.category-5.default | #94b524 |
elevation | |
elevation.global | |
elevation.global.shadow | |
elevation.global.shadow.outer | |
elevation.global.shadow.outer.offsetX | |
elevation.global.shadow.outer.offsetX.separation | |
elevation.global.shadow.outer.offsetX.separation.none | |
elevation.global.shadow.outer.offsetX.separation.none.default | 0px |
elevation.global.shadow.outer.offsetX.separation.subtle | |
elevation.global.shadow.outer.offsetX.separation.subtle.default | 1px |
elevation.global.shadow.outer.offsetX.accessible | |
elevation.global.shadow.outer.offsetX.accessible.base | |
elevation.global.shadow.outer.offsetX.accessible.base.keyboardFocus | 0px |
elevation.global.shadow.outer.offsetY | |
elevation.global.shadow.outer.offsetY.separation | |
elevation.global.shadow.outer.offsetY.separation.negative | |
elevation.global.shadow.outer.offsetY.separation.negative.default | -1px |
elevation.global.shadow.outer.offsetY.separation.none | |
elevation.global.shadow.outer.offsetY.separation.none.default | 0px |
elevation.global.shadow.outer.offsetY.separation.subtle | |
elevation.global.shadow.outer.offsetY.separation.subtle.default | 1px |
elevation.global.shadow.outer.offsetY.separation.extra | |
elevation.global.shadow.outer.offsetY.separation.extra.default | 4px |
elevation.global.shadow.outer.offsetY.accessible | |
elevation.global.shadow.outer.offsetY.accessible.base | |
elevation.global.shadow.outer.offsetY.accessible.base.keyboardFocus | 0px |
elevation.global.shadow.outer.blur | |
elevation.global.shadow.outer.blur.separation | |
elevation.global.shadow.outer.blur.separation.none | |
elevation.global.shadow.outer.blur.separation.none.default | 0px |
elevation.global.shadow.outer.blur.separation.subtle | |
elevation.global.shadow.outer.blur.separation.subtle.default | 2px |
elevation.global.shadow.outer.blur.separation.extra | |
elevation.global.shadow.outer.blur.separation.extra.default | 5px |
elevation.global.shadow.outer.blur.accessible | |
elevation.global.shadow.outer.blur.accessible.base | |
elevation.global.shadow.outer.blur.accessible.base.keyboardFocus | 9px |
elevation.global.shadow.outer.spread | |
elevation.global.shadow.outer.spread.separation | |
elevation.global.shadow.outer.spread.separation.none | |
elevation.global.shadow.outer.spread.separation.none.default | 0px |
elevation.global.shadow.outer.spread.separation.subtle | |
elevation.global.shadow.outer.spread.separation.subtle.default | 1px |
elevation.global.shadow.outer.spread.accessible | |
elevation.global.shadow.outer.spread.accessible.base | |
elevation.global.shadow.outer.spread.accessible.base.keyboardFocus | 0px |
elevation.global.newTable | |
elevation.global.newTable.ribbon | 20 |
elevation.global.newTable.header | |
elevation.global.newTable.header.frozen | 12 |
elevation.global.newTable.header.initial | 10 |
elevation.global.newTable.cell | |
elevation.global.newTable.cell.frozen | 5 |
elevation.global.newTable.footer | |
elevation.global.newTable.footer.initial | 10 |
elevation.global.spreadsheet | 20 |
elevation.global.dropdown | 25 |
elevation.global.calendar | 100 |
elevation.global.dialog | |
elevation.global.dialog.default | 1000 |
elevation.global.celebration | 1050 |
elevation.global.tooltip | 1100 |
elevation.global.alert | 2000 |
elevation.global.doppelganger | 9999 |
elevation.global.environment | 9999 |
elevation.global.sidenav | 21 |
font | |
font.global | |
font.global.family | |
font.global.family.base | "Inter var", "fallback for Inter", sans-serif |
font.global.family.prominent | "SangBleu Versailles", "fallback for SangBleu", serif |
font.global.family.cursive | dancingscript, cursive |
font.global.family.monospace | "Roboto Mono", ui-monospace, Menlo, Monaco, monospace |
font.global.feature | |
font.global.feature.base | "ss01", "cv05", "cv10", "calt" |
font.global.leading | |
font.global.leading.display-1 | 48px |
font.global.leading.display-2 | 44px |
font.global.leading.heading-1 | |
font.global.leading.heading-1.desktop | 48px |
font.global.leading.heading-1.mobile | 40px |
font.global.leading.heading-2 | |
font.global.leading.heading-2.desktop | 36px |
font.global.leading.heading-2.mobile | 28px |
font.global.leading.heading-3 | 28px |
font.global.leading.heading-4 | 28px |
font.global.leading.body-1 | 24px |
font.global.leading.body-2 | 24px |
font.global.leading.body-3 | 24px |
font.global.leading.small-2 | 20px |
font.global.leading.small-1 | 20px |
font.global.size | |
font.global.size.display-1 | 28px |
font.global.size.display-2 | 24px |
font.global.size.heading-1 | |
font.global.size.heading-1.desktop | 28px |
font.global.size.heading-1.mobile | 24px |
font.global.size.heading-2 | |
font.global.size.heading-2.desktop | 20px |
font.global.size.heading-2.mobile | 18px |
font.global.size.heading-3 | 16px |
font.global.size.heading-4 | 16px |
font.global.size.body-1 | 14px |
font.global.size.body-2 | 14px |
font.global.size.body-3 | 14px |
font.global.size.small-1 | 12px |
font.global.size.small-2 | 12px |
font.global.size.monospace | 13px |
font.global.spacing | |
font.global.spacing.display-1 | 16px |
font.global.spacing.display-2 | 16px |
font.global.spacing.heading-1 | 16px |
font.global.spacing.heading-2 | 16px |
font.global.spacing.heading-3 | 16px |
font.global.spacing.heading-4 | 16px |
font.global.spacing.body-1 | 8px |
font.global.spacing.body-2 | 8px |
font.global.spacing.body-3 | 8px |
font.global.spacing.small-1 | 8px |
font.global.spacing.small-2 | 8px |
font.global.weight | |
font.global.weight.display-1 | 600 |
font.global.weight.display-2 | 600 |
font.global.weight.heading-1 | 400 |
font.global.weight.heading-2 | 500 |
font.global.weight.heading-3 | 500 |
font.global.weight.heading-4 | 400 |
font.global.weight.body-1 | 600 |
font.global.weight.body-2 | 500 |
font.global.weight.body-3 | 400 |
font.global.weight.small-1 | 500 |
font.global.weight.small-2 | 400 |
font.global.weight.monospace | 400 |
size | |
size.global | |
size.global.border | |
size.global.border.container | |
size.global.border.container.small | |
size.global.border.container.small.default | 1px |
size.global.border.container.medium | |
size.global.border.container.medium.default | 2px |
size.global.border.container.large | |
size.global.border.container.large.default | 4px |
size.global.border.progression | |
size.global.border.progression.inactive | |
size.global.border.progression.inactive.default | 1px |
size.global.border.progression.active | |
size.global.border.progression.active.default | 2px |
size.global.border.highlight | |
size.global.border.highlight.base | |
size.global.border.highlight.base.default | 5px |
size.global.outline | |
size.global.outline.width | |
size.global.outline.width.accessible | |
size.global.outline.width.accessible.base | |
size.global.outline.width.accessible.base.keyboardFocus | 2px |
size.global.outline.style | |
size.global.outline.style.accessible | |
size.global.outline.style.accessible.base | |
size.global.outline.style.accessible.base.keyboardFocus | solid |
size.global.outline.stroke | |
size.global.outline.stroke.accessible | |
size.global.outline.stroke.accessible.base | |
size.global.outline.stroke.accessible.base.keyboardFocus | 2px solid |
size.global.outline.offset | |
size.global.outline.offset.accessible | |
size.global.outline.offset.accessible.tight | |
size.global.outline.offset.accessible.tight.keyboardFocus | 0px |
size.global.outline.offset.accessible.loose | |
size.global.outline.offset.accessible.loose.keyboardFocus | 2px |
size.global.radius | |
size.global.radius.none | 0px |
size.global.radius.small | 3px |
size.global.radius.medium | 4px |
size.global.radius.normal | 8px |
size.global.radius.large | 16px |
size.global.radius.xlarge | 24px |
size.global.radius.round | 50% |
spacing | |
spacing.global | |
spacing.global.vertical | |
spacing.global.vertical.xxsmall | 4px |
spacing.global.vertical.xsmall | 8px |
spacing.global.vertical.small | 12px |
spacing.global.vertical.normal | 16px |
spacing.global.vertical.gutter | 20px |
spacing.global.vertical.large | 24px |
spacing.global.vertical.xlarge | 32px |
spacing.global.horizontal | |
spacing.global.horizontal.xxsmall | 4px |
spacing.global.horizontal.xsmall | 8px |
spacing.global.horizontal.small | 12px |
spacing.global.horizontal.normal | 16px |
spacing.global.horizontal.gutter | 20px |
spacing.global.horizontal.large | 24px |
spacing.global.horizontal.xlarge | 32px |
Is this page helpful?