Token reference
Every table on this page is generated at build time from @usecredo/tokens/table.json, the
output of the token build. Nothing is typed by hand, so the values here are the values the
stylesheet ships. Components read semantic roles and scale tokens only.
Colour roles have a light and a dark value. The second reference theme has no tokens yet.
Usage notes per role are not part of the token build output yet.
Roles
surface
| Role | CSS variable | Light | Dark |
|---|---|---|---|
surface.page | --cr-surface-page | #ebebeb | #070707 |
surface.container | --cr-surface-container | #ffffff | #161616 |
surface.container-subtle | --cr-surface-container-subtle | #f2f2f2 | #0e0e0e |
surface.container-elevated | --cr-surface-container-elevated | #ffffff | #202020 |
surface.overlay | --cr-surface-overlay | #ffffff | #2e2e2e |
surface.container-hover | --cr-surface-container-hover | #f8f8f8 | #202020 |
surface.container-pressed | --cr-surface-container-pressed | #f2f2f2 | #2e2e2e |
surface.container-elevated-hover | --cr-surface-container-elevated-hover | #f8f8f8 | #2e2e2e |
surface.container-elevated-pressed | --cr-surface-container-elevated-pressed | #f2f2f2 | #2e2e2e |
surface.container-subtle-hover | --cr-surface-container-subtle-hover | #ebebeb | #161616 |
surface.container-subtle-pressed | --cr-surface-container-subtle-pressed | #e1e1e1 | #202020 |
surface.overlay-hover | --cr-surface-overlay-hover | #f8f8f8 | #2e2e2e |
surface.overlay-pressed | --cr-surface-overlay-pressed | #f2f2f2 | #2e2e2e |
surface.scrim | --cr-surface-scrim | rgba(32, 32, 32, 0.5019607843137255) | rgba(0, 0, 0, 0.5019607843137255) |
content
| Role | CSS variable | Light | Dark |
|---|---|---|---|
content.primary | --cr-content-primary | #070707 | #ffffff |
content.secondary | --cr-content-secondary | #202020 | #e1e1e1 |
content.tertiary | --cr-content-tertiary | #585858 | #b4b4b4 |
content.disabled | --cr-content-disabled | #d1d1d1 | #585858 |
content.inverse | --cr-content-inverse | #ffffff | #0e0e0e |
content.link | --cr-content-link | #455500 | #dbf88b |
content.link-subtle | --cr-content-link-subtle | #455500 | #dbf88b |
content.link-external | --cr-content-link-external | #3a18b1 | #b8aee8 |
content.link-danger | --cr-content-link-danger | #a82838 | #f2a8b2 |
field
| Role | CSS variable | Light | Dark |
|---|---|---|---|
field.background | --cr-field-background | #ffffff | #161616 |
field.foreground | --cr-field-foreground | #070707 | #ffffff |
field.placeholder | --cr-field-placeholder | #585858 | #b4b4b4 |
field.border | --cr-field-border | #585858 | #d1d1d1 |
field.border-hover | --cr-field-border-hover | #2e2e2e | #e1e1e1 |
field.border-focus | --cr-field-border-focus | #5e7300 | #d2f462 |
actions
| Role | CSS variable | Light | Dark |
|---|---|---|---|
actions.primary.default | --cr-actions-primary-default | #c8f000 | #c8f000 |
actions.primary.hover | --cr-actions-primary-hover | #d2f462 | #d2f462 |
actions.primary.pressed | --cr-actions-primary-pressed | #94b200 | #94b200 |
actions.primary.subtle | --cr-actions-primary-subtle | #f2fed6 | #2e3900 |
actions.primary.subtle-hover | --cr-actions-primary-subtle-hover | #ecfdc4 | #455500 |
actions.primary.subtle-pressed | --cr-actions-primary-subtle-pressed | #e4fbaa | #5e7300 |
actions.primary.foreground | --cr-actions-primary-foreground | #070707 | #070707 |
actions.primary.subtle-foreground | --cr-actions-primary-subtle-foreground | #5e7300 | #dbf88b |
actions.secondary.default | --cr-actions-secondary-default | #56534e | #c4c0b8 |
actions.secondary.hover | --cr-actions-secondary-hover | #2d2b28 | #d6d3ce |
actions.secondary.pressed | --cr-actions-secondary-pressed | #201e1b | #e4e2df |
actions.secondary.subtle | --cr-actions-secondary-subtle | #f5f4f2 | #201e1b |
actions.secondary.subtle-hover | --cr-actions-secondary-subtle-hover | #efeeed | #2d2b28 |
actions.secondary.subtle-pressed | --cr-actions-secondary-subtle-pressed | #e4e2df | #56534e |
actions.secondary.foreground | --cr-actions-secondary-foreground | #ffffff | #161616 |
actions.secondary.subtle-foreground | --cr-actions-secondary-subtle-foreground | #56534e | #e4e2df |
actions.destructive.default | --cr-actions-destructive-default | #cf3359 | #cf3359 |
actions.destructive.hover | --cr-actions-destructive-hover | #a82838 | #a82838 |
actions.destructive.pressed | --cr-actions-destructive-pressed | #7d1e2a | #7d1e2a |
actions.destructive.subtle | --cr-actions-destructive-subtle | #fef5f6 | #3d0f15 |
actions.destructive.subtle-hover | --cr-actions-destructive-subtle-hover | #fce8ea | #52141c |
actions.destructive.subtle-pressed | --cr-actions-destructive-subtle-pressed | #f8ced3 | #7d1e2a |
actions.destructive.foreground | --cr-actions-destructive-foreground | #ffffff | #ffffff |
actions.destructive.subtle-foreground | --cr-actions-destructive-subtle-foreground | #a82838 | #f2a8b2 |
state
| Role | CSS variable | Light | Dark |
|---|---|---|---|
state.disabled.background | --cr-state-disabled-background | #d1d1d1 | #2e2e2e |
state.disabled.foreground | --cr-state-disabled-foreground | #ffffff | #585858 |
state.disabled.border | --cr-state-disabled-border | #d1d1d1 | #2e2e2e |
state.loading.background | --cr-state-loading-background | #ebebeb | #585858 |
state.loading.foreground | --cr-state-loading-foreground | #2e2e2e | #f2f2f2 |
state.loading.border | --cr-state-loading-border | #e1e1e1 | #b4b4b4 |
state.read-only.background | --cr-state-read-only-background | #f2f2f2 | #202020 |
state.read-only.foreground | --cr-state-read-only-foreground | #2e2e2e | #f2f2f2 |
state.read-only.border | --cr-state-read-only-border | #e1e1e1 | #585858 |
state.focus.ring | --cr-state-focus-ring | #5e7300 | #d2f462 |
state.focus.ring-error | --cr-state-focus-ring-error | #cf3359 | #de4b69 |
state.focus.ring-success | --cr-state-focus-ring-success | #2d9454 | #4aaf74 |
state.focus.ring-warning | --cr-state-focus-ring-warning | #a37308 | #f0a91e |
state.focus.ring-offset | --cr-state-focus-ring-offset | #ffffff | #070707 |
border
| Role | CSS variable | Light | Dark |
|---|---|---|---|
border.default | --cr-border-default | #d1d1d1 | #585858 |
border.default-hover | --cr-border-default-hover | #b4b4b4 | #b4b4b4 |
border.subtle | --cr-border-subtle | #e1e1e1 | #2e2e2e |
border.strong | --cr-border-strong | #585858 | #b4b4b4 |
border.interactive | --cr-border-interactive | #5e7300 | #c8f000 |
border.default-pressed | --cr-border-default-pressed | #585858 | #d1d1d1 |
border.subtle-hover | --cr-border-subtle-hover | #d1d1d1 | #585858 |
border.strong-hover | --cr-border-strong-hover | #2e2e2e | #d1d1d1 |
border.interactive-pressed | --cr-border-interactive-pressed | #2e3900 | #94b200 |
border.interactive-hover | --cr-border-interactive-hover | #455500 | #d2f462 |
feedback
| Role | CSS variable | Light | Dark |
|---|---|---|---|
feedback.error.default | --cr-feedback-error-default | #cf3359 | #de4b69 |
feedback.error.hover | --cr-feedback-error-hover | #a82838 | #ea7b8b |
feedback.error.pressed | --cr-feedback-error-pressed | #7d1e2a | #f2a8b2 |
feedback.error.container-hover | --cr-feedback-error-container-hover | #fce8ea | #52141c |
feedback.error.content | --cr-feedback-error-content | #a82838 | #f2a8b2 |
feedback.error.container | --cr-feedback-error-container | #fef5f6 | #3d0f15 |
feedback.error.container-pressed | --cr-feedback-error-container-pressed | #f8ced3 | #7d1e2a |
feedback.error.foreground | --cr-feedback-error-foreground | #ffffff | #070707 |
feedback.success.default | --cr-feedback-success-default | #2d9454 | #4aaf74 |
feedback.success.hover | --cr-feedback-success-hover | #4aaf74 | #7bc59b |
feedback.success.pressed | --cr-feedback-success-pressed | #7bc59b | #a8d9bd |
feedback.success.container | --cr-feedback-success-container | #f5fcf8 | #092516 |
feedback.success.container-hover | --cr-feedback-success-container-hover | #e8f7ee | #0d371f |
feedback.success.container-pressed | --cr-feedback-success-container-pressed | #ceebda | #16562f |
feedback.success.content | --cr-feedback-success-content | #16562f | #a8d9bd |
feedback.success.foreground | --cr-feedback-success-foreground | #070707 | #070707 |
feedback.warning.default | --cr-feedback-warning-default | #a37308 | #f0a91e |
feedback.warning.hover | --cr-feedback-warning-hover | #f0a91e | #f5c15f |
feedback.warning.pressed | --cr-feedback-warning-pressed | #f5c15f | #f9d694 |
feedback.warning.container | --cr-feedback-warning-container | #fffbf4 | #2e2201 |
feedback.warning.container-hover | --cr-feedback-warning-container-hover | #fef5e6 | #463302 |
feedback.warning.container-pressed | --cr-feedback-warning-container-pressed | #fce8c7 | #755405 |
feedback.warning.content | --cr-feedback-warning-content | #755405 | #f9d694 |
feedback.warning.foreground | --cr-feedback-warning-foreground | #070707 | #070707 |
feedback.info.default | --cr-feedback-info-default | #3a18b1 | #9188db |
feedback.info.hover | --cr-feedback-info-hover | #2a1285 | #b8aee8 |
feedback.info.pressed | --cr-feedback-info-pressed | #1f0d5c | #d4caf3 |
feedback.info.container | --cr-feedback-info-container | #f5f4fd | #0f0628 |
feedback.info.container-hover | --cr-feedback-info-container-hover | #e8e4f9 | #140836 |
feedback.info.container-pressed | --cr-feedback-info-container-pressed | #d4caf3 | #1f0d5c |
feedback.info.content | --cr-feedback-info-content | #2a1285 | #b8aee8 |
feedback.info.foreground | --cr-feedback-info-foreground | #ffffff | #070707 |
alpha
| Role | CSS variable | Light | Dark |
|---|---|---|---|
alpha.neutral.5 | --cr-alpha-neutral-5 | rgba(32, 32, 32, 0.050980392156862744) | rgba(0, 0, 0, 0.050980392156862744) |
alpha.neutral.10 | --cr-alpha-neutral-10 | rgba(32, 32, 32, 0.10196078431372549) | rgba(0, 0, 0, 0.10196078431372549) |
alpha.neutral.20 | --cr-alpha-neutral-20 | rgba(32, 32, 32, 0.2) | rgba(0, 0, 0, 0.2) |
alpha.neutral.30 | --cr-alpha-neutral-30 | rgba(32, 32, 32, 0.2980392156862745) | rgba(0, 0, 0, 0.30196078431372547) |
alpha.neutral.40 | --cr-alpha-neutral-40 | rgba(32, 32, 32, 0.4) | rgba(0, 0, 0, 0.4) |
alpha.neutral.50 | --cr-alpha-neutral-50 | rgba(32, 32, 32, 0.5019607843137255) | rgba(0, 0, 0, 0.5019607843137255) |
alpha.neutral.60 | --cr-alpha-neutral-60 | rgba(32, 32, 32, 0.6) | rgba(0, 0, 0, 0.6) |
alpha.neutral.70 | --cr-alpha-neutral-70 | rgba(32, 32, 32, 0.6980392156862745) | rgba(0, 0, 0, 0.7019607843137254) |
alpha.neutral.80 | --cr-alpha-neutral-80 | rgba(32, 32, 32, 0.8) | rgba(0, 0, 0, 0.8) |
alpha.neutral.90 | --cr-alpha-neutral-90 | rgba(32, 32, 32, 0.9019607843137255) | rgba(0, 0, 0, 0.9019607843137255) |
alpha.primary.5 | --cr-alpha-primary-5 | rgba(121, 146, 0, 0.050980392156862744) | rgba(200, 240, 0, 0.050980392156862744) |
alpha.primary.10 | --cr-alpha-primary-10 | rgba(121, 146, 0, 0.10196078431372549) | rgba(200, 240, 0, 0.10196078431372549) |
alpha.primary.20 | --cr-alpha-primary-20 | rgba(121, 146, 0, 0.2) | rgba(200, 240, 0, 0.2) |
alpha.primary.30 | --cr-alpha-primary-30 | rgba(121, 146, 0, 0.2980392156862745) | rgba(200, 240, 0, 0.2980392156862745) |
alpha.primary.40 | --cr-alpha-primary-40 | rgba(121, 146, 0, 0.4) | rgba(200, 240, 0, 0.4) |
alpha.primary.50 | --cr-alpha-primary-50 | rgba(121, 146, 0, 0.5019607843137255) | rgba(200, 240, 0, 0.5019607843137255) |
alpha.destructive.5 | --cr-alpha-destructive-5 | rgba(207, 51, 89, 0.050980392156862744) | rgba(222, 75, 105, 0.050980392156862744) |
alpha.destructive.10 | --cr-alpha-destructive-10 | rgba(207, 51, 89, 0.10196078431372549) | rgba(222, 75, 105, 0.10196078431372549) |
alpha.destructive.20 | --cr-alpha-destructive-20 | rgba(207, 51, 89, 0.2) | rgba(222, 75, 105, 0.2) |
alpha.destructive.30 | --cr-alpha-destructive-30 | rgba(207, 51, 89, 0.30196078431372547) | rgba(222, 75, 105, 0.30196078431372547) |
alpha.white.5 | --cr-alpha-white-5 | rgba(255, 255, 255, 0.050980392156862744) | rgba(255, 255, 255, 0.050980392156862744) |
alpha.white.10 | --cr-alpha-white-10 | rgba(255, 255, 255, 0.10196078431372549) | rgba(255, 255, 255, 0.10196078431372549) |
alpha.white.20 | --cr-alpha-white-20 | rgba(255, 255, 255, 0.2) | rgba(255, 255, 255, 0.2) |
alpha.white.30 | --cr-alpha-white-30 | rgba(255, 255, 255, 0.30196078431372547) | rgba(255, 255, 255, 0.30196078431372547) |
alpha.white.50 | --cr-alpha-white-50 | rgba(255, 255, 255, 0.5019607843137255) | rgba(255, 255, 255, 0.5019607843137255) |
alpha.black.5 | --cr-alpha-black-5 | rgba(0, 0, 0, 0.050980392156862744) | rgba(0, 0, 0, 0.050980392156862744) |
alpha.black.10 | --cr-alpha-black-10 | rgba(0, 0, 0, 0.10196078431372549) | rgba(0, 0, 0, 0.10196078431372549) |
alpha.black.20 | --cr-alpha-black-20 | rgba(0, 0, 0, 0.2) | rgba(0, 0, 0, 0.2) |
alpha.black.30 | --cr-alpha-black-30 | rgba(0, 0, 0, 0.30196078431372547) | rgba(0, 0, 0, 0.30196078431372547) |
alpha.black.50 | --cr-alpha-black-50 | rgba(0, 0, 0, 0.5019607843137255) | rgba(0, 0, 0, 0.5019607843137255) |
shadow
| Role | CSS variable | Light | Dark |
|---|---|---|---|
shadow.color.default | --cr-shadow-color-default | rgba(0, 0, 0, 0.07058823529411765) | rgba(255, 255, 255, 0.050980392156862744) |
shadow.color.strong | --cr-shadow-color-strong | rgba(0, 0, 0, 0.10196078431372549) | rgba(255, 255, 255, 0.10196078431372549) |
Scales
Radius, spacing, border width and font families. They are not themed per mode.
| Token | CSS variable | Value |
|---|---|---|
spacing.0 | --cr-spacing-0 | 0rem |
spacing.2 | --cr-spacing-2 | 0.125rem |
spacing.4 | --cr-spacing-4 | 0.25rem |
spacing.8 | --cr-spacing-8 | 0.5rem |
spacing.12 | --cr-spacing-12 | 0.75rem |
spacing.16 | --cr-spacing-16 | 1rem |
spacing.24 | --cr-spacing-24 | 1.5rem |
spacing.32 | --cr-spacing-32 | 2rem |
spacing.40 | --cr-spacing-40 | 2.5rem |
spacing.48 | --cr-spacing-48 | 3rem |
spacing.64 | --cr-spacing-64 | 4rem |
spacing.80 | --cr-spacing-80 | 5rem |
spacing.96 | --cr-spacing-96 | 6rem |
spacing.160 | --cr-spacing-160 | 10rem |
radius.xs | --cr-radius-xs | 0.125rem |
radius.sm | --cr-radius-sm | 0.25rem |
radius.md | --cr-radius-md | 0.5rem |
radius.lg | --cr-radius-lg | 0.75rem |
radius.xl | --cr-radius-xl | 1rem |
radius.full | --cr-radius-full | 9999px |
border-width.0 | --cr-border-width-0 | 0px |
border-width.1 | --cr-border-width-1 | 1px |
border-width.2 | --cr-border-width-2 | 2px |
border-width.4 | --cr-border-width-4 | 4px |
border-width.8 | --cr-border-width-8 | 8px |
font-family.sans | --cr-font-family-sans | Lexend, ui-sans-serif, system-ui, sans-serif |
font-family.mono | --cr-font-family-mono | Illinois Mono, ui-monospace, SFMono-Regular, Menlo, monospace |
Typography
The mobile value replaces the desktop value under the mobile media query.
| Token | CSS variable | Desktop | Mobile |
|---|---|---|---|
display.large.font-size | --cr-display-large-font-size | 4.5rem | 2.5rem |
display.large.line-height | --cr-display-large-line-height | 5.5rem | 3rem |
display.large.letter-spacing | --cr-display-large-letter-spacing | -0.015em | -0.01em |
display.large.font-weight | --cr-display-large-font-weight | 500 | 400 |
display.medium.font-size | --cr-display-medium-font-size | 3.5rem | 2rem |
display.medium.line-height | --cr-display-medium-line-height | 4.25rem | 2.5rem |
display.medium.letter-spacing | --cr-display-medium-letter-spacing | -0.0125em | -0.0075em |
display.medium.font-weight | --cr-display-medium-font-weight | 600 | 500 |
display.small.font-size | --cr-display-small-font-size | 2.75rem | 1.75rem |
display.small.line-height | --cr-display-small-line-height | 3.25rem | 2.25rem |
display.small.letter-spacing | --cr-display-small-letter-spacing | -0.01em | -0.005em |
display.small.font-weight | --cr-display-small-font-weight | 600 | 500 |
display.x-large.font-size | --cr-display-x-large-font-size | 5.75rem | 3rem |
display.x-large.line-height | --cr-display-x-large-line-height | 7rem | 3.5rem |
display.x-large.letter-spacing | --cr-display-x-large-letter-spacing | -0.015em | -0.01em |
display.x-large.font-weight | --cr-display-x-large-font-weight | 500 | 400 |
display.x-small.font-size | --cr-display-x-small-font-size | 2.25rem | 1.5rem |
display.x-small.line-height | --cr-display-x-small-line-height | 2.75rem | 1.75rem |
display.x-small.letter-spacing | --cr-display-x-small-letter-spacing | -0.01em | -0.005em |
display.x-small.font-weight | --cr-display-x-small-font-weight | 600 | 500 |
heading.large.font-size | --cr-heading-large-font-size | 2rem | 1.375rem |
heading.large.line-height | --cr-heading-large-line-height | 2.75rem | 2rem |
heading.large.letter-spacing | --cr-heading-large-letter-spacing | -0.0075em | -0.0025em |
heading.large.font-weight | --cr-heading-large-font-weight | 600 | 500 |
heading.medium.font-size | --cr-heading-medium-font-size | 1.75rem | 1.25rem |
heading.medium.line-height | --cr-heading-medium-line-height | 2.25rem | 1.75rem |
heading.medium.letter-spacing | --cr-heading-medium-letter-spacing | 0em | 0em |
heading.medium.font-weight | --cr-heading-medium-font-weight | 400 | 400 |
heading.small.font-size | --cr-heading-small-font-size | 1.5rem | 1.125rem |
heading.small.line-height | --cr-heading-small-line-height | 2rem | 1.5rem |
heading.small.letter-spacing | --cr-heading-small-letter-spacing | 0em | 0em |
heading.small.font-weight | --cr-heading-small-font-weight | 400 | 400 |
heading.x-large.font-size | --cr-heading-x-large-font-size | 2.25rem | 1.5rem |
heading.x-large.line-height | --cr-heading-x-large-line-height | 3rem | 2rem |
heading.x-large.letter-spacing | --cr-heading-x-large-letter-spacing | -0.01em | -0.0025em |
heading.x-large.font-weight | --cr-heading-x-large-font-weight | 600 | 500 |
heading.x-small.font-size | --cr-heading-x-small-font-size | 1.25rem | 1rem |
heading.x-small.line-height | --cr-heading-x-small-line-height | 1.75rem | 1.5rem |
heading.x-small.letter-spacing | --cr-heading-x-small-letter-spacing | 0em | 0em |
heading.x-small.font-weight | --cr-heading-x-small-font-weight | 400 | 400 |
heading.xx-large.font-size | --cr-heading-xx-large-font-size | 2.5rem | 1.75rem |
heading.xx-large.line-height | --cr-heading-xx-large-line-height | 3.375rem | 2.5rem |
heading.xx-large.letter-spacing | --cr-heading-xx-large-letter-spacing | -0.01em | -0.005em |
heading.xx-large.font-weight | --cr-heading-xx-large-font-weight | 600 | 500 |
label.large.font-size | --cr-label-large-font-size | 1rem | 0.875rem |
label.large.line-height | --cr-label-large-line-height | 1.5rem | 1.25rem |
label.large.letter-spacing | --cr-label-large-letter-spacing | 0em | 0em |
label.large.font-weight | --cr-label-large-font-weight | 400 | 400 |
label.medium.font-size | --cr-label-medium-font-size | 0.875rem | 0.813rem |
label.medium.line-height | --cr-label-medium-line-height | 1.25rem | 1.25rem |
label.medium.letter-spacing | --cr-label-medium-letter-spacing | 0.005em | 0.0025em |
label.medium.font-weight | --cr-label-medium-font-weight | 400 | 400 |
label.small.font-size | --cr-label-small-font-size | 0.75rem | 0.75rem |
label.small.line-height | --cr-label-small-line-height | 1rem | 1rem |
label.small.letter-spacing | --cr-label-small-letter-spacing | 0.01em | 0.0075em |
label.small.font-weight | --cr-label-small-font-weight | 400 | 400 |
label.x-small.font-size | --cr-label-x-small-font-size | 0.625rem | 0.688rem |
label.x-small.line-height | --cr-label-x-small-line-height | 1rem | 1rem |
label.x-small.letter-spacing | --cr-label-x-small-letter-spacing | 0.015em | 0.01em |
label.x-small.font-weight | --cr-label-x-small-font-weight | 400 | 400 |
paragraph.large.font-size | --cr-paragraph-large-font-size | 1.125rem | 1rem |
paragraph.large.line-height | --cr-paragraph-large-line-height | 1.75rem | 1.5rem |
paragraph.large.letter-spacing | --cr-paragraph-large-letter-spacing | 0em | 0em |
paragraph.large.font-weight | --cr-paragraph-large-font-weight | 300 | 300 |
paragraph.medium.font-size | --cr-paragraph-medium-font-size | 1rem | 0.938rem |
paragraph.medium.line-height | --cr-paragraph-medium-line-height | 1.5rem | 1.5rem |
paragraph.medium.letter-spacing | --cr-paragraph-medium-letter-spacing | 0em | 0em |
paragraph.medium.font-weight | --cr-paragraph-medium-font-weight | 300 | 300 |
paragraph.small.font-size | --cr-paragraph-small-font-size | 0.875rem | 0.875rem |
paragraph.small.line-height | --cr-paragraph-small-line-height | 1.25rem | 1.25rem |
paragraph.small.letter-spacing | --cr-paragraph-small-letter-spacing | 0em | 0em |
paragraph.small.font-weight | --cr-paragraph-small-font-weight | 400 | 400 |
paragraph.x-small.font-size | --cr-paragraph-x-small-font-size | 0.75rem | 0.813rem |
paragraph.x-small.line-height | --cr-paragraph-x-small-line-height | 1rem | 1.25rem |
paragraph.x-small.letter-spacing | --cr-paragraph-x-small-letter-spacing | 0.005em | 0.0025em |
paragraph.x-small.font-weight | --cr-paragraph-x-small-font-weight | 400 | 400 |