Comet Tokens

Each token stores a choice (like a reusable color) or a choice applied to a context (that color applied to a background or text). Our design system applies tokens liberally throughout built components.

Designers and developers should use tokens to refer to essential, reusable values in their work to pursue a scalable and consistent visual system for UI development. In particular, the system automates the transformation of tokens stored in YAML into JSON and Stylus variables for reuse directly in your projects. Additional transformations can be made available upon request.

Color

Background Color

Use background color tokens to consistently apply neutrals to commonly encountered light and dark interface blocks.

Variable Name	Value
`$comet-background-color-default`	#FFFFFF
`$comet-background-color-light`	#E2E4E9
`$comet-background-color-dark`	#2B303B
`$comet-background-color-hover-transparency`	.2
`$comet-background-color-disabled`	#E2E4E9
`$comet-background-color-transparency-over-image`	.5
`$comet-background-color-transparency-over-image-hover`	1
`$comet-background-color-image-matte`	#0B0C0F
`$comet-background-color-feedback-success`	#DBF0DB
`$comet-background-color-feedback-error`	#F9D6D2
`$comet-background-color-feedback-warning`	#FAF4D1
`$comet-background-color-feedback-new`	#FFEACC
`$comet-background-color-block-light`	#E2E4E9
`$comet-background-color-block-dark`	#576075

Text Color

Use text colors for commonly encountered cases, including reversing type color on dark backgrounds. For more information, refer to Typography guidelines.

Variable Name	Value
`$comet-text-color-primary-default`	#2B303B
`$comet-text-color-primary-on-light`	#2B303B
`$comet-text-color-primary-on-dark`	#FFFFFF
`$comet-text-color-secondary-default`	#576075
`$comet-text-color-secondary-on-light`	#576075
`$comet-text-color-secondary-on-dark`	#C4C9D4
`$comet-text-color-link-default`	#2D6A9F
`$comet-text-color-link-on-light`	#2D6A9F
`$comet-text-color-link-on-dark`	#FFFFFF
`$comet-text-color-error-default`	#B42818
`$comet-text-color-error-on-light`	#B42818
`$comet-text-color-error-on-dark`	#FFFFFF
`$comet-text-color-disabled`	#8A93A8
`$comet-text-color-default`	#2B303B
`$comet-text-color-on-light`	#2B303B
`$comet-text-color-on-dark`	#FFFFFF
`$comet-text-color-light`	#6C7893

Options

Apply colors from the following options when a more specific option for background, text or borders isn't already available.

