Tokens

Design tokens are fundamental options and decisions of a design system abstracted into hierarchical, reusable variables applied frequently across the experience.

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 #363C49
$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 #262626
$comet-background-color-feedback-success #DBF0DC
$comet-background-color-feedback-error #F9D4D2
$comet-background-color-feedback-warning #FAF4D1
$comet-background-color-feedback-new #FFEACC
$comet-background-color-block-light #F0F2F4
$comet-background-color-block-dark #58627D

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 #363C49
$comet-text-color-primary-on-light #363C49
$comet-text-color-primary-on-dark #FFFFFF
$comet-text-color-secondary-default #58627D
$comet-text-color-secondary-on-light #58627D
$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 #98A1B3
$comet-text-color-default #363C49
$comet-text-color-on-light #363C49
$comet-text-color-on-dark #FFFFFF
$comet-text-color-light #7B869D

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-white #FFFFFF
$comet-color-black #262626
$comet-color-neutral-15 #21242C
$comet-color-neutral-20 #2B303B
$comet-color-neutral-25 #363C49
$comet-color-neutral-32 #404653
$comet-color-neutral-38 #535C70
$comet-color-neutral-42 #58627D
$comet-color-neutral-50 #6C7893
$comet-color-neutral-55 #7B869D
$comet-color-neutral-65 #98A1B3
$comet-color-neutral-80 #C4C9D4
$comet-color-neutral-90 #E2E4E9
$comet-color-neutral-95 #F0F2F4
$comet-color-blue-20 #5aa5cd
$comet-color-blue-40 #2D6A9F
$comet-color-blue-53 #3277B3
$comet-color-blue-90 #d8e6f4
$comet-color-green-25 #265A26
$comet-color-green-35 #357E36
$comet-color-green-45 #43A245
$comet-color-green-90 #DBF0DC
$comet-color-red-35 #9D2315
$comet-color-red-40 #B42818
$comet-color-red-50 #E0301E
$comet-color-red-90 #F9D4D2
$comet-color-yellow-45 #CFB317
$comet-color-yellow-55 #E8CD30
$comet-color-yellow-70 #F0DD75
$comet-color-yellow-90 #FAF4D1
$comet-color-orange-40 #CC7700
$comet-color-orange-50 #FF9500
$comet-color-orange-60 #FFAA33
$comet-color-orange-90 #FFEACC
$comet-color-interactive-default #3277B3
$comet-color-interactive-dark #2D6A9F
$comet-color-feedback-success-default #357E36
$comet-color-feedback-success-dark #265A26
$comet-color-feedback-success-light #43A245
$comet-color-feedback-error-default #B42818
$comet-color-feedback-error-dark #9D2315
$comet-color-feedback-error-light #E0301E
$comet-color-feedback-warning-default #E8CD30
$comet-color-feedback-warning-dark #CFB317
$comet-color-feedback-warning-light #F0DD75
$comet-color-feedback-new-default #FF9500
$comet-color-feedback-new-dark #CC7700
$comet-color-feedback-new-light #FFAA33
$comet-color-feedback-correct #43A245
$comet-color-feedback-incorrect #E0301E
$comet-color-feedback-badge-notification #E0301E
$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)

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-hover .25s ease-in-out
$comet-transition-fade-in .25s ease-in
$comet-transition-fade-out .45s ease-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 #508118
$comet-theme-product_science-color-dark #355610
$comet-theme-product_science-color-light #5D971C

Math

Variable Name Value
$comet-theme-product_math-color-default #4C17B0
$comet-theme-product_math-color-dark #3B1287
$comet-theme-product_math-color-light #9161EA

Social Studies

Variable Name Value
$comet-theme-product_social-studies-color-default #C04A1A
$comet-theme-product_social-studies-color-dark #9D3C15
$comet-theme-product_social-studies-color-light #E0561F

Streaming

Variable Name Value
$comet-theme-product_streaming-color-default #0077C0
$comet-theme-product_streaming-color-dark #005E99
$comet-theme-product_streaming-color-light #008EE6