@engie-group/fluid-design-tokens/lib/json/tokens-dark.json

Fluid Design Tokens

{
  "semantic": {
    "color": {
      "background": {
        "neutral": {
          "primary": {
            "default": {
              "value": "#15191d",
              "comment": "Sets the background color to white, provides a clean and minimalist canvas for the interface. Classic foundation for content and components."
            },
            "hovered": {
              "value": "#1f262b"
            },
            "focused": {
              "value": "#1f262b"
            },
            "pressed": {
              "value": "#2e3942"
            },
            "selected": {
              "value": "#12263A"
            },
            "translucent": {
              "default": {
                "value": "rgba(0, 0, 0, 0)"
              },
              "hovered": {
                "value": "rgba(164, 211, 229, 0.07)"
              },
              "focused": {
                "value": "rgba(164, 211, 229, 0.07)"
              },
              "pressed": {
                "value": "rgba(168, 213, 247, 0.17)"
              },
              "selected": {
                "value": "rgba(15, 51, 87, 0.5)"
              }
            }
          },
          "secondary": {
            "default": {
              "value": "#1a1f23",
              "comment": "Provides a subtle contrast with the primary background. Use to add a touch of visual interest without overpowering the content."
            },
            "hovered": {
              "value": "#1f262b"
            },
            "focused": {
              "value": "#1f262b"
            },
            "pressed": {
              "value": "#2e3942"
            },
            "translucent": {
              "default": {
                "value": "rgba(188, 225, 229, 0.03)"
              },
              "hovered": {
                "value": "rgba(164, 211, 229, 0.07)"
              },
              "focused": {
                "value": "rgba(164, 211, 229, 0.07)"
              },
              "pressed": {
                "value": "rgba(168, 213, 247, 0.17)"
              }
            }
          },
          "tertiary": {
            "default": {
              "value": "#1f262b",
              "comment": "Provides a slightly stronger contrast with the primary background. Use to enhances the visual separation between different sections or elements."
            },
            "hovered": {
              "value": "#2e3942"
            },
            "focused": {
              "value": "#2e3942"
            },
            "pressed": {
              "value": "#425663"
            },
            "translucent": {
              "default": {
                "value": "rgba(164, 211, 229, 0.07)"
              },
              "hovered": {
                "value": "rgba(168, 213, 247, 0.17)"
              },
              "focused": {
                "value": "rgba(168, 213, 247, 0.17)"
              },
              "pressed": {
                "value": "rgba(166, 222, 255, 0.31)"
              }
            }
          },
          "solid": {
            "default": {
              "value": "#718492",
              "comment": "Provides a distinct and noticeable contrast with the primary background. Adds a robust and substantial presence, use it to make the element stand out."
            },
            "hovered": {
              "value": "#97a5af"
            },
            "focused": {
              "value": "#97a5af"
            },
            "pressed": {
              "value": "#bcc4cb"
            }
          },
          "inverse": {
            "default": {
              "value": "#15191d",
              "comment": "Applies white as the background color, creating a striking visual effect when used on a dark-colored surface. Use to ensure readability and visual appeal in specific UI components or sections."
            },
            "hovered": {
              "value": "#1f262b"
            },
            "focused": {
              "value": "#1f262b"
            },
            "pressed": {
              "value": "#2e3942"
            },
            "translucent": {
              "default": {
                "value": "rgba(0, 0, 0, 0)"
              },
              "hovered": {
                "value": "rgba(168, 213, 247, 0.17)"
              },
              "focused": {
                "value": "rgba(168, 213, 247, 0.17)"
              },
              "pressed": {
                "value": "rgba(166, 222, 255, 0.31)"
              }
            }
          },
          "spotlight": {
            "default": {
              "value": "#e2e5e9",
              "comment": "Creates a high contrast with the primary background. Use it for critical elements or components that require maximum emphasis and visual impact."
            }
          }
        },
        "brand": {
          "primary": {
            "translucent": {
              "default": {
                "value": "rgba(0, 0, 0, 0)"
              },
              "hovered": {
                "value": "rgba(15, 51, 87, 0.5)"
              },
              "focused": {
                "value": "rgba(15, 51, 87, 0.5)"
              },
              "pressed": {
                "value": "rgba(9, 93, 155, 0.5)"
              }
            }
          },
          "secondary": {
            "default": {
              "value": "#111F2D",
              "comment": "Establishes a subtle contrast with the primary background while using the brand color. Use it to add a touch of brand interest without overpowering the content."
            },
            "hovered": {
              "value": "#12263A"
            },
            "focused": {
              "value": "#12263A"
            },
            "pressed": {
              "value": "#0F3B5C"
            },
            "translucent": {
              "default": {
                "value": "rgba(12, 39, 66, 0.43)"
              },
              "hovered": {
                "value": "rgba(15, 51, 87, 0.5)"
              },
              "focused": {
                "value": "rgba(15, 51, 87, 0.5)"
              },
              "pressed": {
                "value": "rgba(9, 93, 155, 0.5)"
              }
            }
          },
          "tertiary": {
            "default": {
              "value": "#12263A",
              "comment": "Creates a slightly stronger contrast with the primary background while using the brand color. Use it to enhances the visual separation between different sections or elements."
            },
            "hovered": {
              "value": "#0F3B5C"
            },
            "focused": {
              "value": "#0F3B5C"
            },
            "pressed": {
              "value": "#065789"
            },
            "translucent": {
              "default": {
                "value": "rgba(15, 51, 87, 0.5)"
              },
              "hovered": {
                "value": "rgba(9, 93, 155, 0.5)"
              },
              "focused": {
                "value": "rgba(9, 93, 155, 0.5)"
              },
              "pressed": {
                "value": "rgba(0, 101, 168, 0.81)"
              }
            }
          },
          "solid": {
            "default": {
              "value": "#3D86C4",
              "comment": "Use to add a robust and substantial brand presence, making the elements stand out using the brand color."
            },
            "hovered": {
              "value": "#76A7DB"
            },
            "focused": {
              "value": "#76A7DB"
            },
            "pressed": {
              "value": "#A9C5EA"
            }
          },
          "spotlight": {
            "default": {
              "value": "#DAE6F6",
              "comment": "Creates a high contrast with the primary background while reminiscing of the brand identity. Use it for critical elements or components that require maximum emphasis and visual impact."
            }
          }
        },
        "status": {
          "danger": {
            "primary": {
              "translucent": {
                "default": {
                  "value": "rgba(0, 0, 0, 0)"
                },
                "hovered": {
                  "value": "rgba(197, 29, 1, 0.25)"
                },
                "focused": {
                  "value": "rgba(197, 29, 1, 0.25)"
                },
                "pressed": {
                  "value": "rgba(250, 51, 32, 0.34)"
                },
                "selected": {
                  "value": "rgba(197, 29, 1, 0.25)"
                }
              }
            },
            "secondary": {
              "default": {
                "value": "#321613"
              },
              "hovered": {
                "value": "#411a16"
              },
              "focused": {
                "value": "#411a16"
              },
              "pressed": {
                "value": "#63221e"
              }
            },
            "tertiary": {
              "default": {
                "value": "#411a16"
              },
              "hovered": {
                "value": "#63221e"
              },
              "focused": {
                "value": "#63221e"
              },
              "pressed": {
                "value": "#95302c"
              },
              "translucent": {
                "default": {
                  "value": "rgba(197, 29, 1, 0.25)"
                },
                "hovered": {
                  "value": "rgba(250, 51, 32, 0.34)"
                },
                "focused": {
                  "value": "rgba(250, 51, 32, 0.34)"
                },
                "pressed": {
                  "value": "rgba(254, 67, 56, 0.55);"
                }
              }
            },
            "solid": {
              "default": {
                "value": "#dd534b",
                "comment": "Indicate a state of danger or criticality in your interface. Use for elements that require immediate attention due to errors, warnings, or potentially harmful actions. Serves as a powerful visual cue to alert users to potential issues and encourages careful consideration of their actions."
              },
              "hovered": {
                "value": "#fa7e72"
              },
              "pressed": {
                "value": "#ffaea3"
              },
              "focused": {
                "value": "#fa7e72"
              }
            },
            "spotlight": {
              "default": {
                "value": "#ffddd7"
              }
            }
          },
          "success": {
            "primary": {
              "translucent": {
                "default": {
                  "value": "rgba(0, 0, 0, 0)"
                },
                "hovered": {
                  "value": "rgba(5, 97, 1, 0.25)"
                },
                "focused": {
                  "value": "rgba(5, 97, 1, 0.25)"
                },
                "pressed": {
                  "value": "rgba(3, 254, 35, 0.17)"
                },
                "selected": {
                  "value": "rgba(5, 97, 1, 0.25)"
                }
              }
            },
            "secondary": {
              "default": {
                "value": "#102313"
              },
              "hovered": {
                "value": "#112b16"
              },
              "focused": {
                "value": "#112b16"
              },
              "pressed": {
                "value": "#12401e"
              }
            },
            "tertiary": {
              "default": {
                "value": "#112b16"
              },
              "hovered": {
                "value": "#12401e"
              },
              "focused": {
                "value": "#12401e"
              },
              "pressed": {
                "value": "#12602b"
              },
              "translucent": {
                "default": {
                  "value": "rgba(5, 97, 1, 0.25)"
                },
                "hovered": {
                  "value": "rgba(3, 254, 35, 0.17)"
                },
                "focused": {
                  "value": "rgba(3, 254, 35, 0.17)"
                },
                "pressed": {
                  "value": "rgba(11, 254, 74, 0.31);"
                }
              }
            },
            "solid": {
              "default": {
                "value": "#30934b",
                "comment": "Associated with successful or positive states in your interface. Apply it to elements or components that confirm successful actions or completion of tasks."
              },
              "hovered": {
                "value": "#63b473"
              },
              "focused": {
                "value": "#63b473"
              },
              "pressed": {
                "value": "#99d0a0"
              }
            },
            "spotlight": {
              "default": {
                "value": "#d4ebd6"
              }
            }
          },
          "warning": {
            "primary": {
              "translucent": {
                "default": {
                  "value": "rgba(0, 0, 0, 0)"
                },
                "hovered": {
                  "value": "rgba(142, 50, 0, 0.28)"
                },
                "focused": {
                  "value": "rgba(142, 50, 0, 0.28)"
                },
                "pressed": {
                  "value": "rgba(254, 106, 22, 0.27)"
                },
                "selected": {
                  "value": "rgba(142, 50, 0, 0.28)"
                }
              }
            },
            "secondary": {
              "default": {
                "value": "#2c1b12"
              },
              "hovered": {
                "value": "#372015"
              },
              "focused": {
                "value": "#372015"
              },
              "pressed": {
                "value": "#542f1b"
              }
            },
            "tertiary": {
              "default": {
                "value": "#372015"
              },
              "hovered": {
                "value": "#542f1b"
              },
              "focused": {
                "value": "#542f1b"
              },
              "pressed": {
                "value": "#7e4425"
              },
              "translucent": {
                "default": {
                  "value": "rgba(142, 50, 0, 0.28)"
                },
                "hovered": {
                  "value": "rgba(254, 106, 22, 0.27)"
                },
                "focused": {
                  "value": "rgba(254, 106, 22, 0.27)"
                },
                "pressed": {
                  "value": "rgba(254, 121, 47, 0.45);"
                }
              }
            },
            "solid": {
              "default": {
                "value": "#c3693a",
                "comment": "Conveys a warning or cautionary state in your interface. Use for elements that signify non-critical but important information, such as alerts, notices, or reminders. Helps users recognize situations that require their attention without implying immediate danger."
              },
              "hovered": {
                "value": "#f08750"
              },
              "focused": {
                "value": "#f08750"
              },
              "pressed": {
                "value": "#ffb182"
              }
            },
            "spotlight": {
              "default": {
                "value": "#ffdfc8"
              }
            }
          },
          "discovery": {
            "primary": {
              "translucent": {
                "default": {
                  "value": "rgba(0, 0, 0, 0)"
                },
                "hovered": {
                  "value": "rgba(232, 136, 196, 0.09)"
                },
                "focused": {
                  "value": "rgba(232, 136, 196, 0.09)"
                },
                "pressed": {
                  "value": "rgba(221, 139, 252, 0.22)"
                },
                "selected": {
                  "value": "rgba(232, 136, 196, 0.09)"
                }
              }
            },
            "secondary": {
              "default": {
                "value": "#201d22"
              },
              "hovered": {
                "value": "#28232c"
              },
              "focused": {
                "value": "#28232c"
              },
              "pressed": {
                "value": "#41324e"
              }
            },
            "tertiary": {
              "default": {
                "value": "#28232c"
              },
              "hovered": {
                "value": "#41324e"
              },
              "focused": {
                "value": "#41324e"
              },
              "pressed": {
                "value": "#694288"
              },
              "translucent": {
                "default": {
                  "value": "rgba(232, 136, 196, 0.09)"
                },
                "hovered": {
                  "value": "rgba(221, 139, 252, 0.22)"
                },
                "focused": {
                  "value": "rgba(221, 139, 252, 0.22)"
                },
                "pressed": {
                  "value": "rgba(196, 110, 252, 0.48);"
                }
              }
            },
            "solid": {
              "default": {
                "value": "#9971b8",
                "comment": "Employed to highlight discovery or exploration-related content in your interface. Use to draw attention to new features, recommendations, or content suggestions. Invites users to explore and engage with new offerings, creating an exciting and engaging experience."
              },
              "hovered": {
                "value": "#b697cf"
              },
              "focused": {
                "value": "#b697cf"
              },
              "pressed": {
                "value": "#d0bbe1"
              }
            },
            "spotlight": {
              "default": {
                "value": "#ebe1f2"
              }
            }
          },
          "information": {
            "primary": {
              "translucent": {
                "default": {
                  "value": "rgba(0, 0, 0, 0)"
                },
                "hovered": {
                  "value": "rgba(15, 51, 87, 0.5)"
                },
                "focused": {
                  "value": "rgba(15, 51, 87, 0.5)"
                },
                "pressed": {
                  "value": "rgba(9, 93, 155, 0.5)"
                },
                "selected": {
                  "value": "rgba(15, 51, 87, 0.5)"
                }
              }
            },
            "solid": {
              "default": {
                "value": "#3D86C4",
                "comment": "Used for informational elements in your interface. Conveys non-critical information or provides additional details. Use for components or supplementary content that enhances the user's understanding of the interface without causing distraction."
              },
              "hovered": {
                "value": "#76A7DB"
              },
              "focused": {
                "value": "#76A7DB"
              },
              "pressed": {
                "value": "#A9C5EA"
              }
            },
            "secondary": {
              "default": {
                "value": "#111F2D"
              },
              "hovered": {
                "value": "#12263A"
              },
              "focused": {
                "value": "#12263A"
              },
              "pressed": {
                "value": "#0F3B5C"
              }
            },
            "tertiary": {
              "default": {
                "value": "#12263A"
              },
              "hovered": {
                "value": "#0F3B5C"
              },
              "focused": {
                "value": "#0F3B5C"
              },
              "pressed": {
                "value": "#065789"
              },
              "translucent": {
                "default": {
                  "value": "rgba(15, 51, 87, 0.5)"
                },
                "hovered": {
                  "value": "rgba(9, 93, 155, 0.5)"
                },
                "focused": {
                  "value": "rgba(9, 93, 155, 0.5)"
                },
                "pressed": {
                  "value": "rgba(0, 101, 168, 0.81)"
                }
              }
            },
            "spotlight": {
              "default": {
                "value": "#DAE6F6"
              }
            }
          },
          "planet": {
            "primary": {
              "translucent": {
                "default": {
                  "value": "rgba(0, 0, 0, 0)"
                },
                "hovered": {
                  "value": "rgba(135, 225, 172, 0.07)"
                },
                "focused": {
                  "value": "rgba(135, 225, 172, 0.07)"
                },
                "pressed": {
                  "value": "rgba(115, 244, 217, 0.16)"
                },
                "selected": {
                  "value": "rgba(135, 225, 172, 0.07)"
                }
              }
            },
            "solid": {
              "default": {
                "value": "#328e8a"
              },
              "hovered": {
                "value": "#58b1ad"
              },
              "pressed": {
                "value": "#8bcfcb"
              },
              "focused": {
                "value": "#58b1ad"
              }
            },
            "secondary": {
              "default": {
                "value": "#191f1f"
              },
              "hovered": {
                "value": "#1d2727"
              },
              "focused": {
                "value": "#1d2727"
              },
              "pressed": {
                "value": "#243c3b"
              }
            },
            "tertiary": {
              "default": {
                "value": "#1d2727"
              },
              "hovered": {
                "value": "#243c3b"
              },
              "focused": {
                "value": "#243c3b"
              },
              "pressed": {
                "value": "#275b59"
              },
              "translucent": {
                "default": {
                  "value": "rgba(135, 225, 172, 0.07)"
                },
                "hovered": {
                  "value": "rgba(115, 244, 217, 0.16)"
                },
                "focused": {
                  "value": "rgba(115, 244, 217, 0.16)"
                },
                "pressed": {
                  "value": "rgba(83, 253, 236, 0.29);"
                }
              }
            },
            "spotlight": {
              "default": {
                "value": "#ccebea"
              }
            }
          }
        },
        "accent": {
          "pink": {
            "secondary": {
              "default": {
                "value": "#211d1e",
                "comment": "Subtle touch of pink with no meaning tied to the color."
              },
              "hovered": {
                "value": "#2a2326"
              },
              "focused": {
                "value": "#2a2326"
              },
              "pressed": {
                "value": "#45333a"
              }
            },
            "tertiary": {
              "default": {
                "value": "#2a2326",
                "comment": "Soft pink background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#45333a"
              },
              "focused": {
                "value": "#45333a"
              },
              "pressed": {
                "value": "#7b4159"
              }
            },
            "solid": {
              "default": {
                "value": "#e44284",
                "comment": "Suitable for pink backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              },
              "hovered": {
                "value": "#f779ad"
              },
              "focused": {
                "value": "#f779ad"
              },
              "pressed": {
                "value": "#fbaccc"
              }
            },
            "spotlight": {
              "default": {
                "value": "#fddcea",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "red": {
            "secondary": {
              "default": {
                "value": "#321613",
                "comment": "Subtle touch of red with no meaning tied to the color."
              },
              "hovered": {
                "value": "#411a16"
              },
              "focused": {
                "value": "#411a16"
              },
              "pressed": {
                "value": "#63221e"
              }
            },
            "tertiary": {
              "default": {
                "value": "#411a16",
                "comment": "Soft red background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#63221e"
              },
              "focused": {
                "value": "#63221e"
              },
              "pressed": {
                "value": "#95302c"
              }
            },
            "solid": {
              "default": {
                "value": "#dd534b",
                "comment": "Suitable for red backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              }
            },
            "spotlight": {
              "default": {
                "value": "#ffddd7",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "orange": {
            "secondary": {
              "default": {
                "value": "#2c1b12",
                "comment": "Subtle touch of orange with no meaning tied to the color."
              },
              "hovered": {
                "value": "#372015"
              },
              "focused": {
                "value": "#372015"
              },
              "pressed": {
                "value": "#542f1b"
              }
            },
            "tertiary": {
              "default": {
                "value": "#372015",
                "comment": "Soft orange background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#542f1b"
              },
              "focused": {
                "value": "#542f1b"
              },
              "pressed": {
                "value": "#7e4425"
              }
            },
            "solid": {
              "default": {
                "value": "#c3693a",
                "comment": "Suitable for orange backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              },
              "hovered": {
                "value": "#f08750"
              },
              "focused": {
                "value": "#f08750"
              },
              "pressed": {
                "value": "#ffb182"
              }
            },
            "spotlight": {
              "default": {
                "value": "#ffdfc8",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "yellow": {
            "secondary": {
              "default": {
                "value": "#251e13",
                "comment": "Subtle touch of yellow with no meaning tied to the color."
              },
              "hovered": {
                "value": "#2c2416"
              },
              "focused": {
                "value": "#2c2416"
              },
              "pressed": {
                "value": "#43361d"
              }
            },
            "tertiary": {
              "default": {
                "value": "#2c2416",
                "comment": "Soft yellow background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#43361d"
              },
              "focused": {
                "value": "#43361d"
              },
              "pressed": {
                "value": "#655027"
              }
            },
            "solid": {
              "default": {
                "value": "#c59d4a",
                "comment": "Suitable for yellow backgrounds when there is no meaning tied to the color. No minimum contrast requirement met!"
              },
              "hovered": {
                "value": "#eabc5f"
              },
              "focused": {
                "value": "#eabc5f"
              },
              "pressed": {
                "value": "#ffe299"
              }
            },
            "spotlight": {
              "default": {
                "value": "#ffe299",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "green": {
            "secondary": {
              "default": {
                "value": "#102313",
                "comment": "Subtle touch of green with no meaning tied to the color."
              },
              "hovered": {
                "value": "#112b16"
              },
              "focused": {
                "value": "#112b16"
              },
              "pressed": {
                "value": "#12401e"
              }
            },
            "tertiary": {
              "default": {
                "value": "#112b16",
                "comment": "Soft green background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#12401e"
              },
              "focused": {
                "value": "#12401e"
              },
              "pressed": {
                "value": "#12602b"
              }
            },
            "solid": {
              "default": {
                "value": "#30934b",
                "comment": "Suitable for green backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              },
              "hovered": {
                "value": "#63b473"
              },
              "focused": {
                "value": "#63b473"
              },
              "pressed": {
                "value": "#99d0a0"
              }
            },
            "spotlight": {
              "default": {
                "value": "#d4ebd6",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "grey": {
            "secondary": {
              "default": {
                "value": "#1a1f23",
                "comment": "Subtle touch of grey with no meaning tied to the color."
              },
              "hovered": {
                "value": "#1f262b"
              },
              "focused": {
                "value": "#1f262b"
              },
              "pressed": {
                "value": "#2e3942"
              }
            },
            "tertiary": {
              "default": {
                "value": "#1f262b",
                "comment": "Soft grey background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#2e3942"
              },
              "focused": {
                "value": "#2e3942"
              },
              "pressed": {
                "value": "#425663"
              }
            },
            "solid": {
              "default": {
                "value": "#718492",
                "comment": "Suitable for grey backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              },
              "hovered": {
                "value": "#97a5af"
              },
              "focused": {
                "value": "#97a5af"
              },
              "pressed": {
                "value": "#bcc4cb"
              }
            },
            "spotlight": {
              "default": {
                "value": "#e2e5e9",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "blue": {
            "secondary": {
              "default": {
                "value": "#111F2D",
                "comment": "Subtle touch of blue with no meaning tied to the color."
              },
              "hovered": {
                "value": "#12263A"
              },
              "focused": {
                "value": "#12263A"
              },
              "pressed": {
                "value": "#0F3B5C"
              }
            },
            "tertiary": {
              "default": {
                "value": "#12263A",
                "comment": "Soft blue background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#0F3B5C"
              },
              "focused": {
                "value": "#0F3B5C"
              },
              "pressed": {
                "value": "#065789"
              }
            },
            "solid": {
              "default": {
                "value": "#3D86C4",
                "comment": "Suitable for blue backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              },
              "hovered": {
                "value": "#76A7DB"
              },
              "focused": {
                "value": "#76A7DB"
              },
              "pressed": {
                "value": "#A9C5EA"
              }
            },
            "spotlight": {
              "default": {
                "value": "#DAE6F6",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "ultramarine": {
            "secondary": {
              "default": {
                "value": "#171d37",
                "comment": "Subtle touch of ultramarine with no meaning tied to the color."
              },
              "hovered": {
                "value": "#17224b"
              },
              "focused": {
                "value": "#17224b"
              },
              "pressed": {
                "value": "#25346e"
              }
            },
            "tertiary": {
              "default": {
                "value": "#17224b",
                "comment": "Soft ultramarine background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#25346e"
              },
              "focused": {
                "value": "#25346e"
              },
              "pressed": {
                "value": "#3f508e"
              }
            },
            "solid": {
              "default": {
                "value": "#717fb5",
                "comment": "Suitable for ultramarine backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              },
              "hovered": {
                "value": "#96a2cc"
              },
              "focused": {
                "value": "#96a2cc"
              },
              "pressed": {
                "value": "#bbc2df"
              }
            },
            "spotlight": {
              "default": {
                "value": "#e1e4f1",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "purple": {
            "secondary": {
              "default": {
                "value": "#201d22",
                "comment": "Subtle touch of purple with no meaning tied to the color."
              },
              "hovered": {
                "value": "#28232c"
              },
              "focused": {
                "value": "#28232c"
              },
              "pressed": {
                "value": "#41324e"
              }
            },
            "tertiary": {
              "default": {
                "value": "#28232c",
                "comment": "Soft purple background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#41324e"
              },
              "focused": {
                "value": "#41324e"
              },
              "pressed": {
                "value": "#694288"
              }
            },
            "solid": {
              "default": {
                "value": "#9971b8",
                "comment": "Suitable for purple backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              },
              "hovered": {
                "value": "#b697cf"
              },
              "focused": {
                "value": "#b697cf"
              },
              "pressed": {
                "value": "#d0bbe1"
              }
            },
            "spotlight": {
              "default": {
                "value": "#ebe1f2",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "teal": {
            "secondary": {
              "default": {
                "value": "#191f1f",
                "comment": "Subtle touch of teal with no meaning tied to the color."
              },
              "hovered": {
                "value": "#1d2727"
              },
              "focused": {
                "value": "#1d2727"
              },
              "pressed": {
                "value": "#243c3b"
              }
            },
            "tertiary": {
              "default": {
                "value": "#1d2727",
                "comment": "Soft teal background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#243c3b"
              },
              "focused": {
                "value": "#243c3b"
              },
              "pressed": {
                "value": "#275b59"
              }
            },
            "solid": {
              "default": {
                "value": "#328e8a",
                "comment": "Suitable for teal backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              },
              "hovered": {
                "value": "#58b1ad"
              },
              "focused": {
                "value": "#58b1ad"
              },
              "pressed": {
                "value": "#8bcfcb"
              }
            },
            "spotlight": {
              "default": {
                "value": "#ccebea",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          },
          "lime": {
            "secondary": {
              "default": {
                "value": "#1e2010",
                "comment": "Subtle touch of lime with no meaning tied to the color."
              },
              "hovered": {
                "value": "#242713"
              },
              "focused": {
                "value": "#242713"
              },
              "pressed": {
                "value": "#353b18"
              }
            },
            "tertiary": {
              "default": {
                "value": "#242713",
                "comment": "Soft lime background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
              },
              "hovered": {
                "value": "#353b18"
              },
              "focused": {
                "value": "#353b18"
              },
              "pressed": {
                "value": "#4e581e"
              }
            },
            "solid": {
              "default": {
                "value": "#78892a",
                "comment": "Suitable for lime backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1)."
              },
              "hovered": {
                "value": "#97ac37"
              },
              "focused": {
                "value": "#97ac37"
              },
              "pressed": {
                "value": "#b7cd4f"
              }
            },
            "spotlight": {
              "default": {
                "value": "#dfed90",
                "comment": "Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface"
              }
            }
          }
        },
        "additional": {
          "engieRay": {
            "default": {
              "value": "linear-gradient(90deg, #00AAFF 0%, #23d2b5 100%)",
              "comment": "ENGIE's brand gradient. We strongly advise to refer to the brand guidelines for its usage."
            }
          },
          "signature": {
            "default": {
              "value": "#171d37",
              "comment": "ENGIE's additional brand color. We strongly advise to refer to the brand guidelines for its usage."
            }
          },
          "ai": {
            "default": {
              "value": "linear-gradient(90deg, #3D86C4 25%, #9971b8 75%)",
              "comment": "Artificial Intelligence brand gradient. We strongly advise to refer to the brand guidelines for its usage."
            }
          }
        }
      },
      "border": {
        "neutral": {
          "minimal": {
            "default": {
              "value": "#1f262b",
              "comment": "Almost imperceptible, provides a gentle visual separation between elements without drawing much attention to itself. Used for separators."
            },
            "hovered": {
              "value": "#2e3942"
            },
            "focused": {
              "value": "#2e3942"
            },
            "pressed": {
              "value": "#425663"
            },
            "selected": {
              "value": "#425663"
            }
          },
          "subtle": {
            "default": {
              "value": "#2e3942",
              "comment": "Offers a subtle visual distinction between elements, without overpowering the content. Used for separators and cards."
            },
            "hovered": {
              "value": "#425663"
            },
            "focused": {
              "value": "#425663"
            },
            "pressed": {
              "value": "#5c7181"
            },
            "selected": {
              "value": "#5c7181"
            }
          },
          "moderate": {
            "default": {
              "value": "#5c7181",
              "comment": "Provides a clear separation between elements, ensuring they stand out without becoming too overwhelming. Use for tags and inputs."
            },
            "hovered": {
              "value": "#718492"
            },
            "focused": {
              "value": "#718492"
            },
            "pressed": {
              "value": "#97a5af"
            },
            "selected": {
              "value": "#97a5af"
            }
          },
          "strong": {
            "default": {
              "value": "#718492",
              "comment": "Bold border, creates a striking visual division between elements. Use for notifications, inline messages and focus ring."
            },
            "hovered": {
              "value": "#97a5af"
            },
            "focused": {
              "value": "#97a5af"
            },
            "pressed": {
              "value": "#bcc4cb"
            },
            "selected": {
              "value": "#bcc4cb"
            }
          },
          "heavy": {
            "default": {
              "value": "#e2e5e9",
              "comment": "Highest level of visual differentiation. Has a strong contrast with the background, making it visually prominent and attention-grabbing. Use for important alerts."
            }
          },
          "inverse": {
            "default": {
              "value": "#15191d",
              "comment": "Allows the application of a border when used on a contrasted background. Use for inverse buttons or inverse cards."
            },
            "hovered": {
              "value": "#1f262b"
            },
            "focused": {
              "value": "#1f262b"
            },
            "pressed": {
              "value": "#2e3942"
            },
            "selected": {
              "value": "#2e3942"
            }
          }
        },
        "brand": {
          "subtle": {
            "default": {
              "value": "#0F3B5C",
              "comment": "Provides a gentle visual separation between elements, with a touch of Engie's brand identity.Suitable for elements where a subtle brand presence is desired."
            },
            "hovered": {
              "value": "#065789"
            },
            "focused": {
              "value": "#065789"
            },
            "pressed": {
              "value": "#1E73B0"
            },
            "selected": {
              "value": "#1E73B0"
            }
          },
          "moderate": {
            "default": {
              "value": "#1E73B0",
              "comment": "Provides a clear separation between elements with the brand identity. Use for tags and inputs."
            },
            "hovered": {
              "value": "#3D86C4"
            },
            "focused": {
              "value": "#3D86C4"
            },
            "pressed": {
              "value": "#76A7DB"
            },
            "selected": {
              "value": "#76A7DB"
            }
          },
          "strong": {
            "default": {
              "value": "#3D86C4",
              "comment": "Bold brand border, creates a striking visual division between elements. Use for borders or visual indicators of elements that reinforce Engie's brand, such as notifications, inline messages and focus ring."
            },
            "hovered": {
              "value": "#76A7DB"
            },
            "focused": {
              "value": "#76A7DB"
            },
            "pressed": {
              "value": "#A9C5EA"
            },
            "selected": {
              "value": "#A9C5EA"
            }
          }
        },
        "status": {
          "danger": {
            "subtle": {
              "default": {
                "value": "#63221e",
                "comment": "Subtle way to communicate critical information without overpowering the content. Use for separators and cards."
              },
              "hovered": {
                "value": "#95302c"
              },
              "focused": {
                "value": "#95302c"
              },
              "pressed": {
                "value": "#c3423c"
              },
              "selected": {
                "value": "#c3423c"
              }
            },
            "moderate": {
              "default": {
                "value": "#c3423c",
                "comment": "Communicates critical information in your interface. Provides a clear separation between elements, ensuring they stand out without becoming too overwhelming. Use for tags and inputs."
              },
              "hovered": {
                "value": "#dd534b"
              },
              "focused": {
                "value": "#dd534b"
              },
              "pressed": {
                "value": "#fa7e72"
              },
              "selected": {
                "value": "#fa7e72"
              }
            },
            "strong": {
              "default": {
                "value": "#dd534b",
                "comment": "Intended to indicate a state of danger or criticality in your interface. Use for elements that require immediate attention due to errors, warnings, or potentially harmful actions. Serves as a powerful visual cue to alert users to potential issues and encourages careful consideration of their actions."
              },
              "hovered": {
                "value": "#fa7e72"