Variable Name	Value
`$comet-color-neutral-5`	#0B0C0F
`$comet-color-neutral-10`	#16181D
`$comet-color-neutral-15`	#21242C
`$comet-color-neutral-20`	#2B303B
`$comet-color-neutral-25`	#363C49
`$comet-color-neutral-30`	#414858
`$comet-color-neutral-32`	#404653
`$comet-color-neutral-38`	#535C70
`$comet-color-neutral-40`	#576075
`$comet-color-neutral-42`	#58627D
`$comet-color-neutral-50`	#6C7893
`$comet-color-neutral-55`	#7B869D
`$comet-color-neutral-60`	#8A93A8
`$comet-color-neutral-65`	#98A1B3
`$comet-color-neutral-70`	#A7AEBE
`$comet-color-neutral-80`	#C4C9D4
`$comet-color-neutral-90`	#E2E4E9
`$comet-color-neutral-95`	#F0F2F4
`$comet-color-neutral-100`	#FFFFFF
`$comet-color-white`	#FFFFFF
`$comet-color-black`	#0B0C0F
`$comet-color-blue-20`	#5aa5cd
`$comet-color-blue-40`	#2D6A9F
`$comet-color-blue-53`	#3277B3
`$comet-color-blue-90`	#d8e6f4
`$comet-color-azure-5`	#060D14
`$comet-color-azure-10`	#0B1A28
`$comet-color-azure-20`	#163550
`$comet-color-azure-30`	#224F77
`$comet-color-azure-40`	#2D6A9F
`$comet-color-azure-50`	#3884C7
`$comet-color-azure-60`	#609DD2
`$comet-color-azure-70`	#88B5DD
`$comet-color-azure-80`	#AFCEE9
`$comet-color-azure-90`	#D7E6F4
`$comet-color-azure-dark`	#163550
`$comet-color-azure-default`	#2D6A9F
`$comet-color-azure-light`	#609DD2
`$comet-color-purple-5`	#0D0614
`$comet-color-purple-10`	#190B28
`$comet-color-purple-20`	#331650
`$comet-color-purple-30`	#4D2277
`$comet-color-purple-40`	#662D9F
`$comet-color-purple-50`	#7F38C7
`$comet-color-purple-55`	#8c4ccd
`$comet-color-purple-60`	#9960D2
`$comet-color-purple-70`	#B288DD
`$comet-color-purple-80`	#CCAFE9
`$comet-color-purple-90`	#E5D7F4
`$comet-color-lime-5`	#0D1604
`$comet-color-lime-10`	#1B2B08
`$comet-color-lime-20`	#355610
`$comet-color-lime-30`	#508118
`$comet-color-lime-40`	#6BAC20
`$comet-color-lime-50`	#85D728
`$comet-color-lime-60`	#9EDF53
`$comet-color-lime-70`	#9EDF53
`$comet-color-lime-80`	#CEEFA9
`$comet-color-lime-90`	#E7F7D4
`$comet-color-tangerine-5`	#160903
`$comet-color-tangerine-10`	#160903
`$comet-color-tangerine-20`	#5A220C
`$comet-color-tangerine-30`	#873312
`$comet-color-tangerine-40`	#B44418
`$comet-color-tangerine-50`	#E0561F
`$comet-color-tangerine-60`	#E7774B
`$comet-color-tangerine-70`	#ED9978
`$comet-color-tangerine-80`	#F3BBA5
`$comet-color-tangerine-90`	#F9DDD2
`$comet-color-violet-5`	#0A0317
`$comet-color-violet-10`	#14062D
`$comet-color-violet-20`	#270C5A
`$comet-color-violet-30`	#3B1287
`$comet-color-violet-40`	#4E17B5
`$comet-color-violet-50`	#621DE2
`$comet-color-violet-60`	#814AE8
`$comet-color-violet-70`	#A178ED
`$comet-color-violet-80`	#C0A5F3
`$comet-color-violet-90`	#E0D2F9
`$comet-color-emerald-5`	#061411
`$comet-color-emerald-10`	#0C2722
`$comet-color-emerald-20`	#174F44
`$comet-color-emerald-30`	#237667
`$comet-color-emerald-40`	#2F9D89
`$comet-color-emerald-50`	#3BC4AB
`$comet-color-emerald-60`	#62D0BC
`$comet-color-emerald-70`	#89DCCD
`$comet-color-emerald-80`	#B0E8DD
`$comet-color-emerald-90`	#D8F3EE
`$comet-color-emerald-dark`	#174F44
`$comet-color-emerald-default`	#2F9D89
`$comet-color-emerald-light`	#62D0BC
`$comet-color-midnight-5`	#020D17
`$comet-color-midnight-10`	#041B2F
`$comet-color-midnight-20`	#08365E
`$comet-color-midnight-30`	#0C518D
`$comet-color-midnight-40`	#106CBC
`$comet-color-midnight-50`	#1487EB
`$comet-color-midnight-60`	#439FEF
`$comet-color-midnight-70`	#72B7F3
`$comet-color-midnight-80`	#A1CFF7
`$comet-color-midnight-90`	#D0E7FB
`$comet-color-midnight-dark`	#08365E
`$comet-color-midnight-default`	#106CBC
`$comet-color-midnight-light`	#439FEF
`$comet-color-teal-5`	#071112
`$comet-color-teal-10`	#0E2325
`$comet-color-teal-20`	#1C454A
`$comet-color-teal-30`	#2A686F
`$comet-color-teal-40`	#388B94
`$comet-color-teal-50`	#46ADB9
`$comet-color-teal-60`	#6BBEC7
`$comet-color-teal-70`	#90CED5
`$comet-color-teal-80`	#B5DEE3
`$comet-color-teal-90`	#DAEFF1
`$comet-color-orchid-5`	#090811
`$comet-color-orchid-10`	#121122
`$comet-color-orchid-20`	#242145
`$comet-color-orchid-30`	#363267
`$comet-color-orchid-40`	#48428A
`$comet-color-orchid-50`	#5A53AC
`$comet-color-orchid-60`	#7B75BD
`$comet-color-orchid-70`	#9C98CD
`$comet-color-orchid-80`	#BDBADE
`$comet-color-orchid-90`	#DEDDEE
`$comet-color-orchid-dark`	#242145
`$comet-color-orchid-default`	#48428A
`$comet-color-orchid-light`	#7B75BD
`$comet-color-plum-5`	#12080D
`$comet-color-plum-10`	#240F1B
`$comet-color-plum-20`	#471F36
`$comet-color-plum-30`	#6B2E51
`$comet-color-plum-40`	#8F3D6B
`$comet-color-plum-50`	#B34D86
`$comet-color-plum-60`	#C2709E
`$comet-color-plum-70`	#D194B7
`$comet-color-plum-80`	#E0B8CF
`$comet-color-plum-90`	#F0DBE7
`$comet-color-red-5`	#160503
`$comet-color-red-10`	#2D0A06
`$comet-color-red-20`	#5A140C
`$comet-color-red-30`	#871E12
`$comet-color-red-35`	#9D2315
`$comet-color-red-40`	#B42818
`$comet-color-red-50`	#E0321F
`$comet-color-red-60`	#E75B4B
`$comet-color-red-70`	#ED8478
`$comet-color-red-80`	#F3ADA5
`$comet-color-red-90`	#F9D6D2
`$comet-color-green-5`	#081208
`$comet-color-green-10`	#0F240F
`$comet-color-green-20`	#1E481F
`$comet-color-green-25`	#265A26
`$comet-color-green-30`	#2D6C2E
`$comet-color-green-35`	#357E36
`$comet-color-green-40`	#3C903E
`$comet-color-green-45`	#43A245
`$comet-color-green-50`	#4BB44D
`$comet-color-green-60`	#6FC371
`$comet-color-green-70`	#93D294
`$comet-color-green-80`	#B7E1B8
`$comet-color-green-90`	#DBF0DB
`$comet-color-yellow-5`	#171403
`$comet-color-yellow-10`	#2E2805
`$comet-color-yellow-20`	#5C500A
`$comet-color-yellow-30`	#8A770F
`$comet-color-yellow-40`	#B89F14
`$comet-color-yellow-45`	#CFB317
`$comet-color-yellow-50`	#E6C719
`$comet-color-yellow-55`	#E8CD30
`$comet-color-yellow-60`	#EBD247
`$comet-color-yellow-70`	#F0DD75
`$comet-color-yellow-80`	#F5E9A3
`$comet-color-yellow-90`	#FAF4D1
`$comet-color-orange-5`	#1A0F00
`$comet-color-orange-10`	#331E00
`$comet-color-orange-20`	#663c00
`$comet-color-orange-30`	#995900
`$comet-color-orange-40`	#CC7700
`$comet-color-orange-50`	#FF9500
`$comet-color-orange-60`	#FFAA33
`$comet-color-orange-70`	#FFBF66
`$comet-color-orange-80`	#FFD599
`$comet-color-orange-90`	#FFEACC
`$comet-color-surf-5`	#011219
`$comet-color-surf-10`	#012432
`$comet-color-surf-20`	#034863
`$comet-color-surf-30`	#046C95
`$comet-color-surf-40`	#0590C7
`$comet-color-surf-50`	#06B4F9
`$comet-color-surf-60`	#38C3FA
`$comet-color-surf-70`	#6AD2FB
`$comet-color-surf-80`	#9CE1FC
`$comet-color-surf-90`	#CDF0FE
`$comet-color-goldenrod-5`	#171303
`$comet-color-goldenrod-10`	#2E2505
`$comet-color-goldenrod-20`	#5C4A0A
`$comet-color-goldenrod-30`	#8A6F0F
`$comet-color-goldenrod-40`	#AC8B13
`$comet-color-goldenrod-50`	#E6B919
`$comet-color-goldenrod-60`	#EBC747
`$comet-color-goldenrod-70`	#F0D575
`$comet-color-goldenrod-80`	#F5E3A3
`$comet-color-goldenrod-90`	#FAF1D1
`$comet-color-maroon-41`	#9A3737
`$comet-color-maroon-51`	#BC4747
`$comet-color-maroon-dark`	#9A3737
`$comet-color-maroon-default`	#BC4747
`$comet-color-interactive-lighter`	#AFCEE9
`$comet-color-interactive-light`	#609DD2
`$comet-color-interactive-default`	#2D6A9F
`$comet-color-interactive-dark`	#163550
`$comet-color-interactive-text`	#060D14
`$comet-color-visited-lighter`	#CCAFE9
`$comet-color-visited-light`	#9960D2
`$comet-color-visited-default`	#662D9F
`$comet-color-visited-dark`	#331650
`$comet-color-visited-text`	#0D0614
`$comet-color-science-lighter`	#CEEFA9
`$comet-color-science-light`	#9EDF53
`$comet-color-science-default`	#6BAC20
`$comet-color-science-dark`	#355610
`$comet-color-science-text`	#0D1604
`$comet-color-social-studies-lighter`	#F3BBA5
`$comet-color-social-studies-light`	#E7774B
`$comet-color-social-studies-default`	#B44418
`$comet-color-social-studies-dark`	#5A220C
`$comet-color-social-studies-text`	#160903
`$comet-color-math-lighter`	#C0A5F3
`$comet-color-math-light`	#814AE8
`$comet-color-math-default`	#4E17B5
`$comet-color-math-dark`	#270C5A
`$comet-color-math-text`	#0A0317
`$comet-color-stem-lighter`	#B0E8DD
`$comet-color-stem-light`	#62D0BC
`$comet-color-stem-default`	#2F9D89
`$comet-color-stem-dark`	#174F44
`$comet-color-stem-text`	#061411
`$comet-color-comet-lighter`	#A1CFF7
`$comet-color-comet-light`	#439FEF
`$comet-color-comet-default`	#106CBC
`$comet-color-comet-dark`	#08365E
`$comet-color-comet-text`	#020D17
`$comet-color-professional-learning-lighter`	#B5DEE3
`$comet-color-professional-learning-light`	#6BBEC7
`$comet-color-professional-learning-default`	#388B94
`$comet-color-professional-learning-dark`	#1C454A
`$comet-color-professional-learning-text`	#071112
`$comet-color-coding-lighter`	#A1CFF7
`$comet-color-coding-light`	#439FEF
`$comet-color-coding-default`	#106CBC
`$comet-color-coding-dark`	#08365E
`$comet-color-coding-text`	#020D17
`$comet-color-espresso-lighter`	#BDBADE
`$comet-color-espresso-light`	#7B75BD
`$comet-color-espresso-default`	#48428A
`$comet-color-espresso-dark`	#242145
`$comet-color-espresso-text`	#090811
`$comet-color-health-relationships-lighter`	#E0B8CF
`$comet-color-health-relationships-light`	#C2709E
`$comet-color-health-relationships-default`	#8F3D6B
`$comet-color-health-relationships-dark`	#471F36
`$comet-color-health-relationships-text`	#12080D
`$comet-color-pathway-lighter`	#F5E3A3
`$comet-color-pathway-light`	#EBC747
`$comet-color-pathway-default`	#AC8B13
`$comet-color-pathway-dark`	#5C4A0A
`$comet-color-pathway-text`	#171303
`$comet-color-success-lighter`	#B7E1B8
`$comet-color-success-light`	#6FC371
`$comet-color-success-default`	#3C903E
`$comet-color-success-dark`	#1E481F
`$comet-color-success-text`	#081208
`$comet-color-error-lighter`	#F3ADA5
`$comet-color-error-light`	#E75B4B
`$comet-color-error-default`	#B42818
`$comet-color-error-dark`	#5A140C
`$comet-color-error-text`	#160503
`$comet-color-warning-lighter`	#FAF4D1
`$comet-color-warning-light`	#F0DD75
`$comet-color-warning-default`	#E6C719
`$comet-color-warning-dark`	#8A770F
`$comet-color-warning-text`	#171403
`$comet-color-new-lighter`	#FFEACC
`$comet-color-new-light`	#FFBF66
`$comet-color-new-default`	#FF9500
`$comet-color-new-dark`	#995900
`$comet-color-new-text`	#1A0F00
`$comet-color-uk-secondary-lighter`	#9CE1FC
`$comet-color-uk-secondary-light`	#38C3FA
`$comet-color-uk-secondary-default`	#0590C7
`$comet-color-uk-secondary-dark`	#034863
`$comet-color-uk-secondary-text`	#011219
`$comet-color-mystery-science-lighter`	#DCD9F2
`$comet-color-mystery-science-light`	#B9B3E5
`$comet-color-mystery-science-default`	#685BC7
`$comet-color-mystery-science-dark`	#403498
`$comet-color-mystery-science-darker`	#201A4C
`$comet-color-mystery-science-text`	#080713
`$comet-color-feedback-success-default`	#3C903E
`$comet-color-feedback-success-dark`	#1E481F
`$comet-color-feedback-success-light`	#6FC371
`$comet-color-feedback-error-default`	#B42818
`$comet-color-feedback-error-dark`	#5A140C
`$comet-color-feedback-error-light`	#E75B4B
`$comet-color-feedback-warning-default`	#E6C719
`$comet-color-feedback-warning-dark`	#8A770F
`$comet-color-feedback-warning-light`	#F0DD75
`$comet-color-feedback-new-default`	#FF9500
`$comet-color-feedback-new-dark`	#995900
`$comet-color-feedback-new-light`	#FFBF66
`$comet-color-feedback-correct`	#3C903E
`$comet-color-feedback-incorrect`	#B42818
`$comet-color-feedback-badge-notification`	#B42818
`$comet-color-assignment-not-started`	#008EE6
`$comet-color-assignment-in-progress`	#FF9854
`$comet-color-assignment-submitted`	#5257C0

