Back
File: core/complete.json
core
core-white-alpha
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-core-white-alpha-0 | --mds-color-core-white-alpha-0 | #ffffff00 | |
| color-core-white-alpha-5 | --mds-color-core-white-alpha-5 | #ffffff0d | |
| color-core-white-alpha-7 | --mds-color-core-white-alpha-7 | #ffffff12 | |
| color-core-white-alpha-11 | --mds-color-core-white-alpha-11 | #ffffff1c | |
| color-core-white-alpha-20 | --mds-color-core-white-alpha-20 | #ffffff33 | |
| color-core-white-alpha-24 | --mds-color-core-white-alpha-24 | #ffffff3d | |
| color-core-white-alpha-30 | --mds-color-core-white-alpha-30 | #ffffff4d | |
| color-core-white-alpha-40 | --mds-color-core-white-alpha-40 | #ffffff66 | |
| color-core-white-alpha-46 | --mds-color-core-white-alpha-46 | #ffffff75 | |
| color-core-white-alpha-50 | --mds-color-core-white-alpha-50 | #ffffff80 | |
| color-core-white-alpha-56 | --mds-color-core-white-alpha-56 | #ffffff8f | |
| color-core-white-alpha-60 | --mds-color-core-white-alpha-60 | #ffffff99 | |
| color-core-white-alpha-70 | --mds-color-core-white-alpha-70 | #ffffffb3 | |
| color-core-white-alpha-72 | --mds-color-core-white-alpha-72 | #ffffffb8 | |
| color-core-white-alpha-80 | --mds-color-core-white-alpha-80 | #ffffffcc | |
| color-core-white-alpha-88 | --mds-color-core-white-alpha-88 | #ffffffe0 | |
| color-core-white-alpha-90 | --mds-color-core-white-alpha-90 | #ffffffe6 | |
| color-core-white-alpha-95 | --mds-color-core-white-alpha-95 | #fffffff2 | |
| color-core-white-alpha-100 | --mds-color-core-white-alpha-100 | #ffffff |
core-black-alpha
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-core-black-alpha-0 | --mds-color-core-black-alpha-0 | #00000000 | |
| color-core-black-alpha-4 | --mds-color-core-black-alpha-4 | #0000000a | |
| color-core-black-alpha-7 | --mds-color-core-black-alpha-7 | #00000012 | |
| color-core-black-alpha-11 | --mds-color-core-black-alpha-11 | #0000001c | |
| color-core-black-alpha-20 | --mds-color-core-black-alpha-20 | #00000033 | |
| color-core-black-alpha-30 | --mds-color-core-black-alpha-30 | #0000004d | |
| color-core-black-alpha-40 | --mds-color-core-black-alpha-40 | #00000066 | |
| color-core-black-alpha-46 | --mds-color-core-black-alpha-46 | #00000075 | |
| color-core-black-alpha-50 | --mds-color-core-black-alpha-50 | #00000080 | |
| color-core-black-alpha-60 | --mds-color-core-black-alpha-60 | #00000099 | |
| color-core-black-alpha-70 | --mds-color-core-black-alpha-70 | #000000b3 | |
| color-core-black-alpha-78 | --mds-color-core-black-alpha-78 | #000000c7 | |
| color-core-black-alpha-80 | --mds-color-core-black-alpha-80 | #000000cc | |
| color-core-black-alpha-84 | --mds-color-core-black-alpha-84 | #000000d6 | |
| color-core-black-alpha-88 | --mds-color-core-black-alpha-88 | #000000e0 | |
| color-core-black-alpha-90 | --mds-color-core-black-alpha-90 | #000000e6 | |
| color-core-black-alpha-95 | --mds-color-core-black-alpha-95 | #000000f2 | |
| color-core-black-alpha-100 | --mds-color-core-black-alpha-100 | #000000 |
core-gray
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-core-gray-5 | --mds-color-core-gray-5 | #f7f7f7 | |
| color-core-gray-10 | --mds-color-core-gray-10 | #ededed | |
| color-core-gray-20 | --mds-color-core-gray-20 | #dedede | |
| color-core-gray-30 | --mds-color-core-gray-30 | #c9c9c9 | |
| color-core-gray-40 | --mds-color-core-gray-40 | #adadad | |
| color-core-gray-50 | --mds-color-core-gray-50 | #8f8f8f | |
| color-core-gray-55 | --mds-color-core-gray-55 | #80868b | |
| color-core-gray-60 | --mds-color-core-gray-60 | #707070 | |
| color-core-gray-70 | --mds-color-core-gray-70 | #545454 | |
| color-core-gray-71 | --mds-color-core-gray-71 | #5f6368 | |
| color-core-gray-75 | --mds-color-core-gray-75 | #3c4043 | |
| color-core-gray-80 | --mds-color-core-gray-80 | #3b3b3b | |
| color-core-gray-85 | --mds-color-core-gray-85 | #2e3134 | |
| color-core-gray-86 | --mds-color-core-gray-86 | #282a2d | |
| color-core-gray-90 | --mds-color-core-gray-90 | #262626 | |
| color-core-gray-91 | --mds-color-core-gray-91 | #202124 | |
| color-core-gray-93 | --mds-color-core-gray-93 | #17181b | |
| color-core-gray-95 | --mds-color-core-gray-95 | #1a1a1a | |
| color-core-gray-96 | --mds-color-core-gray-96 | #0e1013 | |
| color-core-gray-100 | --mds-color-core-gray-100 | #0f0f0f | |
| color-core-gray-110 | --mds-color-core-gray-110 | #000000 |
core-blue
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-core-blue-5 | --mds-color-core-blue-5 | #edf8ff | |
| color-core-blue-10 | --mds-color-core-blue-10 | #dbf0ff | |
| color-core-blue-20 | --mds-color-core-blue-20 | #bfe3ff | |
| color-core-blue-30 | --mds-color-core-blue-30 | #96d0ff | |
| color-core-blue-40 | --mds-color-core-blue-40 | #64b4fa | |
| color-core-blue-50 | --mds-color-core-blue-50 | #3492eb | |
| color-core-blue-60 | --mds-color-core-blue-60 | #1170cf | |
| color-core-blue-70 | --mds-color-core-blue-70 | #0353a8 | |
| color-core-blue-80 | --mds-color-core-blue-80 | #063a75 | |
| color-core-blue-90 | --mds-color-core-blue-90 | #0a274a | |
| color-core-blue-95 | --mds-color-core-blue-95 | #091a30 | |
| color-core-blue-100 | --mds-color-core-blue-100 | #07101c |
core-green
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-core-green-5 | --mds-color-core-green-5 | #edf7f5 | |
| color-core-green-10 | --mds-color-core-green-10 | #cef5eb | |
| color-core-green-20 | --mds-color-core-green-20 | #9fedd8 | |
| color-core-green-30 | --mds-color-core-green-30 | #68debd | |
| color-core-green-40 | --mds-color-core-green-40 | #3cc29a | |
| color-core-green-50 | --mds-color-core-green-50 | #27a17a | |
| color-core-green-60 | --mds-color-core-green-60 | #1d805f | |
| color-core-green-70 | --mds-color-core-green-70 | #185e46 | |
| color-core-green-80 | --mds-color-core-green-80 | #134231 | |
| color-core-green-90 | --mds-color-core-green-90 | #0e2b20 | |
| color-core-green-95 | --mds-color-core-green-95 | #0a1c15 | |
| color-core-green-100 | --mds-color-core-green-100 | #07120d |
core-red
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-core-red-5 | --mds-color-core-red-5 | #fff5f6 | |
| color-core-red-10 | --mds-color-core-red-10 | #ffe8ea | |
| color-core-red-20 | --mds-color-core-red-20 | #ffd4da | |
| color-core-red-30 | --mds-color-core-red-30 | #ffb8c1 | |
| color-core-red-40 | --mds-color-core-red-40 | #fc8b98 | |
| color-core-red-50 | --mds-color-core-red-50 | #f55868 | |
| color-core-red-60 | --mds-color-core-red-60 | #db1f2e | |
| color-core-red-70 | --mds-color-core-red-70 | #ab0a15 | |
| color-core-red-80 | --mds-color-core-red-80 | #780d13 | |
| color-core-red-90 | --mds-color-core-red-90 | #4f0e10 | |
| color-core-red-95 | --mds-color-core-red-95 | #330d0e | |
| color-core-red-100 | --mds-color-core-red-100 | #1f0a0a |
core-yellow
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-core-yellow-5 | --mds-color-core-yellow-5 | #fff6e3 | |
| color-core-yellow-10 | --mds-color-core-yellow-10 | #ffebc2 | |
| color-core-yellow-20 | --mds-color-core-yellow-20 | #ffda94 | |
| color-core-yellow-30 | --mds-color-core-yellow-30 | #ffbe4f | |
| color-core-yellow-40 | --mds-color-core-yellow-40 | #f2990a | |
| color-core-yellow-50 | --mds-color-core-yellow-50 | #cf7900 | |
| color-core-yellow-60 | --mds-color-core-yellow-60 | #a65e00 | |
| color-core-yellow-70 | --mds-color-core-yellow-70 | #7d4705 | |
| color-core-yellow-80 | --mds-color-core-yellow-80 | #57330a | |
| color-core-yellow-90 | --mds-color-core-yellow-90 | #36220c | |
| color-core-yellow-95 | --mds-color-core-yellow-95 | #24180b | |
| color-core-yellow-100 | --mds-color-core-yellow-100 | #140e08 |
core-orange
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-core-orange-5 | --mds-color-core-orange-5 | #fef3e8 | |
| color-core-orange-10 | --mds-color-core-orange-10 | #feebd7 | |
| color-core-orange-20 | --mds-color-core-orange-20 | #fed5ac | |
| color-core-orange-30 | --mds-color-core-orange-30 | #feba7f | |
| color-core-orange-40 | --mds-color-core-orange-40 | #fd884e | |
| color-core-orange-50 | --mds-color-core-orange-50 | #ec6400 | |
| color-core-orange-60 | --mds-color-core-orange-60 | #c94403 | |
| color-core-orange-70 | --mds-color-core-orange-70 | #9c3202 | |
| color-core-orange-80 | --mds-color-core-orange-80 | #682601 | |
| color-core-orange-90 | --mds-color-core-orange-90 | #411b04 | |
| color-core-orange-95 | --mds-color-core-orange-95 | #291303 | |
| color-core-orange-100 | --mds-color-core-orange-100 | #170b02 |
decorative
decorative-gold
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-gold-10 | --mds-color-decorative-gold-10 | #f7f6dc | |
| color-decorative-gold-20 | --mds-color-decorative-gold-20 | #f5eaa2 | |
| color-decorative-gold-30 | --mds-color-decorative-gold-30 | #ebd460 | |
| color-decorative-gold-40 | --mds-color-decorative-gold-40 | #d6b220 | |
| color-decorative-gold-50 | --mds-color-decorative-gold-50 | #ba8c00 | |
| color-decorative-gold-60 | --mds-color-decorative-gold-60 | #996e00 | |
| color-decorative-gold-70 | --mds-color-decorative-gold-70 | #735107 | |
| color-decorative-gold-80 | --mds-color-decorative-gold-80 | #4d370c | |
| color-decorative-gold-90 | --mds-color-decorative-gold-90 | #30240d | |
| color-decorative-gold-100 | --mds-color-decorative-gold-100 | #21190b |
decorative-olive
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-olive-10 | --mds-color-decorative-olive-10 | #f3f5e4 | |
| color-decorative-olive-20 | --mds-color-decorative-olive-20 | #e7edb7 | |
| color-decorative-olive-30 | --mds-color-decorative-olive-30 | #d3db7b | |
| color-decorative-olive-40 | --mds-color-decorative-olive-40 | #b4ba43 | |
| color-decorative-olive-50 | --mds-color-decorative-olive-50 | #999923 | |
| color-decorative-olive-60 | --mds-color-decorative-olive-60 | #7d7a18 | |
| color-decorative-olive-70 | --mds-color-decorative-olive-70 | #5c5813 | |
| color-decorative-olive-80 | --mds-color-decorative-olive-80 | #403d11 | |
| color-decorative-olive-90 | --mds-color-decorative-olive-90 | #29260d | |
| color-decorative-olive-100 | --mds-color-decorative-olive-100 | #1c1a0a |
decorative-lime
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-lime-10 | --mds-color-decorative-lime-10 | #f3f7e9 | |
| color-decorative-lime-20 | --mds-color-decorative-lime-20 | #ddf2ae | |
| color-decorative-lime-30 | --mds-color-decorative-lime-30 | #bce36f | |
| color-decorative-lime-40 | --mds-color-decorative-lime-40 | #93c437 | |
| color-decorative-lime-50 | --mds-color-decorative-lime-50 | #73a321 | |
| color-decorative-lime-60 | --mds-color-decorative-lime-60 | #588219 | |
| color-decorative-lime-70 | --mds-color-decorative-lime-70 | #416116 | |
| color-decorative-lime-80 | --mds-color-decorative-lime-80 | #2d4214 | |
| color-decorative-lime-90 | --mds-color-decorative-lime-90 | #1e2b10 | |
| color-decorative-lime-100 | --mds-color-decorative-lime-100 | #141c0c |
decorative-mint
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-mint-10 | --mds-color-decorative-mint-10 | #e9f7f3 | |
| color-decorative-mint-20 | --mds-color-decorative-mint-20 | #baf5e7 | |
| color-decorative-mint-30 | --mds-color-decorative-mint-30 | #74e8d1 | |
| color-decorative-mint-40 | --mds-color-decorative-mint-40 | #30c9b0 | |
| color-decorative-mint-50 | --mds-color-decorative-mint-50 | #16a693 | |
| color-decorative-mint-60 | --mds-color-decorative-mint-60 | #148579 | |
| color-decorative-mint-70 | --mds-color-decorative-mint-70 | #12615a | |
| color-decorative-mint-80 | --mds-color-decorative-mint-80 | #12423f | |
| color-decorative-mint-90 | --mds-color-decorative-mint-90 | #102b2a | |
| color-decorative-mint-100 | --mds-color-decorative-mint-100 | #0c1c1b |
decorative-cyan
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-cyan-10 | --mds-color-decorative-cyan-10 | #e6f9fa | |
| color-decorative-cyan-20 | --mds-color-decorative-cyan-20 | #b2f4f7 | |
| color-decorative-cyan-30 | --mds-color-decorative-cyan-30 | #67e7f0 | |
| color-decorative-cyan-40 | --mds-color-decorative-cyan-40 | #22c7d6 | |
| color-decorative-cyan-50 | --mds-color-decorative-cyan-50 | #00a3b5 | |
| color-decorative-cyan-60 | --mds-color-decorative-cyan-60 | #008094 | |
| color-decorative-cyan-70 | --mds-color-decorative-cyan-70 | #066070 | |
| color-decorative-cyan-80 | --mds-color-decorative-cyan-80 | #0a414d | |
| color-decorative-cyan-90 | --mds-color-decorative-cyan-90 | #0b2a30 | |
| color-decorative-cyan-100 | --mds-color-decorative-cyan-100 | #091c21 |
decorative-cobalt
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-cobalt-10 | --mds-color-decorative-cobalt-10 | #e5f8ff | |
| color-decorative-cobalt-20 | --mds-color-decorative-cobalt-20 | #c7eeff | |
| color-decorative-cobalt-30 | --mds-color-decorative-cobalt-30 | #99ddff | |
| color-decorative-cobalt-40 | --mds-color-decorative-cobalt-40 | #5ebff7 | |
| color-decorative-cobalt-50 | --mds-color-decorative-cobalt-50 | #279be8 | |
| color-decorative-cobalt-60 | --mds-color-decorative-cobalt-60 | #0a78cc | |
| color-decorative-cobalt-70 | --mds-color-decorative-cobalt-70 | #08599c | |
| color-decorative-cobalt-80 | --mds-color-decorative-cobalt-80 | #103c63 | |
| color-decorative-cobalt-90 | --mds-color-decorative-cobalt-90 | #12283d | |
| color-decorative-cobalt-100 | --mds-color-decorative-cobalt-100 | #0f1a26 |
decorative-slate
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-slate-10 | --mds-color-decorative-slate-10 | #f2f4ff | |
| color-decorative-slate-20 | --mds-color-decorative-slate-20 | #e3e7fa | |
| color-decorative-slate-30 | --mds-color-decorative-slate-30 | #ced2ed | |
| color-decorative-slate-40 | --mds-color-decorative-slate-40 | #b0b4d9 | |
| color-decorative-slate-50 | --mds-color-decorative-slate-50 | #8c91bd | |
| color-decorative-slate-60 | --mds-color-decorative-slate-60 | #6f739e | |
| color-decorative-slate-70 | --mds-color-decorative-slate-70 | #535573 | |
| color-decorative-slate-80 | --mds-color-decorative-slate-80 | #393a47 | |
| color-decorative-slate-90 | --mds-color-decorative-slate-90 | #26262b | |
| color-decorative-slate-100 | --mds-color-decorative-slate-100 | #1a1a1c |
decorative-violet
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-violet-10 | --mds-color-decorative-violet-10 | #f8f2fc | |
| color-decorative-violet-20 | --mds-color-decorative-violet-20 | #f0e3fc | |
| color-decorative-violet-30 | --mds-color-decorative-violet-30 | #e2cafc | |
| color-decorative-violet-40 | --mds-color-decorative-violet-40 | #c7a5fa | |
| color-decorative-violet-50 | --mds-color-decorative-violet-50 | #a87ff0 | |
| color-decorative-violet-60 | --mds-color-decorative-violet-60 | #875ae0 | |
| color-decorative-violet-70 | --mds-color-decorative-violet-70 | #643abd | |
| color-decorative-violet-80 | --mds-color-decorative-violet-80 | #432c78 | |
| color-decorative-violet-90 | --mds-color-decorative-violet-90 | #29223d | |
| color-decorative-violet-100 | --mds-color-decorative-violet-100 | #1b1824 |
decorative-purple
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-purple-10 | --mds-color-decorative-purple-10 | #fcf2fc | |
| color-decorative-purple-20 | --mds-color-decorative-purple-20 | #fce1fc | |
| color-decorative-purple-30 | --mds-color-decorative-purple-30 | #fac3f8 | |
| color-decorative-purple-40 | --mds-color-decorative-purple-40 | #f294f1 | |
| color-decorative-purple-50 | --mds-color-decorative-purple-50 | #e060de | |
| color-decorative-purple-60 | --mds-color-decorative-purple-60 | #c233c4 | |
| color-decorative-purple-70 | --mds-color-decorative-purple-70 | #932099 | |
| color-decorative-purple-80 | --mds-color-decorative-purple-80 | #601e66 | |
| color-decorative-purple-90 | --mds-color-decorative-purple-90 | #3b1840 | |
| color-decorative-purple-100 | --mds-color-decorative-purple-100 | #251329 |
decorative-pink
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-decorative-pink-10 | --mds-color-decorative-pink-10 | #fff2f5 | |
| color-decorative-pink-20 | --mds-color-decorative-pink-20 | #ffe0e7 | |
| color-decorative-pink-30 | --mds-color-decorative-pink-30 | #ffc7d2 | |
| color-decorative-pink-40 | --mds-color-decorative-pink-40 | #fc97aa | |
| color-decorative-pink-50 | --mds-color-decorative-pink-50 | #f0677e | |
| color-decorative-pink-60 | --mds-color-decorative-pink-60 | #d43b52 | |
| color-decorative-pink-70 | --mds-color-decorative-pink-70 | #a12a3a | |
| color-decorative-pink-80 | --mds-color-decorative-pink-80 | #66262d | |
| color-decorative-pink-90 | --mds-color-decorative-pink-90 | #3b1e21 | |
| color-decorative-pink-100 | --mds-color-decorative-pink-100 | #241617 |
mobile
mobile-default-light
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-default-light-primary | --mds-color-mobile-default-light-primary | #f7f7f7 | |
| color-mobile-default-light-secondary | --mds-color-mobile-default-light-secondary | #ffffff |
mobile-default-dark
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-default-dark-primary | --mds-color-mobile-default-dark-primary | #000000 | |
| color-mobile-default-dark-secondary | --mds-color-mobile-default-dark-secondary | #1a1a1a |
mobile-indigo-light
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-indigo-light-primary | --mds-color-mobile-indigo-light-primary | #ebeffc | |
| color-mobile-indigo-light-secondary | --mds-color-mobile-indigo-light-secondary | #f7f9ff |
mobile-indigo-dark
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-indigo-dark-primary | --mds-color-mobile-indigo-dark-primary | #0e111a | |
| color-mobile-indigo-dark-secondary | --mds-color-mobile-indigo-dark-secondary | #13182b |
mobile-jade-light
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-jade-light-primary | --mds-color-mobile-jade-light-primary | #e6f2f1 | |
| color-mobile-jade-light-secondary | --mds-color-mobile-jade-light-secondary | #f7fcfc |
mobile-jade-dark
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-jade-dark-primary | --mds-color-mobile-jade-dark-primary | #021412 | |
| color-mobile-jade-dark-secondary | --mds-color-mobile-jade-dark-secondary | #05201c |
mobile-bronze-light
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-bronze-light-primary | --mds-color-mobile-bronze-light-primary | #f5efe4 | |
| color-mobile-bronze-light-secondary | --mds-color-mobile-bronze-light-secondary | #fcfaf4 |
mobile-bronze-dark
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-bronze-dark-primary | --mds-color-mobile-bronze-dark-primary | #171002 | |
| color-mobile-bronze-dark-secondary | --mds-color-mobile-bronze-dark-secondary | #231807 |
mobile-rose-light
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-rose-light-primary | --mds-color-mobile-rose-light-primary | #fcebf5 | |
| color-mobile-rose-light-secondary | --mds-color-mobile-rose-light-secondary | #fff9fd |
mobile-rose-dark
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-rose-dark-primary | --mds-color-mobile-rose-dark-primary | #1f0615 | |
| color-mobile-rose-dark-secondary | --mds-color-mobile-rose-dark-secondary | #30041e |
mobile-lavender-light
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-lavender-light-primary | --mds-color-mobile-lavender-light-primary | #f4ebff | |
| color-mobile-lavender-light-secondary | --mds-color-mobile-lavender-light-secondary | #fbf7ff |
mobile-lavender-dark
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-mobile-lavender-dark-primary | --mds-color-mobile-lavender-dark-primary | #18082b | |
| color-mobile-lavender-dark-secondary | --mds-color-mobile-lavender-dark-secondary | #27163b |
partner
partner
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-partner-pdf | --mds-color-partner-pdf | #ee0507 | |
| color-partner-word | --mds-color-partner-word | #0078d6 | |
| color-partner-powerpoint | --mds-color-partner-powerpoint | #d93e17 | |
| color-partner-excel | --mds-color-partner-excel | #00893e | |
| color-partner-onenote | --mds-color-partner-onenote | #b839db | |
| color-partner-sheets | --mds-color-partner-sheets | #f4b400 | |
| color-partner-slides | --mds-color-partner-slides | #0f9d58 | |
| color-partner-keynote | --mds-color-partner-keynote | #029cfb | |
| color-partner-doc | --mds-color-partner-doc | #4285f4 |
highcontrast
highcontrast-black
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-highcontrast-black-WindowTextColor | --mds-color-highcontrast-black-window-text-color | #ffffff | |
| color-highcontrast-black-HotlightColor | --mds-color-highcontrast-black-hotlight-color | #ffff00 | |
| color-highcontrast-black-GrayTextColor | --mds-color-highcontrast-black-gray-text-color | #3ff23f | |
| color-highcontrast-black-HighlightTextColor | --mds-color-highcontrast-black-highlight-text-color | #000000 | |
| color-highcontrast-black-HighlightColor | --mds-color-highcontrast-black-highlight-color | #1aebff | |
| color-highcontrast-black-ButtonTextColor | --mds-color-highcontrast-black-button-text-color | #ffffff | |
| color-highcontrast-black-ButtonFaceColor | --mds-color-highcontrast-black-button-face-color | #000000 | |
| color-highcontrast-black-WindowColor | --mds-color-highcontrast-black-window-color | #000000 |
highcontrast-white
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-highcontrast-white-WindowTextColor | --mds-color-highcontrast-white-window-text-color | #000000 | |
| color-highcontrast-white-HotlightColor | --mds-color-highcontrast-white-hotlight-color | #00009f | |
| color-highcontrast-white-GrayTextColor | --mds-color-highcontrast-white-gray-text-color | #600000 | |
| color-highcontrast-white-HighlightTextColor | --mds-color-highcontrast-white-highlight-text-color | #ffffff | |
| color-highcontrast-white-HighlightColor | --mds-color-highcontrast-white-highlight-color | #37006e | |
| color-highcontrast-white-ButtonTextColor | --mds-color-highcontrast-white-button-text-color | #000000 | |
| color-highcontrast-white-ButtonFaceColor | --mds-color-highcontrast-white-button-face-color | #ffffff | |
| color-highcontrast-white-WindowColor | --mds-color-highcontrast-white-window-color | #ffffff |
gradient
gradient-default-light-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-default-light-primary-0 | --mds-color-gradient-default-light-primary-0 | #f0f0f0 | |
| color-gradient-default-light-primary-1 | --mds-color-gradient-default-light-primary-1 | #ffffff |
gradient-default-light-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-default-light-secondary-0 | --mds-color-gradient-default-light-secondary-0 | #fafafa | |
| color-gradient-default-light-secondary-1 | --mds-color-gradient-default-light-secondary-1 | #ffffff |
gradient-default-dark-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-default-dark-primary-0 | --mds-color-gradient-default-dark-primary-0 | #1a1a1a | |
| color-gradient-default-dark-primary-1 | --mds-color-gradient-default-dark-primary-1 | #0f0f0f |
gradient-default-dark-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-default-dark-secondary-0 | --mds-color-gradient-default-dark-secondary-0 | #262626 | |
| color-gradient-default-dark-secondary-1 | --mds-color-gradient-default-dark-secondary-1 | #0f0f0f |
gradient-indigo-light-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-indigo-light-primary-0 | --mds-color-gradient-indigo-light-primary-0 | #ebeffc | |
| color-gradient-indigo-light-primary-1 | --mds-color-gradient-indigo-light-primary-1 | #ffffff |
gradient-indigo-light-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-indigo-light-secondary-0 | --mds-color-gradient-indigo-light-secondary-0 | #f7f9ff | |
| color-gradient-indigo-light-secondary-1 | --mds-color-gradient-indigo-light-secondary-1 | #ffffff |
gradient-indigo-dark-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-indigo-dark-primary-0 | --mds-color-gradient-indigo-dark-primary-0 | #13182b | |
| color-gradient-indigo-dark-primary-1 | --mds-color-gradient-indigo-dark-primary-1 | #0e111a |
gradient-indigo-dark-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-indigo-dark-secondary-0 | --mds-color-gradient-indigo-dark-secondary-0 | #212536 | |
| color-gradient-indigo-dark-secondary-1 | --mds-color-gradient-indigo-dark-secondary-1 | #0e111a |
gradient-jade-light-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-jade-light-primary-0 | --mds-color-gradient-jade-light-primary-0 | #e6f2f1 | |
| color-gradient-jade-light-primary-1 | --mds-color-gradient-jade-light-primary-1 | #ffffff |
gradient-jade-light-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-jade-light-secondary-0 | --mds-color-gradient-jade-light-secondary-0 | #f7fcfc | |
| color-gradient-jade-light-secondary-1 | --mds-color-gradient-jade-light-secondary-1 | #ffffff |
gradient-jade-dark-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-jade-dark-primary-0 | --mds-color-gradient-jade-dark-primary-0 | #001c18 | |
| color-gradient-jade-dark-primary-1 | --mds-color-gradient-jade-dark-primary-1 | #021412 |
gradient-jade-dark-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-jade-dark-secondary-0 | --mds-color-gradient-jade-dark-secondary-0 | #122925 | |
| color-gradient-jade-dark-secondary-1 | --mds-color-gradient-jade-dark-secondary-1 | #021412 |
gradient-bronze-light-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-bronze-light-primary-0 | --mds-color-gradient-bronze-light-primary-0 | #f5efe4 | |
| color-gradient-bronze-light-primary-1 | --mds-color-gradient-bronze-light-primary-1 | #ffffff |
gradient-bronze-light-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-bronze-light-secondary-0 | --mds-color-gradient-bronze-light-secondary-0 | #fcfaf4 | |
| color-gradient-bronze-light-secondary-1 | --mds-color-gradient-bronze-light-secondary-1 | #ffffff |
gradient-bronze-dark-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-bronze-dark-primary-0 | --mds-color-gradient-bronze-dark-primary-0 | #1f1402 | |
| color-gradient-bronze-dark-primary-1 | --mds-color-gradient-bronze-dark-primary-1 | #171002 |
gradient-bronze-dark-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-bronze-dark-secondary-0 | --mds-color-gradient-bronze-dark-secondary-0 | #2e2515 | |
| color-gradient-bronze-dark-secondary-1 | --mds-color-gradient-bronze-dark-secondary-1 | #171002 |
gradient-rose-light-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-rose-light-primary-0 | --mds-color-gradient-rose-light-primary-0 | #fcebf5 | |
| color-gradient-rose-light-primary-1 | --mds-color-gradient-rose-light-primary-1 | #ffffff |
gradient-rose-light-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-rose-light-secondary-0 | --mds-color-gradient-rose-light-secondary-0 | #fff9fd | |
| color-gradient-rose-light-secondary-1 | --mds-color-gradient-rose-light-secondary-1 | #ffffff |
gradient-rose-dark-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-rose-dark-primary-0 | --mds-color-gradient-rose-dark-primary-0 | #30041e | |
| color-gradient-rose-dark-primary-1 | --mds-color-gradient-rose-dark-primary-1 | #1f0615 |
gradient-rose-dark-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-rose-dark-secondary-0 | --mds-color-gradient-rose-dark-secondary-0 | #40162e | |
| color-gradient-rose-dark-secondary-1 | --mds-color-gradient-rose-dark-secondary-1 | #1f0615 |
gradient-lavender-light-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-lavender-light-primary-0 | --mds-color-gradient-lavender-light-primary-0 | #f4ebff | |
| color-gradient-lavender-light-primary-1 | --mds-color-gradient-lavender-light-primary-1 | #ffffff |
gradient-lavender-light-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-lavender-light-secondary-0 | --mds-color-gradient-lavender-light-secondary-0 | #fbf7ff | |
| color-gradient-lavender-light-secondary-1 | --mds-color-gradient-lavender-light-secondary-1 | #ffffff |
gradient-lavender-dark-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-lavender-dark-primary-0 | --mds-color-gradient-lavender-dark-primary-0 | #231237 | |
| color-gradient-lavender-dark-primary-1 | --mds-color-gradient-lavender-dark-primary-1 | #18082b |
gradient-lavender-dark-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-gradient-lavender-dark-secondary-0 | --mds-color-gradient-lavender-dark-secondary-0 | #301a4a | |
| color-gradient-lavender-dark-secondary-1 | --mds-color-gradient-lavender-dark-secondary-1 | #18082b |