Web tokens
text
| Example | Token | Value |
|---|---|---|
cdr-color-text-primary | #4b4a48 | |
cdr-color-text-secondary | #736e65 | |
cdr-color-text-emphasis | #2e2e2b | |
cdr-color-text-brand | #1f513f | |
cdr-color-text-sale | #c7370f | |
cdr-color-text-inverse | #fafbf9 | |
cdr-color-text-disabled | #d5cfc3 | |
cdr-color-text-success | #2e6b34 | |
cdr-color-text-warning | #854714 | |
cdr-color-text-error | #811823 | |
cdr-color-text-info | #1b437e | |
cdr-color-text-message-error | #bb4045 | |
cdr-membership-vibrant-color-text-primary | #13352c | |
cdr-membership-vibrant-color-background-primary | #ffdc52 | |
cdr-membership-subtle-color-text-primary | #13352c | |
cdr-membership-subtle-color-background-primary | #bfb33e |
background
| Example | Token | Value |
|---|---|---|
cdr-color-background-transparent | rgba(255, 255, 255, 0) | |
cdr-color-background-primary | #ffffff | |
cdr-color-background-secondary | #F4F2ED | |
cdr-color-background-sale | #c7370f | |
cdr-color-background-brand-spruce | #1f513f | |
cdr-color-background-success | #ecf9e6 | |
cdr-color-background-info | #e2f4fe | |
cdr-color-background-warning | #fdf6e2 | |
cdr-color-background-error | #fcefe4 | |
cdr-color-background-message-default-01 | #f9f8f6 | |
cdr-color-background-message-default-02 | #e8e0ce | |
cdr-color-background-message-success | #ecf9e6 | |
cdr-color-background-message-success-01 | #f4fbf5 | |
cdr-color-background-message-success-02 | #d5e6cb | |
cdr-color-background-message-warning | #fdf6e2 | |
cdr-color-background-message-warning-01 | #fefcf1 | |
cdr-color-background-message-warning-02 | #f5e9b7 | |
cdr-color-background-message-error | #fcefe4 | |
cdr-color-background-message-error-01 | #fdf7f7 | |
cdr-color-background-message-error-02 | #eecbc1 | |
cdr-color-background-message-info | #e2f4fe | |
cdr-color-background-message-info-01 | #edf4f5 | |
cdr-color-background-message-info-02 | #c2d8db | |
cdr-color-background-message-sale | #c7370f |
border
| Example | Token | Value |
|---|---|---|
cdr-color-border-transparent | rgba(255, 255, 255, 0) | |
cdr-color-border-primary | #d5cfc3 | |
cdr-color-border-secondary | #958e83 | |
cdr-color-border-success | #3b8349 | |
cdr-color-border-warning | #b68b37 | |
cdr-color-border-error | #bb4045 | |
cdr-color-border-info | #406eb5 | |
cdr-color-border-message-default-01 | #726d64 | |
cdr-color-border-message-default-02 | #e8e0ce | |
cdr-color-border-message-success-01 | #3b8349 | |
cdr-color-border-message-success-02 | #d5e6cb | |
cdr-color-border-message-warning-01 | #b68b37 | |
cdr-color-border-message-warning-02 | #f5e9b7 | |
cdr-color-border-message-error-01 | #bb4045 | |
cdr-color-border-message-error-02 | #eecbc1 | |
cdr-color-border-message-info-01 | #408e86 | |
cdr-color-border-message-info-02 | #c2d8db |
icon
| Example | Token | Value |
|---|---|---|
cdr-color-icon-default | #958e83 | |
cdr-color-icon-emphasis | #4b4a48 | |
cdr-color-icon-link | #406eb5 | |
cdr-color-icon-disabled | #d5cfc3 | |
cdr-color-icon-message-default | #726d64 | |
cdr-color-icon-message-success | #3b8349 | |
cdr-color-icon-message-warning | #b68b37 | |
cdr-color-icon-message-error | #bb4045 | |
cdr-color-icon-message-info | #408e86 |
accordion
| Example | Token | Value |
|---|---|---|
cdr-color-background-accordion-hover | #fafbf9 |
button
| Example | Token | Value |
|---|---|---|
cdr-color-background-button-primary-rest | #1f513f | |
cdr-color-background-button-primary-active | #1f513f | |
cdr-color-background-button-primary-hover | #c7dfd1 | |
cdr-color-background-button-primary-icon-alt-hover | #fafbf9 | |
cdr-color-background-button-secondary-rest | #fafbf9 | |
cdr-color-background-button-secondary-active | #958e83 | |
cdr-color-background-button-secondary-hover | #f9f8f6 | |
cdr-color-background-button-secondary-disabled | #fafbf9 | |
cdr-color-background-button-dark-rest | #4b4a48 | |
cdr-color-background-button-dark-active | #4b4a48 | |
cdr-color-background-button-dark-hover | #edeae3 | |
cdr-color-background-button-sale-rest | #c7370f | |
cdr-color-background-button-sale-active | #c7370f | |
cdr-color-background-button-sale-hover | #fde2e2 | |
cdr-color-background-button-default-disabled | #d5cfc3 | |
cdr-color-background-button-icon-only-active | #f7f5f3 | |
cdr-color-text-button-primary | #fafbf9 | |
cdr-color-text-button-primary-hover | #1f513f | |
cdr-color-text-button-primary-active | #fafbf9 | |
cdr-color-text-button-primary-disabled | #ffffff | |
cdr-color-text-button-secondary | #4b4a48 | |
cdr-color-text-button-secondary-hover | #4b4a48 | |
cdr-color-text-button-secondary-active | #fafbf9 | |
cdr-color-text-button-secondary-disabled | #d5cfc3 | |
cdr-color-text-button-dark | #fafbf9 | |
cdr-color-text-button-dark-hover | #4b4a48 | |
cdr-color-text-button-dark-active | #fafbf9 | |
cdr-color-text-button-dark-disabled | #ffffff | |
cdr-color-text-button-sale | #ffffff | |
cdr-color-text-button-sale-hover | #c7370f | |
cdr-color-text-button-sale-active | #ffffff | |
cdr-color-text-button-sale-disabled | #ffffff | |
cdr-color-border-button-primary-rest | #1f513f | |
cdr-color-border-button-primary-active | #1f513f | |
cdr-color-border-button-primary-active-inset | #f7f5f3 | |
cdr-color-border-button-primary-hover | #1f513f | |
cdr-color-border-button-secondary-rest | #958e83 | |
cdr-color-border-button-secondary-active | #958e83 | |
cdr-color-border-button-secondary-active-inset | #f7f5f3 | |
cdr-color-border-button-secondary-hover | #4b4a48 | |
cdr-color-border-button-dark-rest | #4b4a48 | |
cdr-color-border-button-dark-active | #4b4a48 | |
cdr-color-border-button-dark-active-inset | #edeae3 | |
cdr-color-border-button-dark-hover | #4b4a48 | |
cdr-color-border-button-sale-rest | #c7370f | |
cdr-color-border-button-sale-active | #c7370f | |
cdr-color-border-button-sale-active-inset | #fde2e2 | |
cdr-color-border-button-sale-hover | #c7370f | |
cdr-color-border-button-default-disabled | #d5cfc3 | |
cdr-color-border-button-icon-only-active | #958e83 | |
cdr-membership-vibrant-color-text-button-primary-hover | #13352c | |
cdr-membership-vibrant-color-background-button-primary-rest | #13352c | |
cdr-membership-vibrant-color-background-button-primary-active | #13352c | |
cdr-membership-vibrant-color-border-button-primary-rest | #13352c | |
cdr-membership-vibrant-color-border-button-primary-active | #13352c | |
cdr-membership-vibrant-color-border-button-primary-hover | #13352c | |
cdr-membership-subtle-color-text-button-primary-hover | #13352c | |
cdr-membership-subtle-color-background-button-primary-rest | #13352c | |
cdr-membership-subtle-color-background-button-primary-active | #13352c | |
cdr-membership-subtle-color-border-button-primary-rest | #13352c | |
cdr-membership-subtle-color-border-button-primary-active | #13352c | |
cdr-membership-subtle-color-border-button-primary-hover | #13352c |
chip
| Example | Token | Value |
|---|---|---|
cdr-color-background-chip-default-rest | #ffffff | |
cdr-color-background-chip-default-disabled | #ffffff | |
cdr-color-background-chip-default-hover | #f7f5f3 | |
cdr-color-background-chip-default-focus | #ffffff | |
cdr-color-background-chip-default-active | #edeae3 | |
cdr-color-background-chip-default-selected | #d5cfc3 | |
cdr-color-background-chip-default-selected-hover | #edeae3 | |
cdr-color-background-chip-default-selected-focus | #d5cfc3 | |
cdr-color-text-chip-default | #4b4a48 | |
cdr-color-text-chip-disabled | #d5cfc3 | |
cdr-color-border-chip-default-rest | #958e83 | |
cdr-color-border-chip-default-disabled | #d5cfc3 | |
cdr-color-border-chip-default-hover | #958e83 | |
cdr-color-border-chip-default-focus | #4b4a48 | |
cdr-color-border-chip-default-active | #4b4a48 | |
cdr-color-border-chip-default-selected-rest | #4b4a48 | |
cdr-color-border-chip-default-selected-hover | #736e65 | |
cdr-color-border-chip-default-selected-focus | #4b4a48 |
input
| Example | Token | Value |
|---|---|---|
cdr-color-background-label-default-hover | #fafbf9 | |
cdr-color-background-label-default-active | #edeae3 | |
cdr-color-background-label-default-focus | #fafbf9 | |
cdr-color-background-label-secondary-hover | rgba(255, 255, 255, 0.75) | |
cdr-color-background-label-secondary-active | #ffffff | |
cdr-color-background-label-secondary-focus | rgba(255, 255, 255, 0.75) | |
cdr-color-background-input-default | rgba(247, 245, 243, 0.15) | |
cdr-color-background-input-secondary | rgba(255, 255, 255, 0.85) | |
cdr-color-background-input-error | rgba(255, 242, 242, 0.75) | |
cdr-color-background-input-default-hover | #fafbf9 | |
cdr-color-background-input-default-active | #fafbf9 | |
cdr-color-background-input-default-selected | #4b4a48 | |
cdr-color-background-input-secondary-active | #ffffff | |
cdr-color-background-input-default-selected-hover | #958e83 | |
cdr-color-background-input-default-disabled | #fafbf9 | |
cdr-color-background-input-default-selected-focus | #958e83 | |
cdr-color-background-input-default-focus | #fafbf9 | |
cdr-color-text-input-default | #2e2e2b | |
cdr-color-text-input-label | #4b4a48 | |
cdr-color-text-input-label-disabled | #b2ab9f | |
cdr-color-text-input-placeholder | #736e65 | |
cdr-color-text-input-required | #4b4a48 | |
cdr-color-text-input-optional | #736e65 | |
cdr-color-text-input-disabled | #d5cfc3 | |
cdr-color-text-input-filled | #2e2e2b | |
cdr-color-text-input-help | #736e65 | |
cdr-color-text-input-error | #b33322 | |
cdr-color-border-label-default-focus | #2e2e2b | |
cdr-color-border-input-default | #958e83 | |
cdr-color-border-input-error | #b33322 | |
cdr-color-border-input-default-active | #4b4a48 | |
cdr-color-border-input-default-selected | #4b4a48 | |
cdr-color-border-input-default-focus | #2e2e2b | |
cdr-color-border-input-default-selected-hover | #4b4a48 | |
cdr-color-border-input-default-hover | #2e2e2b | |
cdr-color-border-input-default-disabled | #d5cfc3 | |
cdr-color-icon-checkbox-default-selected | #ffffff | |
cdr-color-icon-checkbox-default-selected-hover | #ffffff | |
cdr-color-icon-checkbox-default-selected-active | #4b4a48 |
modal
| Example | Token | Value |
|---|---|---|
cdr-color-background-modal-overlay | rgba(247, 245, 243, 0.85) |
pagination
| Example | Token | Value |
|---|---|---|
cdr-color-background-pagination-hover | #fafbf9 | |
cdr-color-background-pagination-keyline | #406eb5 |
rating
| Example | Token | Value |
|---|---|---|
cdr-color-background-rating-star-default | #fafbf9 | |
cdr-color-background-rating-star-highlighted | #ffd280 | |
cdr-color-text-rating-default | #4b4a48 | |
cdr-color-text-rating-hover | #406eb5 | |
cdr-color-text-rating-separator | #b2ab9f | |
cdr-color-border-rating-star-default | #958e83 | |
cdr-color-border-rating-star-highlighted | #bd7b2d |
surface selection
| Example | Token | Value |
|---|---|---|
cdr-color-background-surface-selection-default-rest | #ffffff | |
cdr-color-background-surface-selection-default-active | #ffffff | |
cdr-color-background-surface-selection-default-hover | #ffffff | |
cdr-color-background-surface-selection-default-checked | #ffffff | |
cdr-color-background-surface-selection-default-disabled | #f7f5f3 | |
cdr-color-background-surface-selection-default-loading | #fafbf9 | |
cdr-color-border-surface-selection-default-rest | #958e83 | |
cdr-color-border-surface-selection-default-active | #958e83 | |
cdr-color-border-surface-selection-default-hover | #958e83 | |
cdr-color-border-surface-selection-default-checked | #2e2e2b | |
cdr-color-border-surface-selection-default-disabled | #958e83 | |
cdr-color-border-surface-selection-default-loading | #958e83 |
surface
| Example | Token | Value |
|---|---|---|
cdr-color-background-surface-primary | #ffffff | |
cdr-color-background-surface-secondary | #f7f5f3 | |
cdr-color-background-surface-brand-spruce | #1f513f | |
cdr-color-background-surface-sale | #c7370f | |
cdr-color-border-surface-primary | #d5cfc3 | |
cdr-color-border-surface-secondary | #958e83 | |
cdr-color-border-surface-success | #3b8349 | |
cdr-color-border-surface-warning | #b68b37 | |
cdr-color-border-surface-error | #bb4045 | |
cdr-color-border-surface-info | #406eb5 |
switch
| Example | Token | Value |
|---|---|---|
cdr-color-background-switch-default-rest | #fafbf9 | |
cdr-color-background-switch-default-hover | #fafbf9 | |
cdr-color-background-switch-default-focus | #fafbf9 | |
cdr-color-background-switch-selected-default-rest | #4b4a48 | |
cdr-color-background-switch-selected-default-hover | #2e2e2b | |
cdr-color-background-switch-selected-default-focus | #2e2e2b | |
cdr-color-background-switch-handle-default-rest | #d5cfc3 | |
cdr-color-background-switch-handle-default-hover | #edeae3 | |
cdr-color-background-switch-handle-default-focus | #d5cfc3 | |
cdr-color-background-switch-handle-selected-default-rest | #d5cfc3 | |
cdr-color-background-switch-handle-selected-default-hover | #d5cfc3 | |
cdr-color-background-switch-handle-selected-default-focus | #d5cfc3 | |
cdr-color-border-switch-default-hover | #4b4a48 | |
cdr-color-border-switch-handle-default-rest | #d5cfc3 | |
cdr-color-border-switch-handle-default-hover | #4b4a48 | |
cdr-color-border-switch-handle-default-focus | #d5cfc3 | |
cdr-color-icon-switch-selected-default-rest | #d5cfc3 | |
cdr-color-icon-switch-selected-default-hover | #d5cfc3 | |
cdr-color-icon-switch-selected-default-focus | #d5cfc3 |
table
| Example | Token | Value |
|---|---|---|
cdr-color-background-table-header | #f7f5f3 | |
cdr-color-background-table-row | #ffffff | |
cdr-color-background-table-row-alt | #fafbf9 | |
cdr-color-border-table-default | #d5cfc3 | |
cdr-color-border-table-head | #958e83 |
toggle group
| Example | Token | Value |
|---|---|---|
cdr-color-background-toggle-group-default-rest | #fafbf9 |
toggle button
| Example | Token | Value |
|---|---|---|
cdr-color-background-toggle-button-default-rest | #fafbf9 | |
cdr-color-background-toggle-button-default-hover | #edeae3 | |
cdr-color-background-toggle-button-default-focus | #edeae3 | |
cdr-color-background-toggle-button-default-selected-rest | #ffffff | |
cdr-color-background-toggle-button-default-selected-hover | #ffffff | |
cdr-color-text-toggle-button-default-rest | #4b4a48 | |
cdr-color-border-toggle-button-default-focus | #4b4a48 | |
cdr-color-border-toggle-button-default-selected-rest | #4b4a48 | |
cdr-color-border-toggle-button-default-selected-focus | #4b4a48 |
tooltip
| Example | Token | Value |
|---|---|---|
cdr-color-background-tooltip-default | #2e2e2b | |
cdr-color-text-tooltip-default | #fafbf9 | |
cdr-color-border-tooltip-default | #fafbf9 |
link
| Example | Token | Value |
|---|---|---|
cdr-color-text-link-rest | #406eb5 | |
cdr-color-text-link-hover | #406eb5 | |
cdr-color-text-link-active | #0b2d60 | |
cdr-color-text-link-disabled | #d5cfc3 | |
cdr-color-text-link-visited | #406eb5 | |
cdr-color-border-link-rest | #406eb5 | |
cdr-color-border-link-hover | #406eb5 | |
cdr-color-border-link-active | #0b2d60 | |
cdr-color-border-link-disabled | #d5cfc3 | |
cdr-color-border-link-visited | #406eb5 | |
cdr-membership-vibrant-color-text-link-rest | #13352C | |
cdr-membership-vibrant-color-text-link-hover | #13352C | |
cdr-membership-vibrant-color-text-link-visited | #13352C | |
cdr-membership-vibrant-color-border-link-rest | #13352C | |
cdr-membership-vibrant-color-border-link-hover | #13352C | |
cdr-membership-vibrant-color-border-link-visited | #13352C | |
cdr-membership-subtle-color-text-link-rest | #13352C | |
cdr-membership-subtle-color-text-link-hover | #13352C | |
cdr-membership-subtle-color-text-link-visited | #13352C | |
cdr-membership-subtle-color-border-link-rest | #13352C | |
cdr-membership-subtle-color-border-link-hover | #13352C | |
cdr-membership-subtle-color-border-link-visited | #13352C |
tabs
| Example | Token | Value |
|---|---|---|
cdr-color-text-tab-rest | #736e65 | |
cdr-color-text-tab-active | #4b4a48 | |
cdr-color-text-tab-hover | #406eb5 | |
cdr-color-text-tab-disabled | #d5cfc3 | |
cdr-color-border-tab-keyline-rest | #958e83 | |
cdr-color-border-tab-keyline-active | #406eb5 | |
cdr-color-border-tab-keyline-active-alt | #78b1e8 | |
cdr-color-border-tab-keyline-hover | #406eb5 | |
cdr-color-border-tab-keyline-hover-alt | #78b1e8 | |
cdr-color-border-tab-keyline-disabled | #d5cfc3 |
body
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-body-300 | mixin |
| cdr-text-body-300-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-body-300-style | normal | |
| cdr-text-body-300-weight | 400 | |
| cdr-text-body-300-spacing | 0.008rem | |
| cdr-text-body-300-size | 1.6rem | |
| cdr-text-body-300-height | 2.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-body-400 | mixin |
| cdr-text-body-400-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-body-400-style | normal | |
| cdr-text-body-400-weight | 400 | |
| cdr-text-body-400-spacing | 0 | |
| cdr-text-body-400-size | 1.8rem | |
| cdr-text-body-400-height | 3rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-body-500 | mixin |
| cdr-text-body-500-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-body-500-style | normal | |
| cdr-text-body-500-weight | 400 | |
| cdr-text-body-500-spacing | -0.016rem | |
| cdr-text-body-500-size | 2rem | |
| cdr-text-body-500-height | 3.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-body-strong-300 | mixin |
| cdr-text-body-strong-300-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-body-strong-300-style | normal | |
| cdr-text-body-strong-300-weight | 600 | |
| cdr-text-body-strong-300-spacing | 0.008rem | |
| cdr-text-body-strong-300-size | 1.6rem | |
| cdr-text-body-strong-300-height | 2.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-body-strong-400 | mixin |
| cdr-text-body-strong-400-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-body-strong-400-style | normal | |
| cdr-text-body-strong-400-weight | 600 | |
| cdr-text-body-strong-400-spacing | 0 | |
| cdr-text-body-strong-400-size | 1.8rem | |
| cdr-text-body-strong-400-height | 3rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-body-strong-500 | mixin |
| cdr-text-body-strong-500-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-body-strong-500-style | normal | |
| cdr-text-body-strong-500-weight | 600 | |
| cdr-text-body-strong-500-spacing | -0.008rem | |
| cdr-text-body-strong-500-size | 2rem | |
| cdr-text-body-strong-500-height | 3.6rem |
default
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-default | mixin |
| cdr-text-default-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-default-style | normal | |
| cdr-text-default-weight | 400 | |
| cdr-text-default-spacing | -0.016rem | |
| cdr-text-default-size | 1.6rem | |
| cdr-text-default-height | 2.2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-italic | mixin |
| cdr-text-italic-variation | 'ital' 1 | |
| cdr-text-italic-style | italic |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-strong | mixin |
| cdr-text-strong-weight | 700 |
eyebrow
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-eyebrow-100 | mixin |
| cdr-text-eyebrow-100-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-eyebrow-100-style | normal | |
| cdr-text-eyebrow-100-weight | 500 | |
| cdr-text-eyebrow-100-spacing | 0.032rem | |
| cdr-text-eyebrow-100-size | 1.2rem | |
| cdr-text-eyebrow-100-height | 1.8rem | |
| cdr-text-eyebrow-100-transform | uppercase |
heading
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-sans-200 | mixin |
| cdr-text-heading-sans-200-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-heading-sans-200-style | normal | |
| cdr-text-heading-sans-200-weight | 500 | |
| cdr-text-heading-sans-200-spacing | 0 | |
| cdr-text-heading-sans-200-size | 1.4rem | |
| cdr-text-heading-sans-200-height | 1.8rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-sans-300 | mixin |
| cdr-text-heading-sans-300-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-heading-sans-300-style | normal | |
| cdr-text-heading-sans-300-weight | 500 | |
| cdr-text-heading-sans-300-spacing | 0 | |
| cdr-text-heading-sans-300-size | 1.6rem | |
| cdr-text-heading-sans-300-height | 2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-sans-400 | mixin |
| cdr-text-heading-sans-400-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-heading-sans-400-style | normal | |
| cdr-text-heading-sans-400-weight | 500 | |
| cdr-text-heading-sans-400-spacing | 0 | |
| cdr-text-heading-sans-400-size | 1.8rem | |
| cdr-text-heading-sans-400-height | 2.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-sans-500 | mixin |
| cdr-text-heading-sans-500-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-heading-sans-500-style | normal | |
| cdr-text-heading-sans-500-weight | 500 | |
| cdr-text-heading-sans-500-spacing | 0 | |
| cdr-text-heading-sans-500-size | 2rem | |
| cdr-text-heading-sans-500-height | 2.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-sans-600 | mixin |
| cdr-text-heading-sans-600-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-heading-sans-600-style | normal | |
| cdr-text-heading-sans-600-weight | 500 | |
| cdr-text-heading-sans-600-spacing | 0 | |
| cdr-text-heading-sans-600-size | 2.4rem | |
| cdr-text-heading-sans-600-height | 3rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-200 | mixin |
| cdr-text-heading-serif-200-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-200-style | normal | |
| cdr-text-heading-serif-200-weight | 500 | |
| cdr-text-heading-serif-200-spacing | 0 | |
| cdr-text-heading-serif-200-size | 1.4rem | |
| cdr-text-heading-serif-200-height | 1.8rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-300 | mixin |
| cdr-text-heading-serif-300-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-300-style | normal | |
| cdr-text-heading-serif-300-weight | 500 | |
| cdr-text-heading-serif-300-spacing | 0 | |
| cdr-text-heading-serif-300-size | 1.6rem | |
| cdr-text-heading-serif-300-height | 2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-400 | mixin |
| cdr-text-heading-serif-400-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-400-style | normal | |
| cdr-text-heading-serif-400-weight | 500 | |
| cdr-text-heading-serif-400-spacing | 0 | |
| cdr-text-heading-serif-400-size | 1.8rem | |
| cdr-text-heading-serif-400-height | 2.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-500 | mixin |
| cdr-text-heading-serif-500-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-500-style | normal | |
| cdr-text-heading-serif-500-weight | 500 | |
| cdr-text-heading-serif-500-spacing | 0 | |
| cdr-text-heading-serif-500-size | 2rem | |
| cdr-text-heading-serif-500-height | 2.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-600 | mixin |
| cdr-text-heading-serif-600-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-600-style | normal | |
| cdr-text-heading-serif-600-weight | 500 | |
| cdr-text-heading-serif-600-spacing | 0 | |
| cdr-text-heading-serif-600-size | 2.4rem | |
| cdr-text-heading-serif-600-height | 3rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-700 | mixin |
| cdr-text-heading-serif-700-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-700-style | normal | |
| cdr-text-heading-serif-700-weight | 500 | |
| cdr-text-heading-serif-700-spacing | 0 | |
| cdr-text-heading-serif-700-size | 2.8rem | |
| cdr-text-heading-serif-700-height | 3.2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-800 | mixin |
| cdr-text-heading-serif-800-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-800-style | normal | |
| cdr-text-heading-serif-800-weight | 500 | |
| cdr-text-heading-serif-800-spacing | 0 | |
| cdr-text-heading-serif-800-size | 3.2rem | |
| cdr-text-heading-serif-800-height | 3.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-900 | mixin |
| cdr-text-heading-serif-900-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-900-style | normal | |
| cdr-text-heading-serif-900-weight | 500 | |
| cdr-text-heading-serif-900-spacing | 0 | |
| cdr-text-heading-serif-900-size | 3.6rem | |
| cdr-text-heading-serif-900-height | 4.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-1000 | mixin |
| cdr-text-heading-serif-1000-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-1000-style | normal | |
| cdr-text-heading-serif-1000-weight | 500 | |
| cdr-text-heading-serif-1000-spacing | 0 | |
| cdr-text-heading-serif-1000-size | 4.2rem | |
| cdr-text-heading-serif-1000-height | 5rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-1100 | mixin |
| cdr-text-heading-serif-1100-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-1100-style | normal | |
| cdr-text-heading-serif-1100-weight | 500 | |
| cdr-text-heading-serif-1100-spacing | 0 | |
| cdr-text-heading-serif-1100-size | 4.8rem | |
| cdr-text-heading-serif-1100-height | 5.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-1200 | mixin |
| cdr-text-heading-serif-1200-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-1200-style | normal | |
| cdr-text-heading-serif-1200-weight | 500 | |
| cdr-text-heading-serif-1200-spacing | 0 | |
| cdr-text-heading-serif-1200-size | 5.4rem | |
| cdr-text-heading-serif-1200-height | 6.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-strong-600 | mixin |
| cdr-text-heading-serif-strong-600-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-strong-600-style | normal | |
| cdr-text-heading-serif-strong-600-weight | 600 | |
| cdr-text-heading-serif-strong-600-spacing | 0 | |
| cdr-text-heading-serif-strong-600-size | 2.4rem | |
| cdr-text-heading-serif-strong-600-height | 3rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-strong-700 | mixin |
| cdr-text-heading-serif-strong-700-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-strong-700-style | normal | |
| cdr-text-heading-serif-strong-700-weight | 600 | |
| cdr-text-heading-serif-strong-700-spacing | 0 | |
| cdr-text-heading-serif-strong-700-size | 2.8rem | |
| cdr-text-heading-serif-strong-700-height | 3.2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-strong-800 | mixin |
| cdr-text-heading-serif-strong-800-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-strong-800-style | normal | |
| cdr-text-heading-serif-strong-800-weight | 600 | |
| cdr-text-heading-serif-strong-800-spacing | 0 | |
| cdr-text-heading-serif-strong-800-size | 3.2rem | |
| cdr-text-heading-serif-strong-800-height | 3.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-strong-900 | mixin |
| cdr-text-heading-serif-strong-900-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-strong-900-style | normal | |
| cdr-text-heading-serif-strong-900-weight | 600 | |
| cdr-text-heading-serif-strong-900-spacing | 0 | |
| cdr-text-heading-serif-strong-900-size | 3.6rem | |
| cdr-text-heading-serif-strong-900-height | 4.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-strong-1000 | mixin |
| cdr-text-heading-serif-strong-1000-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-strong-1000-style | normal | |
| cdr-text-heading-serif-strong-1000-weight | 600 | |
| cdr-text-heading-serif-strong-1000-spacing | 0 | |
| cdr-text-heading-serif-strong-1000-size | 4.2rem | |
| cdr-text-heading-serif-strong-1000-height | 5rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-strong-1100 | mixin |
| cdr-text-heading-serif-strong-1100-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-strong-1100-style | normal | |
| cdr-text-heading-serif-strong-1100-weight | 600 | |
| cdr-text-heading-serif-strong-1100-spacing | 0 | |
| cdr-text-heading-serif-strong-1100-size | 4.8rem | |
| cdr-text-heading-serif-strong-1100-height | 5.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-serif-strong-1200 | mixin |
| cdr-text-heading-serif-strong-1200-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-serif-strong-1200-style | normal | |
| cdr-text-heading-serif-strong-1200-weight | 600 | |
| cdr-text-heading-serif-strong-1200-spacing | 0 | |
| cdr-text-heading-serif-strong-1200-size | 5.4rem | |
| cdr-text-heading-serif-strong-1200-height | 6.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-display-800 | mixin |
| cdr-text-heading-display-800-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-display-800-style | normal | |
| cdr-text-heading-display-800-weight | 400 | |
| cdr-text-heading-display-800-spacing | 0 | |
| cdr-text-heading-display-800-size | 3.2rem | |
| cdr-text-heading-display-800-height | 3.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-display-900 | mixin |
| cdr-text-heading-display-900-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-display-900-style | normal | |
| cdr-text-heading-display-900-weight | 400 | |
| cdr-text-heading-display-900-spacing | 0 | |
| cdr-text-heading-display-900-size | 3.6rem | |
| cdr-text-heading-display-900-height | 4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-display-1000 | mixin |
| cdr-text-heading-display-1000-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-display-1000-style | normal | |
| cdr-text-heading-display-1000-weight | 400 | |
| cdr-text-heading-display-1000-spacing | 0 | |
| cdr-text-heading-display-1000-size | 4.2rem | |
| cdr-text-heading-display-1000-height | 4.8rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-display-1100 | mixin |
| cdr-text-heading-display-1100-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-display-1100-style | normal | |
| cdr-text-heading-display-1100-weight | 400 | |
| cdr-text-heading-display-1100-spacing | 0 | |
| cdr-text-heading-display-1100-size | 4.8rem | |
| cdr-text-heading-display-1100-height | 5.2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-display-1200 | mixin |
| cdr-text-heading-display-1200-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-display-1200-style | normal | |
| cdr-text-heading-display-1200-weight | 400 | |
| cdr-text-heading-display-1200-spacing | 0 | |
| cdr-text-heading-display-1200-size | 5.4rem | |
| cdr-text-heading-display-1200-height | 6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-display-1300 | mixin |
| cdr-text-heading-display-1300-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-display-1300-style | normal | |
| cdr-text-heading-display-1300-weight | 400 | |
| cdr-text-heading-display-1300-spacing | 0 | |
| cdr-text-heading-display-1300-size | 6rem | |
| cdr-text-heading-display-1300-height | 6.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-display-1400 | mixin |
| cdr-text-heading-display-1400-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-display-1400-style | normal | |
| cdr-text-heading-display-1400-weight | 400 | |
| cdr-text-heading-display-1400-spacing | 0 | |
| cdr-text-heading-display-1400-size | 6.8rem | |
| cdr-text-heading-display-1400-height | 7.2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-display-1500 | mixin |
| cdr-text-heading-display-1500-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-display-1500-style | normal | |
| cdr-text-heading-display-1500-weight | 400 | |
| cdr-text-heading-display-1500-spacing | 0 | |
| cdr-text-heading-display-1500-size | 7.6rem | |
| cdr-text-heading-display-1500-height | 8rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-heading-display-1600 | mixin |
| cdr-text-heading-display-1600-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-heading-display-1600-style | normal | |
| cdr-text-heading-display-1600-weight | 400 | |
| cdr-text-heading-display-1600-spacing | 0 | |
| cdr-text-heading-display-1600-size | 8.6rem | |
| cdr-text-heading-display-1600-height | 9.2rem |
subheading
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-subheading-sans-300 | mixin |
| cdr-text-subheading-sans-300-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-subheading-sans-300-style | normal | |
| cdr-text-subheading-sans-300-weight | 500 | |
| cdr-text-subheading-sans-300-spacing | 0 | |
| cdr-text-subheading-sans-300-size | 1.6rem | |
| cdr-text-subheading-sans-300-height | 2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-subheading-sans-400 | mixin |
| cdr-text-subheading-sans-400-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-subheading-sans-400-style | normal | |
| cdr-text-subheading-sans-400-weight | 500 | |
| cdr-text-subheading-sans-400-spacing | 0 | |
| cdr-text-subheading-sans-400-size | 1.8rem | |
| cdr-text-subheading-sans-400-height | 2.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-subheading-sans-500 | mixin |
| cdr-text-subheading-sans-500-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-subheading-sans-500-style | normal | |
| cdr-text-subheading-sans-500-weight | 500 | |
| cdr-text-subheading-sans-500-spacing | 0 | |
| cdr-text-subheading-sans-500-size | 2rem | |
| cdr-text-subheading-sans-500-height | 2.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-subheading-sans-600 | mixin |
| cdr-text-subheading-sans-600-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-subheading-sans-600-style | normal | |
| cdr-text-subheading-sans-600-weight | 500 | |
| cdr-text-subheading-sans-600-spacing | 0 | |
| cdr-text-subheading-sans-600-size | 2.4rem | |
| cdr-text-subheading-sans-600-height | 3rem |
utility
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-100 | mixin |
| cdr-text-utility-sans-100-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-100-style | normal | |
| cdr-text-utility-sans-100-weight | 400 | |
| cdr-text-utility-sans-100-spacing | -0.008rem | |
| cdr-text-utility-sans-100-size | 1.2rem | |
| cdr-text-utility-sans-100-height | 1.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-200 | mixin |
| cdr-text-utility-sans-200-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-200-style | normal | |
| cdr-text-utility-sans-200-weight | 400 | |
| cdr-text-utility-sans-200-spacing | -0.016rem | |
| cdr-text-utility-sans-200-size | 1.4rem | |
| cdr-text-utility-sans-200-height | 1.8rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-300 | mixin |
| cdr-text-utility-sans-300-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-300-style | normal | |
| cdr-text-utility-sans-300-weight | 400 | |
| cdr-text-utility-sans-300-spacing | -0.016rem | |
| cdr-text-utility-sans-300-size | 1.6rem | |
| cdr-text-utility-sans-300-height | 2.2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-400 | mixin |
| cdr-text-utility-sans-400-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-400-style | normal | |
| cdr-text-utility-sans-400-weight | 400 | |
| cdr-text-utility-sans-400-spacing | -0.016rem | |
| cdr-text-utility-sans-400-size | 1.8rem | |
| cdr-text-utility-sans-400-height | 2.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-500 | mixin |
| cdr-text-utility-sans-500-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-500-style | normal | |
| cdr-text-utility-sans-500-weight | 400 | |
| cdr-text-utility-sans-500-spacing | -0.032rem | |
| cdr-text-utility-sans-500-size | 2rem | |
| cdr-text-utility-sans-500-height | 2.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-600 | mixin |
| cdr-text-utility-sans-600-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-600-style | normal | |
| cdr-text-utility-sans-600-weight | 400 | |
| cdr-text-utility-sans-600-spacing | -0.032rem | |
| cdr-text-utility-sans-600-size | 2.4rem | |
| cdr-text-utility-sans-600-height | 3rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-700 | mixin |
| cdr-text-utility-sans-700-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-700-style | normal | |
| cdr-text-utility-sans-700-weight | 400 | |
| cdr-text-utility-sans-700-spacing | -0.032rem | |
| cdr-text-utility-sans-700-size | 2.8rem | |
| cdr-text-utility-sans-700-height | 3.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-800 | mixin |
| cdr-text-utility-sans-800-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-800-style | normal | |
| cdr-text-utility-sans-800-weight | 400 | |
| cdr-text-utility-sans-800-spacing | -0.064rem | |
| cdr-text-utility-sans-800-size | 3.2rem | |
| cdr-text-utility-sans-800-height | 4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-strong-100 | mixin |
| cdr-text-utility-sans-strong-100-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-strong-100-style | normal | |
| cdr-text-utility-sans-strong-100-weight | 600 | |
| cdr-text-utility-sans-strong-100-spacing | -0.008rem | |
| cdr-text-utility-sans-strong-100-size | 1.2rem | |
| cdr-text-utility-sans-strong-100-height | 1.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-strong-200 | mixin |
| cdr-text-utility-sans-strong-200-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-strong-200-style | normal | |
| cdr-text-utility-sans-strong-200-weight | 600 | |
| cdr-text-utility-sans-strong-200-spacing | -0.008rem | |
| cdr-text-utility-sans-strong-200-size | 1.4rem | |
| cdr-text-utility-sans-strong-200-height | 1.8rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-strong-300 | mixin |
| cdr-text-utility-sans-strong-300-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-strong-300-style | normal | |
| cdr-text-utility-sans-strong-300-weight | 600 | |
| cdr-text-utility-sans-strong-300-spacing | -0.008rem | |
| cdr-text-utility-sans-strong-300-size | 1.6rem | |
| cdr-text-utility-sans-strong-300-height | 2.2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-strong-400 | mixin |
| cdr-text-utility-sans-strong-400-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-strong-400-style | normal | |
| cdr-text-utility-sans-strong-400-weight | 600 | |
| cdr-text-utility-sans-strong-400-spacing | -0.008rem | |
| cdr-text-utility-sans-strong-400-size | 1.8rem | |
| cdr-text-utility-sans-strong-400-height | 2.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-strong-500 | mixin |
| cdr-text-utility-sans-strong-500-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-strong-500-style | normal | |
| cdr-text-utility-sans-strong-500-weight | 600 | |
| cdr-text-utility-sans-strong-500-spacing | -0.016rem | |
| cdr-text-utility-sans-strong-500-size | 2rem | |
| cdr-text-utility-sans-strong-500-height | 2.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-strong-600 | mixin |
| cdr-text-utility-sans-strong-600-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-strong-600-style | normal | |
| cdr-text-utility-sans-strong-600-weight | 600 | |
| cdr-text-utility-sans-strong-600-spacing | -0.016rem | |
| cdr-text-utility-sans-strong-600-size | 2.4rem | |
| cdr-text-utility-sans-strong-600-height | 3rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-strong-700 | mixin |
| cdr-text-utility-sans-strong-700-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-strong-700-style | normal | |
| cdr-text-utility-sans-strong-700-weight | 600 | |
| cdr-text-utility-sans-strong-700-spacing | -0.016rem | |
| cdr-text-utility-sans-strong-700-size | 2.8rem | |
| cdr-text-utility-sans-strong-700-height | 3.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-sans-strong-800 | mixin |
| cdr-text-utility-sans-strong-800-family | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif | |
| cdr-text-utility-sans-strong-800-style | normal | |
| cdr-text-utility-sans-strong-800-weight | 600 | |
| cdr-text-utility-sans-strong-800-spacing | -0.032rem | |
| cdr-text-utility-sans-strong-800-size | 3.2rem | |
| cdr-text-utility-sans-strong-800-height | 4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-200 | mixin |
| cdr-text-utility-serif-200-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-200-style | normal | |
| cdr-text-utility-serif-200-weight | 400 | |
| cdr-text-utility-serif-200-spacing | -0.008rem | |
| cdr-text-utility-serif-200-size | 1.4rem | |
| cdr-text-utility-serif-200-height | 1.8rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-300 | mixin |
| cdr-text-utility-serif-300-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-300-style | normal | |
| cdr-text-utility-serif-300-weight | 400 | |
| cdr-text-utility-serif-300-spacing | -0.008rem | |
| cdr-text-utility-serif-300-size | 1.6rem | |
| cdr-text-utility-serif-300-height | 2.2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-400 | mixin |
| cdr-text-utility-serif-400-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-400-style | normal | |
| cdr-text-utility-serif-400-weight | 400 | |
| cdr-text-utility-serif-400-spacing | -0.016rem | |
| cdr-text-utility-serif-400-size | 1.8rem | |
| cdr-text-utility-serif-400-height | 2.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-500 | mixin |
| cdr-text-utility-serif-500-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-500-style | normal | |
| cdr-text-utility-serif-500-weight | 400 | |
| cdr-text-utility-serif-500-spacing | -0.032rem | |
| cdr-text-utility-serif-500-size | 2rem | |
| cdr-text-utility-serif-500-height | 2.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-600 | mixin |
| cdr-text-utility-serif-600-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-600-style | normal | |
| cdr-text-utility-serif-600-weight | 400 | |
| cdr-text-utility-serif-600-spacing | -0.032rem | |
| cdr-text-utility-serif-600-size | 2.4rem | |
| cdr-text-utility-serif-600-height | 3rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-700 | mixin |
| cdr-text-utility-serif-700-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-700-style | normal | |
| cdr-text-utility-serif-700-weight | 400 | |
| cdr-text-utility-serif-700-spacing | -0.032rem | |
| cdr-text-utility-serif-700-size | 2.8rem | |
| cdr-text-utility-serif-700-height | 3.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-800 | mixin |
| cdr-text-utility-serif-800-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-800-style | normal | |
| cdr-text-utility-serif-800-weight | 400 | |
| cdr-text-utility-serif-800-spacing | -0.032rem | |
| cdr-text-utility-serif-800-size | 3.2rem | |
| cdr-text-utility-serif-800-height | 4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-strong-200 | mixin |
| cdr-text-utility-serif-strong-200-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-strong-200-style | normal | |
| cdr-text-utility-serif-strong-200-weight | 600 | |
| cdr-text-utility-serif-strong-200-spacing | -0.008rem | |
| cdr-text-utility-serif-strong-200-size | 1.4rem | |
| cdr-text-utility-serif-strong-200-height | 1.8rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-strong-300 | mixin |
| cdr-text-utility-serif-strong-300-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-strong-300-style | normal | |
| cdr-text-utility-serif-strong-300-weight | 600 | |
| cdr-text-utility-serif-strong-300-spacing | -0.008rem | |
| cdr-text-utility-serif-strong-300-size | 1.6rem | |
| cdr-text-utility-serif-strong-300-height | 2.2rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-strong-400 | mixin |
| cdr-text-utility-serif-strong-400-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-strong-400-style | normal | |
| cdr-text-utility-serif-strong-400-weight | 600 | |
| cdr-text-utility-serif-strong-400-spacing | -0.008rem | |
| cdr-text-utility-serif-strong-400-size | 1.8rem | |
| cdr-text-utility-serif-strong-400-height | 2.4rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-strong-500 | mixin |
| cdr-text-utility-serif-strong-500-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-strong-500-style | normal | |
| cdr-text-utility-serif-strong-500-weight | 600 | |
| cdr-text-utility-serif-strong-500-spacing | -0.008rem | |
| cdr-text-utility-serif-strong-500-size | 2rem | |
| cdr-text-utility-serif-strong-500-height | 2.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-strong-600 | mixin |
| cdr-text-utility-serif-strong-600-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-strong-600-style | normal | |
| cdr-text-utility-serif-strong-600-weight | 600 | |
| cdr-text-utility-serif-strong-600-spacing | -0.016rem | |
| cdr-text-utility-serif-strong-600-size | 2.4rem | |
| cdr-text-utility-serif-strong-600-height | 3rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-strong-700 | mixin |
| cdr-text-utility-serif-strong-700-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-strong-700-style | normal | |
| cdr-text-utility-serif-strong-700-weight | 600 | |
| cdr-text-utility-serif-strong-700-spacing | -0.016rem | |
| cdr-text-utility-serif-strong-700-size | 2.8rem | |
| cdr-text-utility-serif-strong-700-height | 3.6rem |
| Example | Token | Value |
|---|---|---|
| Aa | cdr-text-utility-serif-strong-800 | mixin |
| cdr-text-utility-serif-strong-800-family | Stuart, "Stuart fallback", Georgia, serif | |
| cdr-text-utility-serif-strong-800-style | normal | |
| cdr-text-utility-serif-strong-800-weight | 600 | |
| cdr-text-utility-serif-strong-800-spacing | -0.016rem | |
| cdr-text-utility-serif-strong-800-size | 3.2rem | |
| cdr-text-utility-serif-strong-800-height | 4rem |
font-family
| Example | Token | Value |
|---|---|---|
| — | cdr-font-family-serif-brand-font | Stuart |
| — | cdr-font-family-serif | Stuart, "Stuart fallback", Georgia, serif |
| — | cdr-font-family-sans-brand-font | Graphik |
| — | cdr-font-family-sans | Graphik, "Graphik fallback", "Helvetica Neue", sans-serif |
| — | cdr-font-family-mono-brand-font | Pressura, "Avenir Next", Roboto, sans-serif |
chip
| Example | Token | Value |
|---|---|---|
| — | cdr-color-background-chip-default-selected-active | #edeae3 |
| Example | Token | Value |
|---|---|---|
| — | cdr-color-background-slide-hover | #fafbf9 |
| — | cdr-color-background-slide-default | #fafbf9 |
inset
| Example | Token | Value |
|---|---|---|
cdr-space-inset-eighth-x-squish | 0 0.2rem | |
cdr-space-inset-eighth-x-stretch | 0.4rem 0.2rem | |
cdr-space-inset-quarter-x-squish | 0.2rem 0.4rem | |
cdr-space-inset-quarter-x-stretch | 0.6rem 0.4rem | |
cdr-space-inset-half-x-squish | 0.4rem 0.8rem | |
cdr-space-inset-half-x-stretch | 1.2rem 0.8rem | |
cdr-space-inset-three-quarter-x-squish | 0.6rem 1.2rem | |
cdr-space-inset-three-quarter-x-stretch | 1.8rem 1.2rem | |
cdr-space-inset-one-x-squish | 0.8rem 1.6rem | |
cdr-space-inset-one-x-stretch | 2.4rem 1.6rem | |
cdr-space-inset-one-and-a-half-x-squish | 1.2rem 2.4rem | |
cdr-space-inset-one-and-a-half-x-stretch | 3.6rem 2.4rem | |
cdr-space-inset-two-x-squish | 1.6rem 3.2rem | |
cdr-space-inset-two-x-stretch | 4.8rem 3.2rem | |
cdr-space-inset-three-x-squish | 2.4rem 4.8rem | |
cdr-space-inset-three-x-stretch | 7.2rem 4.8rem | |
cdr-space-inset-four-x-squish | 3.2rem 6.4rem | |
cdr-space-inset-four-x-stretch | 9.6rem 6.4rem | |
cdr-space-inset-sixteenth-x | 0.1rem | |
cdr-space-inset-eighth-x | 0.2rem | |
cdr-space-inset-three-sixteenth-x | 0.3rem | |
cdr-space-inset-quarter-x | 0.4rem | |
cdr-space-inset-three-eighth-x | 0.6rem | |
cdr-space-inset-half-x | 0.8rem | |
cdr-space-inset-three-quarter-x | 1.2rem | |
cdr-space-inset-one-x | 1.6rem | |
cdr-space-inset-one-and-a-half-x | 2.4rem | |
cdr-space-inset-two-x | 3.2rem | |
cdr-space-inset-three-x | 4.8rem | |
cdr-space-inset-four-x | 6.4rem |
spacing
| Example | Token | Value |
|---|---|---|
cdr-space-zero | 0 | |
cdr-space-sixteenth-x | 0.1rem | |
cdr-space-eighth-x | 0.2rem | |
cdr-space-three-sixteenth-x | 0.3rem | |
cdr-space-quarter-x | 0.4rem | |
cdr-space-three-eighth-x | 0.6rem | |
cdr-space-half-x | 0.8rem | |
cdr-space-three-quarter-x | 1.2rem | |
cdr-space-one-x | 1.6rem | |
cdr-space-one-and-a-half-x | 2.4rem | |
cdr-space-two-x | 3.2rem | |
cdr-space-three-x | 4.8rem | |
cdr-space-four-x | 6.4rem | |
cdr-space-inset-eighth-x-squish-top-bottom | 0 | |
cdr-space-inset-eighth-x-squish-left-right | 0.2rem | |
cdr-space-inset-eighth-x-stretch-top-bottom | 0.4rem | |
cdr-space-inset-eighth-x-stretch-left-right | 0.2rem | |
cdr-space-inset-quarter-x-squish-top-bottom | 0.2rem | |
cdr-space-inset-quarter-x-squish-left-right | 0.4rem | |
cdr-space-inset-quarter-x-stretch-top-bottom | 0.6rem | |
cdr-space-inset-quarter-x-stretch-left-right | 0.4rem | |
cdr-space-inset-half-x-squish-top-bottom | 0.4rem | |
cdr-space-inset-half-x-squish-left-right | 0.8rem | |
cdr-space-inset-half-x-stretch-top-bottom | 1.2rem | |
cdr-space-inset-half-x-stretch-left-right | 0.8rem | |
cdr-space-inset-three-quarter-x-squish-top-bottom | 0.6rem | |
cdr-space-inset-three-quarter-x-squish-left-right | 1.2rem | |
cdr-space-inset-three-quarter-x-stretch-top-bottom | 1.8rem | |
cdr-space-inset-three-quarter-x-stretch-left-right | 1.2rem | |
cdr-space-inset-one-x-squish-top-bottom | 0.8rem | |
cdr-space-inset-one-x-squish-left-right | 1.6rem | |
cdr-space-inset-one-x-stretch-top-bottom | 2.4rem | |
cdr-space-inset-one-x-stretch-left-right | 1.6rem | |
cdr-space-inset-one-and-a-half-x-squish-top-bottom | 1.2rem | |
cdr-space-inset-one-and-a-half-x-squish-left-right | 2.4rem | |
cdr-space-inset-one-and-a-half-x-stretch-top-bottom | 3.6rem | |
cdr-space-inset-one-and-a-half-x-stretch-left-right | 2.4rem | |
cdr-space-inset-two-x-squish-top-bottom | 1.6rem | |
cdr-space-inset-two-x-squish-left-right | 3.2rem | |
cdr-space-inset-two-x-stretch-top-bottom | 4.8rem | |
cdr-space-inset-two-x-stretch-left-right | 3.2rem | |
cdr-space-inset-three-x-squish-top-bottom | 2.4rem | |
cdr-space-inset-three-x-squish-left-right | 4.8rem | |
cdr-space-inset-three-x-stretch-top-bottom | 7.2rem | |
cdr-space-inset-three-x-stretch-left-right | 4.8rem | |
cdr-space-inset-four-x-squish-top-bottom | 3.2rem | |
cdr-space-inset-four-x-squish-left-right | 6.4rem | |
cdr-space-inset-four-x-stretch-top-bottom | 9.6rem | |
cdr-space-inset-four-x-stretch-left-right | 6.4rem |
duration
| Example | Token | Value |
|---|---|---|
cdr-duration-1-x | 0.10s | |
cdr-duration-2-x | 0.20s | |
cdr-duration-3-x | 0.30s | |
cdr-duration-4-x | 0.40s | |
cdr-duration-5-x | 0.50s | |
cdr-duration-6-x | 0.60s |
timing
| Example | Token | Value |
|---|---|---|
cdr-timing-function-ease-out | cubic-bezier(0.32, 0.94, 0.60, 1) | |
cdr-timing-function-ease | cubic-bezier(0.15, 0, 0.15, 0) | |
cdr-timing-function-linear | cubic-bezier(0, 0, 1, 1) |
prominence
| Example | Token | Value |
|---|---|---|
cdr-prominence-flat | 0 0 0 0 rgba(46, 46, 43, 0.2) | |
cdr-prominence-raised | 0 0.2rem 0.2rem 0 rgba(46, 46, 43, 0.2) | |
cdr-prominence-elevated | 0 0.4rem 0.4rem 0 rgba(46, 46, 43, 0.2) | |
cdr-prominence-floating | 0 0.8rem 0.8rem 0 rgba(46, 46, 43, 0.2) | |
cdr-prominence-lifted | 0 1.6rem 1.6rem 0 rgba(46, 46, 43, 0.2) | |
| — | cdr-prominence-flat-x | 0 |
| — | cdr-prominence-flat-y | 0 |
| — | cdr-prominence-flat-blur | 0 |
| — | cdr-prominence-flat-spread | 0 |
| — | cdr-prominence-flat-color | rgba(46, 46, 43, 0.2) |
| — | cdr-prominence-raised-x | 0 |
| — | cdr-prominence-raised-y | 0.2rem |
| — | cdr-prominence-raised-blur | 0.2rem |
| — | cdr-prominence-raised-spread | 0 |
| — | cdr-prominence-raised-color | rgba(46, 46, 43, 0.2) |
| — | cdr-prominence-elevated-x | 0 |
| — | cdr-prominence-elevated-y | 0.4rem |
| — | cdr-prominence-elevated-blur | 0.4rem |
| — | cdr-prominence-elevated-spread | 0 |
| — | cdr-prominence-elevated-color | rgba(46, 46, 43, 0.2) |
| — | cdr-prominence-floating-x | 0 |
| — | cdr-prominence-floating-y | 0.8rem |
| — | cdr-prominence-floating-blur | 0.8rem |
| — | cdr-prominence-floating-spread | 0 |
| — | cdr-prominence-floating-color | rgba(46, 46, 43, 0.2) |
| — | cdr-prominence-lifted-x | 0 |
| — | cdr-prominence-lifted-y | 1.6rem |
| — | cdr-prominence-lifted-blur | 1.6rem |
| — | cdr-prominence-lifted-spread | 0 |
| — | cdr-prominence-lifted-color | rgba(46, 46, 43, 0.2) |
radius
| Example | Token | Value |
|---|---|---|
cdr-radius-sharp | 0 | |
cdr-radius-soft | 0.2rem | |
cdr-radius-softer | 0.4rem | |
cdr-radius-softest | 0.6rem | |
cdr-radius-round | 999.9rem |
breakpoint
| Example | Token | Value |
|---|---|---|
| — | cdr-breakpoint-xs | 0 |
| — | cdr-breakpoint-sm | 768px |
| — | cdr-breakpoint-md | 992px |
| — | cdr-breakpoint-lg | 1232px |
| Example | Token | Description |
|---|---|---|
| — | cdr-xs-mq-only | Mixin content rendered at extra small breakpoint only |
| — | cdr-xs-mq-up | Mixin content rendered at extra small breakpoint and above |
| — | cdr-sm-mq-only | Mixin content rendered at small breakpoint only |
| — | cdr-sm-mq-up | Mixin content rendered at small breakpoint and above |
| — | cdr-sm-mq-down | Mixin content rendered below small breakpoint |
| — | cdr-md-mq-only | Mixin content rendered at medium breakpoint only |
| — | cdr-md-mq-up | Mixin content rendered at medium breakpoint and above |
| — | cdr-md-mq-down | Mixin content rendered below medium breakpoint |
| — | cdr-lg-mq-only | Mixin content rendered at large breakpoint only |
| — | cdr-lg-mq-up | Mixin content rendered at large breakpoint and above |
| — | cdr-lg-mq-down | Mixin content rendered below large breakpoint |
| Example | Token | Description |
|---|---|---|
| — | cdr-display-sr-only | Mixin for screen readers only |
| — | cdr-display-sr-only-focusable | Mixin for screen readers only, but remains focusable |
| Example | Token | Description |
|---|---|---|
| — | cdr-container | Mixin for wrapping page content |
| — | cdr-container-fluid | Mixin for wrapping page content responsively |
form
| Example | Token | Value |
|---|---|---|
cdr-form-input-height-default | 4rem | |
cdr-form-input-height-large | 4.8rem | |
cdr-form-figure-size-small | 1.6rem | |
cdr-form-figure-size-medium | 1.6rem | |
cdr-form-figure-size-large | 2rem |
icon
| Example | Token | Value |
|---|---|---|
cdr-icon-size-sm | 1.6rem | |
cdr-icon-size | 2.4rem | |
cdr-icon-size-lg | 3.2rem |