Font

Family

Variable Name	Value
`$comet-font-family-display`	'Proxima Nova', Arial, sans-serif
`$comet-font-family-body`	'Proxima Nova', Arial, sans-serif
`$comet-font-family-serif`	'Droid Serif', Georgia, serif
`$comet-font-family-code`	Monaco

Size

Variable Name	Value
`$comet-font-size-rem-base`	16px
`$comet-font-size-default`	1.125rem
`$comet-font-size-s`	1rem
`$comet-font-size-paragraph`	1.125rem
`$comet-font-size-lead-paragraph`	1.5rem
`$comet-font-size-list-item`	1.125rem
`$comet-font-size-page-title`	3.5rem
`$comet-font-size-page-subtitle`	1.5rem
`$comet-font-size-header-level-1`	3.5rem
`$comet-font-size-header-level-2`	2.5rem
`$comet-font-size-header-level-3`	1.5rem
`$comet-font-size-header-level-3-subhead`	1rem
`$comet-font-size-header-level-4`	1.125rem
`$comet-font-size-header-level-5`	1rem
`$comet-font-size-button`	1.125rem
`$comet-font-size-byline`	1rem
`$comet-font-size-caption`	1rem
`$comet-font-size-code`	.875rem
`$comet-font-size-form-input`	1.125rem
`$comet-font-size-form-label`	1.125rem
`$comet-font-size-messaging`	1rem
`$comet-font-size-metadata`	.75rem
`$comet-font-size-microcopy`	1rem
`$comet-font-size-pill`	.875rem
`$comet-font-size-tab`	1.25rem
`$comet-font-size-table`	1rem
`$comet-font-size-vs`	.875rem

