@engie-group/fluid-design-tokens
Version:
Fluid Design Tokens
1,090 lines • 765 kB
JavaScript
const Tokens = {
"semantic": {
"color": {
"background": {
"neutral": {
"primary": {
"default": {
"value": "#ffffff",
"comment": "Sets the background color to white, provides a clean and minimalist canvas for the interface. Classic foundation for content and components."
},
"hovered": {
"value": "#ebeef1"
},
"focused": {
"value": "#ebeef1"
},
"pressed": {
"value": "#ccd4da"
},
"selected": {
"value": "#E9F0FB"
},
"translucent": {
"default": {
"value": "rgba(0, 0, 0, 0)"
},
"hovered": {
"value": "rgba(5, 43, 80, 0.08)"
},
"focused": {
"value": "rgba(5, 43, 80, 0.08)"
},
"pressed": {
"value": "rgba(0, 40, 70, 0.2)"
},
"selected": {
"value": "rgba(38, 104, 207, 0.1)"
}
}
},
"secondary": {
"default": {
"value": "#f6f8f9",
"comment": "Provides a subtle contrast with the primary background. Use to add a touch of visual interest without overpowering the content."
},
"hovered": {
"value": "#ebeef1"
},
"focused": {
"value": "#ebeef1"
},
"pressed": {
"value": "#ccd4da"
},
"translucent": {
"default": {
"value": "rgba(30, 80, 105, 0.04)"
},
"hovered": {
"value": "rgba(5, 43, 80, 0.08)"
},
"focused": {
"value": "rgba(5, 43, 80, 0.08)"
},
"pressed": {
"value": "rgba(0, 40, 70, 0.2)"
}
}
},
"tertiary": {
"default": {
"value": "#ebeef1",
"comment": "Provides a slightly stronger contrast with the primary background. Use to enhances the visual separation between different sections or elements."
},
"hovered": {
"value": "#ccd4da"
},
"focused": {
"value": "#ccd4da"
},
"pressed": {
"value": "#9eadb8"
},
"translucent": {
"default": {
"value": "rgba(5, 43, 80, 0.08)"
},
"hovered": {
"value": "rgba(0, 40, 70, 0.2)"
},
"focused": {
"value": "rgba(0, 40, 70, 0.2)"
},
"pressed": {
"value": "rgba(6, 45, 73, 0.39)"
}
}
},
"solid": {
"default": {
"value": "#60798b",
"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": "#435c6e"
},
"focused": {
"value": "#435c6e"
},
"pressed": {
"value": "#334551"
}
},
"inverse": {
"default": {
"value": "#ffffff",
"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": "#ebeef1"
},
"focused": {
"value": "#ebeef1"
},
"pressed": {
"value": "#ccd4da"
},
"translucent": {
"default": {
"value": "rgba(0, 0, 0, 0)"
},
"hovered": {
"value": "rgba(0, 40, 70, 0.2)"
},
"focused": {
"value": "rgba(0, 40, 70, 0.2)"
},
"pressed": {
"value": "rgba(6, 45, 73, 0.39)"
}
}
},
"spotlight": {
"default": {
"value": "#232d35",
"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(38, 104, 207, 0.1)"
},
"focused": {
"value": "rgba(38, 104, 207, 0.1)"
},
"pressed": {
"value": "rgba(43, 113, 222, 0.3)"
}
}
},
"secondary": {
"default": {
"value": "#F5F8FD",
"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": "#E9F0FB"
},
"focused": {
"value": "#E9F0FB"
},
"pressed": {
"value": "#BFD4F5"
},
"translucent": {
"default": {
"value": "rgba(34, 85, 170, 0.04)"
},
"hovered": {
"value": "rgba(38, 104, 207, 0.1)"
},
"focused": {
"value": "rgba(38, 104, 207, 0.1)"
},
"pressed": {
"value": "rgba(43, 113, 222, 0.3)"
}
}
},
"tertiary": {
"default": {
"value": "#E9F0FB",
"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": "#BFD4F5"
},
"focused": {
"value": "#BFD4F5"
},
"pressed": {
"value": "#7EAEE9"
},
"translucent": {
"default": {
"value": "rgba(38, 104, 207, 0.1)"
},
"hovered": {
"value": "rgba(43, 113, 222, 0.3)"
},
"focused": {
"value": "rgba(43, 113, 222, 0.3)"
},
"pressed": {
"value": "rgba(36, 116, 213, 0.58)"
}
}
},
"solid": {
"default": {
"value": "#007BC5",
"comment": "Use to add a robust and substantial brand presence, making the elements stand out using the brand color."
},
"hovered": {
"value": "#005C9A"
},
"focused": {
"value": "#005C9A"
},
"pressed": {
"value": "#004573"
}
},
"spotlight": {
"default": {
"value": "#0A2D4B",
"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(255, 64, 19, 0.11)"
},
"focused": {
"value": "rgba(255, 64, 19, 0.11)"
},
"pressed": {
"value": "rgba(255, 48, 5, 0.28)"
},
"selected": {
"value": "rgba(255, 64, 19, 0.11)"
}
}
},
"secondary": {
"default": {
"value": "#fff7f5"
},
"hovered": {
"value": "#ffeae5"
},
"focused": {
"value": "#ffeae5"
},
"pressed": {
"value": "#ffc5b9"
}
},
"tertiary": {
"default": {
"value": "#ffeae5"
},
"hovered": {
"value": "#ffc5b9"
},
"focused": {
"value": "#ffc5b9"
},
"pressed": {
"value": "#ff8979"
},
"translucent": {
"default": {
"value": "rgba(255, 64, 19, 0.11)"
},
"hovered": {
"value": "rgba(255, 48, 5, 0.28)"
},
"focused": {
"value": "rgba(255, 48, 5, 0.28)"
},
"pressed": {
"value": "rgba(255, 32, 2, 0.53);"
}
}
},
"solid": {
"default": {
"value": "#db3735",
"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": "#aa2424"
},
"pressed": {
"value": "#7f1d1b"
},
"focused": {
"value": "#aa2424"
}
},
"spotlight": {
"default": {
"value": "#521814"
}
}
},
"success": {
"primary": {
"translucent": {
"default": {
"value": "rgba(0, 0, 0, 0)"
},
"hovered": {
"value": "rgba(13, 155, 22, 0.12)"
},
"focused": {
"value": "rgba(13, 155, 22, 0.12)"
},
"pressed": {
"value": "rgba(2, 155, 18, 0.32)"
},
"selected": {
"value": "rgba(13, 155, 22, 0.12)"
}
}
},
"secondary": {
"default": {
"value": "#f3faf4"
},
"hovered": {
"value": "#e2f3e3"
},
"focused": {
"value": "#e2f3e3"
},
"pressed": {
"value": "#aedfb3"
}
},
"tertiary": {
"default": {
"value": "#e2f3e3"
},
"hovered": {
"value": "#aedfb3"
},
"focused": {
"value": "#aedfb3"
},
"pressed": {
"value": "#63be74"
},
"translucent": {
"default": {
"value": "rgba(13, 155, 22, 0.12)"
},
"hovered": {
"value": "rgba(2, 155, 18, 0.32)"
},
"focused": {
"value": "rgba(2, 155, 18, 0.32)"
},
"pressed": {
"value": "rgba(3, 150, 31, 0.62);"
}
}
},
"solid": {
"default": {
"value": "#008836",
"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": "#006725"
},
"focused": {
"value": "#006725"
},
"pressed": {
"value": "#004d1c"
}
},
"spotlight": {
"default": {
"value": "#0a3315"
}
}
},
"warning": {
"primary": {
"translucent": {
"default": {
"value": "rgba(0, 0, 0, 0)"
},
"hovered": {
"value": "rgba(255, 115, 8, 0.15)"
},
"focused": {
"value": "rgba(255, 115, 8, 0.15)"
},
"pressed": {
"value": "rgba(255, 114, 4, 0.39)"
},
"selected": {
"value": "rgba(255, 115, 8, 0.15)"
}
}
},
"secondary": {
"default": {
"value": "#fff5ed"
},
"hovered": {
"value": "#ffeada"
},
"focused": {
"value": "#ffeada"
},
"pressed": {
"value": "#ffc89d"
}
},
"tertiary": {
"default": {
"value": "#ffeada"
},
"hovered": {
"value": "#ffc89d"
},
"focused": {
"value": "#ffc89d"
},
"pressed": {
"value": "#ff8c47"
},
"translucent": {
"default": {
"value": "rgba(255, 115, 8, 0.15)"
},
"hovered": {
"value": "rgba(255, 114, 4, 0.39)"
},
"focused": {
"value": "rgba(255, 114, 4, 0.39)"
},
"pressed": {
"value": "rgba(255, 97, 3, 0.73);"
}
}
},
"solid": {
"default": {
"value": "#ff8c47",
"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": "#d96929"
},
"focused": {
"value": "#d96929"
},
"pressed": {
"value": "#bc5921"
}
},
"spotlight": {
"default": {
"value": "#442312"
}
}
},
"discovery": {
"primary": {
"translucent": {
"default": {
"value": "rgba(0, 0, 0, 0)"
},
"hovered": {
"value": "rgba(93, 18, 155, 0.08)"
},
"focused": {
"value": "rgba(93, 18, 155, 0.08)"
},
"pressed": {
"value": "rgba(90, 0, 160, 0.20)"
},
"selected": {
"value": "rgba(93, 18, 155, 0.08)"
}
}
},
"secondary": {
"default": {
"value": "#faf7fc"
},
"hovered": {
"value": "#f2ecf7"
},
"focused": {
"value": "#f2ecf7"
},
"pressed": {
"value": "#deccec"
}
},
"tertiary": {
"default": {
"value": "#f2ecf7"
},
"hovered": {
"value": "#deccec"
},
"focused": {
"value": "#deccec"
},
"pressed": {
"value": "#bf9ed9"
},
"translucent": {
"default": {
"value": "rgba(93, 18, 155, 0.08)"
},
"hovered": {
"value": "rgba(90, 0, 160, 0.20)"
},
"focused": {
"value": "rgba(90, 0, 160, 0.20)"
},
"pressed": {
"value": "rgba(91, 6, 158, 0.39);"
}
}
},
"solid": {
"default": {
"value": "#9261b7",
"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": "#744299"
},
"focused": {
"value": "#744299"
},
"pressed": {
"value": "#533669"
}
},
"spotlight": {
"default": {
"value": "#312838"
}
}
},
"information": {
"primary": {
"translucent": {
"default": {
"value": "rgba(0, 0, 0, 0)"
},
"hovered": {
"value": "rgba(38, 104, 207, 0.1)"
},
"focused": {
"value": "rgba(38, 104, 207, 0.1)"
},
"pressed": {
"value": "rgba(43, 113, 222, 0.3)"
},
"selected": {
"value": "rgba(38, 104, 207, 0.1)"
}
}
},
"solid": {
"default": {
"value": "#007BC5",
"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": "#005C9A"
},
"focused": {
"value": "#005C9A"
},
"pressed": {
"value": "#004573"
}
},
"secondary": {
"default": {
"value": "#F5F8FD"
},
"hovered": {
"value": "#E9F0FB"
},
"focused": {
"value": "#E9F0FB"
},
"pressed": {
"value": "#BFD4F5"
}
},
"tertiary": {
"default": {
"value": "#E9F0FB"
},
"hovered": {
"value": "#BFD4F5"
},
"focused": {
"value": "#BFD4F5"
},
"pressed": {
"value": "#7EAEE9"
},
"translucent": {
"default": {
"value": "rgba(38, 104, 207, 0.1)"
},
"hovered": {
"value": "rgba(43, 113, 222, 0.3)"
},
"focused": {
"value": "rgba(43, 113, 222, 0.3)"
},
"pressed": {
"value": "rgba(36, 116, 213, 0.58)"
}
}
},
"spotlight": {
"default": {
"value": "#0A2D4B"
}
}
},
"planet": {
"primary": {
"translucent": {
"default": {
"value": "rgba(0, 0, 0, 0)"
},
"hovered": {
"value": "rgba(8, 182, 175, 0.15)"
},
"focused": {
"value": "rgba(8, 182, 175, 0.15)"
},
"pressed": {
"value": "rgba(3, 179, 174, 0.42)"
},
"selected": {
"value": "rgba(8, 182, 175, 0.15)"
}
}
},
"solid": {
"default": {
"value": "#008480"
},
"hovered": {
"value": "#0a6361"
},
"pressed": {
"value": "#154948"
},
"focused": {
"value": "#0a6361"
}
},
"secondary": {
"default": {
"value": "#f1fafa"
},
"hovered": {
"value": "#daf4f3"
},
"focused": {
"value": "#daf4f3"
},
"pressed": {
"value": "#95dfdd"
}
},
"tertiary": {
"default": {
"value": "#daf4f3"
},
"hovered": {
"value": "#95dfdd"
},
"focused": {
"value": "#95dfdd"
},
"pressed": {
"value": "#3dbcb8"
},
"translucent": {
"default": {
"value": "rgba(8, 182, 175, 0.15)"
},
"hovered": {
"value": "rgba(3, 179, 174, 0.42)"
},
"focused": {
"value": "rgba(3, 179, 174, 0.42)"
},
"pressed": {
"value": "rgba(3, 168, 163, 0.77);"
}
}
},
"spotlight": {
"default": {
"value": "#192f2f"
}
}
}
},
"accent": {
"pink": {
"secondary": {
"default": {
"value": "#fff4f9",
"comment": "Subtle touch of pink with no meaning tied to the color."
},
"hovered": {
"value": "#ffe9f3"
},
"focused": {
"value": "#ffe9f3"
},
"pressed": {
"value": "#ffc1df"
}
},
"tertiary": {
"default": {
"value": "#ffe9f3",
"comment": "Soft pink background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
},
"hovered": {
"value": "#ffc1df"
},
"focused": {
"value": "#ffc1df"
},
"pressed": {
"value": "#ff80bd"
}
},
"solid": {
"default": {
"value": "#e01b78",
"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": "#963563"
},
"focused": {
"value": "#963563"
},
"pressed": {
"value": "#5c3749"
}
},
"spotlight": {
"default": {
"value": "#34282e",
"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": "#fff7f5",
"comment": "Subtle touch of red with no meaning tied to the color."
},
"hovered": {
"value": "#ffeae5"
},
"focused": {
"value": "#ffeae5"
},
"pressed": {
"value": "#ffc5b9"
}
},
"tertiary": {
"default": {
"value": "#ffeae5",
"comment": "Soft red background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
},
"hovered": {
"value": "#ffc5b9"
},
"focused": {
"value": "#ffc5b9"
},
"pressed": {
"value": "#ff8979"
}
},
"solid": {
"default": {
"value": "#db3735",
"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": "#521814",
"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": "#fff5ed",
"comment": "Subtle touch of orange with no meaning tied to the color."
},
"hovered": {
"value": "#ffeada"
},
"focused": {
"value": "#ffeada"
},
"pressed": {
"value": "#ffc89d"
}
},
"tertiary": {
"default": {
"value": "#ffeada",
"comment": "Soft orange background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
},
"hovered": {
"value": "#ffc89d"
},
"focused": {
"value": "#ffc89d"
},
"pressed": {
"value": "#ff8c47"
}
},
"solid": {
"default": {
"value": "#bc5921",
"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": "#8e441a"
},
"focused": {
"value": "#8e441a"
},
"pressed": {
"value": "#693315"
}
},
"spotlight": {
"default": {
"value": "#442312",
"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": "#fff7e0",
"comment": "Subtle touch of yellow with no meaning tied to the color."
},
"hovered": {
"value": "#ffeeb4"
},
"focused": {
"value": "#ffeeb4"
},
"pressed": {
"value": "#ffcc59"
}
},
"tertiary": {
"default": {
"value": "#ffeeb4",
"comment": "Soft yellow background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
},
"hovered": {
"value": "#ffcc59"
},
"focused": {
"value": "#ffcc59"
},
"pressed": {
"value": "#d5a334"
}
},
"solid": {
"default": {
"value": "#ffcc59",
"comment": "Suitable for yellow backgrounds when there is no meaning tied to the color. No minimum contrast requirement met!"
},
"hovered": {
"value": "#d5a334"
},
"focused": {
"value": "#d5a334"
},
"pressed": {
"value": "#ab8327"
}
},
"spotlight": {
"default": {
"value": "#362a13",
"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": "#f3faf4",
"comment": "Subtle touch of green with no meaning tied to the color."
},
"hovered": {
"value": "#e2f3e3"
},
"focused": {
"value": "#e2f3e3"
},
"pressed": {
"value": "#aedfb3"
}
},
"tertiary": {
"default": {
"value": "#e2f3e3",
"comment": "Soft green background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
},
"hovered": {
"value": "#aedfb3"
},
"focused": {
"value": "#aedfb3"
},
"pressed": {
"value": "#63be74"
}
},
"solid": {
"default": {
"value": "#008836",
"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": "#006725"
},
"focused": {
"value": "#006725"
},
"pressed": {
"value": "#004d1c"
}
},
"spotlight": {
"default": {
"value": "#0a3315",
"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": "#f6f8f9",
"comment": "Subtle touch of grey with no meaning tied to the color."
},
"hovered": {
"value": "#ebeef1"
},
"focused": {
"value": "#ebeef1"
},
"pressed": {
"value": "#ccd4da"
}
},
"tertiary": {
"default": {
"value": "#ebeef1",
"comment": "Soft grey background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
},
"hovered": {
"value": "#ccd4da"
},
"focused": {
"value": "#ccd4da"
},
"pressed": {
"value": "#9eadb8"
}
},
"solid": {
"default": {
"value": "#60798b",
"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": "#435c6e"
},
"focused": {
"value": "#435c6e"
},
"pressed": {
"value": "#334551"
}
},
"spotlight": {
"default": {
"value": "#232d35",
"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": "#F5F8FD",
"comment": "Subtle touch of blue with no meaning tied to the color."
},
"hovered": {
"value": "#E9F0FB"
},
"focused": {
"value": "#E9F0FB"
},
"pressed": {
"value": "#BFD4F5"
}
},
"tertiary": {
"default": {
"value": "#E9F0FB",
"comment": "Soft blue background with no meaning tied to the color, slightly stronger visual contrast than the secondary."
},
"hovered": {
"value": "#BFD4F5"
},
"focused": {
"value": "#BFD4F5"
},
"pressed": {
"value": "#7EAEE9"
}
},
"solid": {
"default": {
"value": "#007BC5",
"comment": "Suitable for blue backgrounds