Tokens → Color

NameValueDescription
--p-color-bg
rgba(241, 241, 241, 1)The default background color of the admin.
--p-color-bg-inverse
rgba(26, 26, 26, 1)Use for high contrast page or component backgrounds.
--p-color-bg-surface
rgba(255, 255, 255, 1)The background color for elements with the highest level of prominence, like a card.
--p-color-bg-surface-hover
rgba(247, 247, 247, 1)The hover state color for elements with the highest level of prominence.
--p-color-bg-surface-active
rgba(243, 243, 243, 1)The active state (on press) color for elements with the highest level of prominence.
--p-color-bg-surface-selected
rgba(241, 241, 241, 1)The selected state color for elements with the highest level of prominence.
--p-color-bg-surface-disabled
rgba(0, 0, 0, 0.05)The disabled state color for elements.
--p-color-bg-surface-secondary
rgba(247, 247, 247, 1)The background color for elements with a secondary level of prominence.
--p-color-bg-surface-secondary-hover
rgba(241, 241, 241, 1)The hover state color for elements with a secondary level of prominence.
--p-color-bg-surface-secondary-active
rgba(235, 235, 235, 1)The active state (on press) color for elements with a secondary level of prominence.
--p-color-bg-surface-secondary-selected
rgba(235, 235, 235, 1)The selected state color for elements with a secondary level of prominence.
--p-color-bg-surface-tertiary
rgba(243, 243, 243, 1)The background color for elements with a third level of prominence.
--p-color-bg-surface-tertiary-hover
rgba(235, 235, 235, 1)The hover state color for elements with a third level of prominence.
--p-color-bg-surface-tertiary-active
rgba(227, 227, 227, 1)The active state (on press) color for elements with a third level of prominence.
--p-color-bg-surface-brand
rgba(227, 227, 227, 1)Use to apply the key color to elements.
--p-color-bg-surface-brand-hover
rgba(235, 235, 235, 1)The hover state color for key elements.
--p-color-bg-surface-brand-active
rgba(241, 241, 241, 1)The active state (on press) color for key elements.
--p-color-bg-surface-brand-selected
rgba(241, 241, 241, 1)The selected state color for key elements.
--p-color-bg-surface-info
rgba(234, 244, 255, 1)Use for backgrounds communicating important information, like banners.
--p-color-bg-surface-info-hover
rgba(224, 240, 255, 1)The hover state color for communicating important information.
--p-color-bg-surface-info-active
rgba(202, 230, 255, 1)The active state (on press) color for communicating important information.
--p-color-bg-surface-success
rgba(205, 254, 225, 1)Use for backgrounds communicating success, like banners.
--p-color-bg-surface-success-hover
rgba(180, 254, 210, 1)The hover state color for communicating success.
--p-color-bg-surface-success-active
rgba(146, 254, 194, 1)The active state (on press) color for communicating success.
--p-color-bg-surface-caution
rgba(255, 248, 219, 1)Use for backgrounds communicating caution, like banners.
--p-color-bg-surface-caution-hover
rgba(255, 244, 191, 1)The hover state for communicating caution.
--p-color-bg-surface-caution-active
rgba(255, 239, 157, 1)The active state (on press) color for communicating caution.
--p-color-bg-surface-warning
rgba(255, 241, 227, 1)Use for backgrounds communicating warning, like banners.
--p-color-bg-surface-warning-hover
rgba(255, 235, 213, 1)The hover state color for communicating warning.
--p-color-bg-surface-warning-active
rgba(255, 228, 198, 1)The active state (on press) color for communicating warning.
--p-color-bg-surface-critical
rgba(254, 233, 232, 1)Use for backgrounds communicating critical information, like banners or input errors.
--p-color-bg-surface-critical-hover
rgba(254, 226, 225, 1)The hover state color for communicating critical information.
--p-color-bg-surface-critical-active
rgba(254, 218, 217, 1)The active state (on press) color for communicating critical information.
--p-color-bg-surface-emphasis
rgba(240, 242, 255, 1)Use for backgrounds indicating areas of focus in editors, such as the theme editor.
--p-color-bg-surface-emphasis-hover
rgba(234, 237, 255, 1)The hover state color for elements indicating areas of focus in editors.
--p-color-bg-surface-emphasis-active
rgba(226, 231, 255, 1)The active state (on press) color for elements indicating areas of focus in editors.
--p-color-bg-surface-magic
rgba(248, 247, 255, 1)Use for backgrounds of elements suggested by magic AI.
--p-color-bg-surface-magic-hover
rgba(243, 241, 255, 1)The hover state color for elements suggested by magic AI.
--p-color-bg-surface-magic-active
rgba(233, 229, 255, 1)The active state (on press) color for elements suggested by magic AI.
--p-color-bg-surface-inverse
rgba(48, 48, 48, 1)Use for elements on bg-inverse.
--p-color-bg-surface-transparent
rgba(0, 0, 0, 0)Use for elements that need a fully transparent background.
--p-color-bg-fill
rgba(255, 255, 255, 1)The background color of contained elements with a smaller surface area, like a button.
--p-color-bg-fill-hover
rgba(250, 250, 250, 1)The hover state color of contained elements with a smaller surface area, like a button.
--p-color-bg-fill-active
rgba(247, 247, 247, 1)The active state (on press) color of contained elements with a smaller surface area, like a button.
--p-color-bg-fill-selected
rgba(204, 204, 204, 1)The selected state color of contained elements with a smaller surface area, like a button or checkbox.
--p-color-bg-fill-disabled
rgba(0, 0, 0, 0.05)The disabled state color of contained elements with a smaller surface area, like a button.
--p-color-bg-fill-secondary
rgba(241, 241, 241, 1)The background color of elements with a smaller surface area and a secondary level of prominence.
--p-color-bg-fill-secondary-hover
rgba(235, 235, 235, 1)The hover state color of elements with a smaller surface area and a secondary level of prominence.
--p-color-bg-fill-secondary-active
rgba(227, 227, 227, 1)The active state (on press) color of elements with a smaller surface area and a secondary level of prominence.
--p-color-bg-fill-tertiary
rgba(227, 227, 227, 1)The background color of elements with a smaller surface area and a third level of prominence.
--p-color-bg-fill-tertiary-hover
rgba(212, 212, 212, 1)The hover state color of elements with a smaller surface area and a third level of prominence.
--p-color-bg-fill-tertiary-active
rgba(204, 204, 204, 1)The active state (on press) color of elements with a smaller surface area and a third level of prominence.
--p-color-bg-fill-brand
rgba(48, 48, 48, 1)The background color of main actions, like primary buttons.
--p-color-bg-fill-brand-hover
rgba(26, 26, 26, 1)The hover state color of main actions, like primary buttons.
--p-color-bg-fill-brand-active
rgba(26, 26, 26, 1)The active state (on press) color of main actions, like primary buttons.
--p-color-bg-fill-brand-selected
rgba(48, 48, 48, 1)The selected state color of main actions, like primary buttons.
--p-color-bg-fill-brand-disabled
rgba(0, 0, 0, 0.17)The disabled state color of main actions, like primary buttons.
--p-color-bg-fill-info
rgba(145, 208, 255, 1)Use for backgrounds communicating important information on elements with a smaller surface area, like a badge or button.
--p-color-bg-fill-info-hover
rgba(81, 192, 255, 1)The hover state color for communicating important information on elements with a smaller surface area.
--p-color-bg-fill-info-active
rgba(0, 148, 213, 1)The active state (on press) color for communicating important information on elements with a smaller surface area.
--p-color-bg-fill-info-secondary
rgba(213, 235, 255, 1)Use for backgrounds communicating important information on elements with a smaller surface area, with a secondary level of prominence.
--p-color-bg-fill-success
rgba(41, 132, 90, 1)Use for backgrounds communicating success on elements with a smaller surface area, like a badge or a banner.
--p-color-bg-fill-success-hover
rgba(19, 111, 69, 1)The hover state color for communicating success on elements with a smaller surface area.
--p-color-bg-fill-success-active
rgba(12, 81, 50, 1)The active state (on press) color for communicating success on elements with a smaller surface area.
--p-color-bg-fill-success-secondary
rgba(180, 254, 210, 1)Use for backgrounds communicating success on elements with a smaller surface area, with a secondary level of prominence.
--p-color-bg-fill-warning
rgba(255, 184, 0, 1)Use for backgrounds communicating warning on elements with a smaller surface area, like a badge or a banner.
--p-color-bg-fill-warning-hover
rgba(229, 165, 0, 1)The hover state color for communicating warning on elements with a smaller surface area.
--p-color-bg-fill-warning-active
rgba(178, 132, 0, 1)The active state (on press) color for communicating warning on elements with a smaller surface area.
--p-color-bg-fill-warning-secondary
rgba(255, 214, 164, 1)Use for backgrounds communicating warning on elements with a smaller surface area, with a secondary level of prominence.
--p-color-bg-fill-caution
rgba(255, 230, 0, 1)Use for backgrounds communicating caution on elements with a smaller surface area, like a badge or a banner.
--p-color-bg-fill-caution-hover
rgba(234, 211, 0, 1)The hover state color for communicating caution on elements with a smaller surface area.
--p-color-bg-fill-caution-active
rgba(225, 203, 0, 1)The active state (on press) color for communicating caution on elements with a smaller surface area.
--p-color-bg-fill-caution-secondary
rgba(255, 235, 120, 1)Use for backgrounds communicating caution on elements with a smaller surface area, with a secondary level of prominence.
--p-color-bg-fill-critical
rgba(229, 28, 0, 1)Use for backgrounds communicating critical information on elements with a smaller surface area, like a badge or a banner.
--p-color-bg-fill-critical-hover
rgba(181, 38, 11, 1)The hover state color for communicating critical information on elements with a smaller surface area.
--p-color-bg-fill-critical-active
rgba(142, 31, 11, 1)The active state (on press) color for communicating critical information on elements with a smaller surface area.
--p-color-bg-fill-critical-selected
rgba(142, 31, 11, 1)The selected state color for communicating critical information on elements with a smaller surface area.
--p-color-bg-fill-critical-secondary
rgba(254, 211, 209, 1)Use for backgrounds communicating critical information on elements with a smaller surface area, with a secondary level of prominence.
--p-color-bg-fill-emphasis
rgba(0, 91, 211, 1)Use for backgrounds indicating areas of focus in editors on elements with a smaller surface area, like a button or a badge.
--p-color-bg-fill-emphasis-hover
rgba(0, 66, 153, 1)The hover state color for indicating areas of focus in editors on elements with a smaller surface area.
--p-color-bg-fill-emphasis-active
rgba(0, 46, 106, 1)The active state (on press) color for indicating areas of focus in editors on elements with a smaller surface area.
--p-color-bg-fill-magic
rgba(128, 81, 255, 1)The background color of elements suggested by magic AI, like a badge or a banner.
--p-color-bg-fill-magic-secondary
rgba(233, 229, 255, 1)The background color of elements suggested by magic AI, with a secondary level of prominence.
--p-color-bg-fill-magic-secondary-hover
rgba(228, 222, 255, 1)The hover state color of elements suggested by magic AI, with a secondary level of prominence.
--p-color-bg-fill-magic-secondary-active
rgba(223, 217, 255, 1)The active state (on press) color of elements suggested by magic AI, with a secondary level of prominence.
--p-color-bg-fill-inverse
rgba(48, 48, 48, 1)The background color of elements with a smaller surface area on an inverse background.
--p-color-bg-fill-inverse-hover
rgba(74, 74, 74, 1)The hover state color of elements with a smaller surface area on an inverse background.
--p-color-bg-fill-inverse-active
rgba(97, 97, 97, 1)The active state (on press) color of elements with a smaller surface area on an inverse background.
--p-color-bg-fill-transparent
rgba(0, 0, 0, 0.02)The background color of elements that need to sit on different background colors, like tabs.
--p-color-bg-fill-transparent-hover
rgba(0, 0, 0, 0.05)The hover state color of elements that need to sit on different background colors, like tabs.
--p-color-bg-fill-transparent-active
rgba(0, 0, 0, 0.08)The active state (on press) color of elements that need to sit on different background colors, like tabs.
--p-color-bg-fill-transparent-selected
rgba(0, 0, 0, 0.08)The selected state color of elements that need to sit on different background colors, like tabs.
--p-color-bg-fill-transparent-secondary
rgba(0, 0, 0, 0.06)The background color of elements that need to sit on different background colors, with a secondary level of prominence.
--p-color-bg-fill-transparent-secondary-hover
rgba(0, 0, 0, 0.08)The hover state color of elements that need to sit on different background colors, with a secondary level of prominence.
--p-color-bg-fill-transparent-secondary-active
rgba(0, 0, 0, 0.11)The active state (on press) color of elements that need to sit on different background colors, with a secondary level of prominence.
--p-color-text
rgba(48, 48, 48, 1)The default text color.
--p-color-text-secondary
rgba(97, 97, 97, 1)Use for text with a secondary level of prominence.
--p-color-text-disabled
rgba(181, 181, 181, 1)Use for text in a disabled state.
--p-color-text-brand
rgba(74, 74, 74, 1)Use for text that needs to pull attention.
--p-color-text-brand-hover
rgba(48, 48, 48, 1)The hover state color for text that needs to pull attention.
--p-color-text-brand-on-bg-fill
rgba(255, 255, 255, 1)Use for text on bg-fill-brand, like primary buttons.
--p-color-text-brand-on-bg-fill-hover
rgba(227, 227, 227, 1)The hover state color for text on bg-fill-brand-hover.
--p-color-text-brand-on-bg-fill-active
rgba(204, 204, 204, 1)The active state (on press) color for text on bg-fill-brand.
--p-color-text-brand-on-bg-fill-disabled
rgba(255, 255, 255, 1)The disabled state color for text on bg-fill-brand-disabled.
--p-color-text-info
rgba(0, 58, 90, 1)Use for text communicating important information.
--p-color-text-info-hover
rgba(0, 58, 90, 1)The hover state color for text communicating important information.
--p-color-text-info-active
rgba(0, 33, 51, 1)The active state (on press) color for text communicating important information.
--p-color-text-info-secondary
rgba(0, 124, 180, 1)Use for text communicating important information with a secondary level of prominence.
--p-color-text-info-on-bg-fill
rgba(0, 33, 51, 1)Use for text and icons on bg-fill-info.
--p-color-text-success
rgba(12, 81, 50, 1)Use for text communicating success.
--p-color-text-success-hover
rgba(8, 61, 37, 1)The hover state color for text communicating success.
--p-color-text-success-active
rgba(9, 42, 27, 1)The active state (on press) color for text communicating success.
--p-color-text-success-secondary
rgba(41, 132, 90, 1)Use for text communicating success with a secondary level of prominence.
--p-color-text-success-on-bg-fill
rgba(248, 255, 251, 1)Use for text and icons on bg-fill-success.
--p-color-text-caution
rgba(79, 71, 0, 1)Use for text communicating caution.
--p-color-text-caution-hover
rgba(51, 46, 0, 1)The hover state color for text communicating caution.
--p-color-text-caution-active
rgba(31, 28, 0, 1)The active state (on press) color for text communicating caution.
--p-color-text-caution-secondary
rgba(130, 117, 0, 1)Use for text communicating caution with a secondary level of prominence.
--p-color-text-caution-on-bg-fill
rgba(51, 46, 0, 1)Use for text and icons on bg-fill-caution.
--p-color-text-warning
rgba(94, 66, 0, 1)Use for text communicating warning.
--p-color-text-warning-hover
rgba(65, 45, 0, 1)The hover state color for text communicating warning.
--p-color-text-warning-active
rgba(37, 26, 0, 1)The active state (on press) color for text communicating warning.
--p-color-text-warning-secondary
rgba(149, 111, 0, 1)Use for text communicating warning with a secondary level of prominence.
--p-color-text-warning-on-bg-fill
rgba(37, 26, 0, 1)Use for text and icons on bg-fill-warning.
--p-color-text-critical
rgba(142, 31, 11, 1)Use for text communicating critical information.
--p-color-text-critical-hover
rgba(95, 21, 7, 1)The hover state color for text communicating critical information.
--p-color-text-critical-active
rgba(47, 10, 4, 1)The active state (on press) color for text communicating critical information.
--p-color-text-critical-secondary
rgba(229, 28, 0, 1)Use for text communicating critical information with a secondary level of prominence.
--p-color-text-critical-on-bg-fill
rgba(255, 251, 251, 1)Use for text and icons on bg-fill-critical.
--p-color-text-emphasis
rgba(0, 91, 211, 1)Use for text indicating areas of focus in editors, like the theme editor.
--p-color-text-emphasis-hover
rgba(0, 66, 153, 1)The hover state color for text indicating areas of focus.
--p-color-text-emphasis-active
rgba(0, 46, 106, 1)The active state (on press) color for text indicating areas of focus.
--p-color-text-emphasis-on-bg-fill
rgba(252, 253, 255, 1)Use for text and icons on bg-fill-emphasis.
--p-color-text-emphasis-on-bg-fill-hover
rgba(226, 231, 255, 1)Use for text and icons on bg-fill-emphasis-hover.
--p-color-text-emphasis-on-bg-fill-active
rgba(213, 220, 255, 1)Use for text and icons on bg-fill-emphasis-active.
--p-color-text-magic
rgba(87, 0, 209, 1)Use for text suggested by magic AI.
--p-color-text-magic-secondary
rgba(113, 38, 255, 1)Use for text suggested by magic AI with a secondary level of prominence.
--p-color-text-magic-on-bg-fill
rgba(253, 253, 255, 1)Use for text and icons on bg-fill-magic.
--p-color-text-inverse
rgba(227, 227, 227, 1)Use for text on an inverse background.
--p-color-text-inverse-secondary
rgba(181, 181, 181, 1)Use for secondary text on an inverse background.
--p-color-border
rgba(227, 227, 227, 1)The default color for borders on any element.
--p-color-border-hover
rgba(204, 204, 204, 1)The hover color for borders on any element.
--p-color-border-disabled
rgba(235, 235, 235, 1)The disabled color for borders on any element.
--p-color-border-secondary
rgba(235, 235, 235, 1)The color for hr elements or any visual dividers.
--p-color-border-tertiary
rgba(204, 204, 204, 1)The border color on any element. Pair with bg-surface-tertiary or bg-fill-tertiary.
--p-color-border-focus
rgba(0, 91, 211, 1)The focus ring for any interactive element in a focused state.
--p-color-border-brand
rgba(227, 227, 227, 1)Use for borders paired with brand colors.
--p-color-border-info
rgba(168, 216, 255, 1)Use for borders communicating information.
--p-color-border-success
rgba(146, 254, 194, 1)Use for borders communicating success.
--p-color-border-caution
rgba(255, 235, 120, 1)Use for borders communicating caution.
--p-color-border-warning
rgba(255, 200, 121, 1)Use for borders communicating warning.
--p-color-border-critical
rgba(254, 195, 193, 1)Use for borders communicating critical information.
--p-color-border-critical-secondary
rgba(142, 31, 11, 1)Use for borders communicating critical information, such as borders on invalid text fields.
--p-color-border-emphasis
rgba(0, 91, 211, 1)Use for borders indicating areas of focus.
--p-color-border-emphasis-hover
rgba(0, 66, 153, 1)The hover state color for borders indicating areas of focus.
--p-color-border-emphasis-active
rgba(0, 46, 106, 1)The active state (on press) color for borders indicating areas of focus.
--p-color-border-magic
rgba(228, 222, 255, 1)Use for borders suggested by magic AI.
--p-color-border-magic-secondary
rgba(148, 116, 255, 1)Use for borders suggested by magic AI, such as borders on text fields.
--p-color-border-magic-secondary-hover
rgba(128, 81, 255, 1)Use for borders suggested by magic AI, such as borders on text fields.
--p-color-border-inverse
rgba(97, 97, 97, 1)Use for borders on an inverse background, such as borders on the global search.
--p-color-border-inverse-hover
rgba(204, 204, 204, 1)The hover state color for borders on an inverse background.
--p-color-border-inverse-active
rgba(227, 227, 227, 1)The active state (on press) color for borders on an inverse background.
--p-color-icon
rgba(74, 74, 74, 1)The default color for icons.
--p-color-icon-hover
rgba(48, 48, 48, 1)The hover state color for icons.
--p-color-icon-active
rgba(26, 26, 26, 1)The active state (on press) color for icons.
--p-color-icon-disabled
rgba(204, 204, 204, 1)The disabled state color for icons.
--p-color-icon-secondary
rgba(138, 138, 138, 1)Use for secondary icons.
--p-color-icon-secondary-hover
rgba(97, 97, 97, 1)The hover state color for secondary icons.
--p-color-icon-secondary-active
rgba(74, 74, 74, 1)The active state (on press) color for secondary icons.
--p-color-icon-brand
rgba(26, 26, 26, 1)Use for icons that need to pull more focus.
--p-color-icon-info
rgba(0, 148, 213, 1)Use for icons communicating information.
--p-color-icon-success
rgba(41, 132, 90, 1)Use for icons communicating success.
--p-color-icon-caution
rgba(153, 138, 0, 1)Use for icons communicating caution.
--p-color-icon-warning
rgba(178, 132, 0, 1)Use for icons communicating warning.
--p-color-icon-critical
rgba(239, 77, 47, 1)Use for icons communicating critical information.
--p-color-icon-emphasis
rgba(0, 91, 211, 1)Use for icons indicating areas of focus in editors, like the theme editor.
--p-color-icon-emphasis-hover
rgba(0, 66, 153, 1)The hover color for icons indicating areas of focus in editors.
--p-color-icon-emphasis-active
rgba(0, 46, 106, 1)The active state (on press) color for icons indicating areas of focus in editors.
--p-color-icon-magic
rgba(128, 81, 255, 1)Use for icons suggested by magic AI.
--p-color-icon-inverse
rgba(227, 227, 227, 1)Use for icons on an inverse background.
--p-color-avatar-bg-fill
rgba(181, 181, 181, 1)
--p-color-avatar-five-bg-fill
rgba(253, 75, 146, 1)
--p-color-avatar-five-text-on-bg-fill
rgba(255, 246, 248, 1)
--p-color-avatar-four-bg-fill
rgba(81, 192, 255, 1)
--p-color-avatar-four-text-on-bg-fill
rgba(0, 33, 51, 1)
--p-color-avatar-one-bg-fill
rgba(197, 48, 197, 1)
--p-color-avatar-one-text-on-bg-fill
rgba(253, 239, 253, 1)
--p-color-avatar-seven-bg-fill
rgba(148, 116, 255, 1)
--p-color-avatar-seven-text-on-bg-fill
rgba(248, 247, 255, 1)
--p-color-avatar-six-bg-fill
rgba(37, 232, 43, 1)
--p-color-avatar-six-text-on-bg-fill
rgba(3, 61, 5, 1)
--p-color-avatar-text-on-bg-fill
rgba(255, 255, 255, 1)
--p-color-avatar-three-bg-fill
rgba(44, 224, 212, 1)
--p-color-avatar-three-text-on-bg-fill
rgba(3, 60, 57, 1)
--p-color-avatar-two-bg-fill
rgba(56, 250, 163, 1)
--p-color-avatar-two-text-on-bg-fill
rgba(12, 81, 50, 1)
--p-color-backdrop-bg
rgba(0, 0, 0, 0.71)
--p-color-button-gradient-bg-fill
linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)
--p-color-checkbox-bg-surface-disabled
rgba(0, 0, 0, 0.08)
--p-color-checkbox-icon-disabled
rgba(255, 255, 255, 1)
--p-color-input-bg-surface
rgba(253, 253, 253, 1)
--p-color-input-bg-surface-hover
rgba(250, 250, 250, 1)
--p-color-input-bg-surface-active
rgba(247, 247, 247, 1)
--p-color-input-border
rgba(138, 138, 138, 1)
--p-color-input-border-hover
rgba(97, 97, 97, 1)
--p-color-input-border-active
rgba(26, 26, 26, 1)
--p-color-nav-bg
rgba(235, 235, 235, 1)
--p-color-nav-bg-surface
rgba(0, 0, 0, 0.02)
--p-color-nav-bg-surface-hover
rgba(241, 241, 241, 1)
--p-color-nav-bg-surface-active
rgba(250, 250, 250, 1)
--p-color-nav-bg-surface-selected
rgba(250, 250, 250, 1)
--p-color-radio-button-bg-surface-disabled
rgba(0, 0, 0, 0.08)
--p-color-radio-button-icon-disabled
rgba(255, 255, 255, 1)
--p-color-video-thumbnail-play-button-bg-fill-hover
rgba(0, 0, 0, 0.81)
--p-color-video-thumbnail-play-button-bg-fill
rgba(0, 0, 0, 0.71)
--p-color-video-thumbnail-play-button-text-on-bg-fill
rgba(255, 255, 255, 1)
--p-color-scrollbar-thumb-bg-hover
rgba(138, 138, 138, 1)