Line Height

Variable Name	Value

Size

Use size tokens to control the size of common objects. Do not apply size tokens to margin or padding; instead, use space tokens. For more information on icon sizes, refer to Iconography guidelines.

Variable Name	Value
`$comet-size-default`	16px
`$comet-size-xs`	4px
`$comet-size-s`	6px
`$comet-size-m`	8px
`$comet-size-l`	32px
`$comet-size-xl`	64px
`$comet-size-page-shell-nav-width`	270px

Icons

Variable Name	Value
`$comet-size-icon-xs`	12px
`$comet-size-icon-s`	16px
`$comet-size-icon-m`	20px
`$comet-size-icon-l`	24px
`$comet-size-icon-xl`	40px
`$comet-size-icon-xxl`	60px

Space

Use space tokens to separate elements within components and across components that display stacked or inline. For more information, refer to Space guidelines.

Variable Name	Value
`$comet-space-default`	16px
`$comet-space-xxs`	2px
`$comet-space-xs`	4px
`$comet-space-s`	8px
`$comet-space-m`	16px
`$comet-space-l`	32px
`$comet-space-xl`	64px
`$comet-space-inset-default`	16px 16px 16px 16px
`$comet-space-inset-xxs`	2px 2px 2px 2px
`$comet-space-inset-xs`	4px 4px 4px 4px
`$comet-space-inset-s`	8px 8px 8px 8px
`$comet-space-inset-m`	16px 16px 16px 16px
`$comet-space-inset-l`	32px 32px 32px 32px
`$comet-space-inset-xl`	64px 64px 64px 64px
`$comet-space-inset-squish-default`	8px 16px 8px 16px
`$comet-space-inset-squish-xs`	2px 4px 2px 4px
`$comet-space-inset-squish-s`	4px 8px 4px 8px
`$comet-space-inset-squish-m`	8px 16px 8px 16px
`$comet-space-inset-squish-l`	16px 32px 16px 32px
`$comet-space-inset-stretch-default`	24px 16px 24px 16px
`$comet-space-inset-stretch-s`	12px 8px 12px 8px
`$comet-space-inset-stretch-m`	24px 16px 24px 16px
`$comet-space-inset-stretch-l`	48px 32px 48px 32px
`$comet-space-stack-default`	0 0 16px 0
`$comet-space-stack-xs`	0 0 4px 0
`$comet-space-stack-s`	0 0 8px 0
`$comet-space-stack-m`	0 0 16px 0
`$comet-space-stack-l`	0 0 32px 0
`$comet-space-stack-xl`	0 0 64px 0
`$comet-space-grid-default`	0 16px 16px 0
`$comet-space-grid-xs`	0 4px 4px 0
`$comet-space-grid-s`	0 8px 8px 0
`$comet-space-grid-m`	0 16px 16px 0
`$comet-space-grid-l`	0 32px 32px 0
`$comet-space-grid-xl`	0 64px 64px 0
`$comet-space-inline-left-default`	0 16px 0 0
`$comet-space-inline-left-xs`	0 4px 0 0
`$comet-space-inline-left-s`	0 8px 0 0
`$comet-space-inline-left-m`	0 16px 0 0
`$comet-space-inline-left-l`	0 32px 0 0
`$comet-space-inline-right-default`	0 0 0 16px
`$comet-space-inline-right-xs`	0 0 0 4px
`$comet-space-inline-right-s`	0 0 0 8px
`$comet-space-inline-right-m`	0 0 0 16px
`$comet-space-inline-right-l`	0 0 0 32px

