diff --git a/src/components/Asset/AssetContent/IndividualUseVisualization.tsx b/src/components/Asset/AssetContent/IndividualUseVisualization.tsx
index 9eb7e3b50a..4be22c68e1 100644
--- a/src/components/Asset/AssetContent/IndividualUseVisualization.tsx
+++ b/src/components/Asset/AssetContent/IndividualUseVisualization.tsx
@@ -33,7 +33,7 @@ const axisLeftTickLabelProps = {
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'end' as const,
- fill: '#ffffff'
+ fill: '#02346d'
}
export default function IndividualUseVisualization({
@@ -70,7 +70,7 @@ export default function IndividualUseVisualization({
return (
diff --git a/src/stylesGlobal/_variables.css b/src/stylesGlobal/_variables.css
index 3d67114cf0..8e5f73b9ef 100644
--- a/src/stylesGlobal/_variables.css
+++ b/src/stylesGlobal/_variables.css
@@ -1,9 +1,9 @@
:root {
--brand-white: #ffffff;
--brand-black: #141414;
- --brand-pink: #ff4092;
- --brand-purple: #7b1173;
- --brand-violet: #e000cf;
+ --brand-pink: #58dfff;
+ --brand-purple: #02346d;
+ --brand-violet: #3499d3;
--brand-grey-darker: #201f1f;
--brand-grey-dark: #303030;
@@ -12,14 +12,14 @@
--brand-grey-lighter: #e2e2e2;
--brand-grey-dimmed: #f7f7f7;
- --brand-gradient: linear-gradient(to right bottom, #7b1173, #ff4092);
+ --brand-gradient: linear-gradient(to right bottom, #02346d, #58dfff);
--brand-alert-green: #5fb359;
--brand-alert-red: #d80606;
--brand-alert-orange: #b35f36;
--brand-alert-yellow: #eac146;
- --color-primary: #ff4092;
+ --color-primary: #58dfff;
--color-secondary: #8b98a9;
/* Only use these vars for most color referencing for easy light/dark mode */