Shadow

Variable Name	Value
`$comet-shadow-color`	rgba(0, 0, 0, .05)
`$comet-shadow-block-default`	2px 3px 4px 0 rgba(0, 0, 0, .05)
`$comet-shadow-block-light`	1px 1px 2px 0 rgba(0, 0, 0, .05)
`$comet-shadow-block-edge-inset-left`	inset -4px 0 4px 0 rgba(0, 0, 0, .05)
`$comet-shadow-block-edge-inset-right`	inset 4px 0 4px 0 rgba(0, 0, 0, .05)
`$comet-shadow-block-edge-inset-top`	inset 0 4px 8px rgba(0, 0, 0, .05)
`$comet-shadow-block-edge-inset`	inset 0 0 12px rgba(0, 0, 0, .5)
`$comet-shadow-text-default`	2px 2px 4px rgba(0, 0, 0, .68)
`$comet-shadow-text-title-photo-overlay`	3px 3px 10px rgba(0, 0, 0, .95)
`$comet-shadow-text-button-pressed`	0 1px 2px rgba(26, 26, 26, .2)
`$comet-shadow-z-shadow-0`	none
`$comet-shadow-z-shadow-1`	0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2)
`$comet-shadow-z-shadow-2`	0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .3)
`$comet-shadow-z-shadow-3`	0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .3)
`$comet-shadow-z-shadow-4`	0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .3)
`$comet-shadow-z-shadow-5`	0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .3)
`$comet-shadow-z-shadow-10`	0 32px 48px 4px rgba(0, 0, 0, .28), 0 12px 60px 10px rgba(0, 0, 0, .24), 0 16px 20px -10px rgba(0, 0, 0, .6)

Border

Variable Name	Value
`$comet-border-hairline-default`	solid 1px #C4C9D4
`$comet-border-hairline-on-light`	solid 1px #C4C9D4
`$comet-border-hairline-on-dark`	solid 1px #58627D
`$comet-border-activetab-width`	8px
`$comet-border-activetab-default`	solid 8px #428BCA
`$comet-border-activetab-m`	solid 8px #428BCA
`$comet-border-activetab-s`	solid 4px #428BCA
`$comet-border-radius`	4px

Animation

Variable Name	Value
`$comet-transition-default`	.25s ease-in-out
`$comet-transition-fade-in`	.25s ease-in
`$comet-transition-fade-out`	.45s ease-out
`$comet-transition-hover`	.25s ease-in-out

Breakpoints

Variable Name	Value
`$comet-breakpoints-handset-portrait`	320px
`$comet-breakpoints-handset-landscape`	480px
`$comet-breakpoints-handset-wide-landscape`	568px
`$comet-breakpoints-tablet-narrow-portrait`	600px
`$comet-breakpoints-tablet-portrait`	768px
`$comet-breakpoints-tablet-landscape`	1024px
`$comet-breakpoints-tablet-wide-landscape`	1280px
`$comet-breakpoints-desktop`	1000px
`$comet-breakpoints-desktop-wide`	1440px

Themes

Themes are established to standardize application of design tokens to products and other dimensions. For more information on values and application, refer to the Color page.

Science

Variable Name	Value
`$comet-theme-product_science-color-default`	#6BAC20
`$comet-theme-product_science-color-dark`	#355610
`$comet-theme-product_science-color-light`	#9EDF53

Math

Variable Name	Value
`$comet-theme-product_math-color-default`	#4E17B5
`$comet-theme-product_math-color-dark`	#270C5A
`$comet-theme-product_math-color-light`	#814AE8

Variable Name	Value
`$comet-theme-product_social-studies-color-default`	#B44418
`$comet-theme-product_social-studies-color-dark`	#5A220C
`$comet-theme-product_social-studies-color-light`	#E7774B

Streaming

Variable Name	Value
`$comet-theme-product_streaming-color-default`	#106CBC
`$comet-theme-product_streaming-color-dark`	#08365E
`$comet-theme-product_streaming-color-light`	#439FEF

Color

Background Color

Text Color

Options

Font

Family

Size

Line Height

Size

Icons

Space

Shadow

Border

Animation

Breakpoints

Themes

Science

Math

Social Studies

Streaming

Comet