diff --git a/src/css/charts.scss b/src/css/charts.scss
index 3018106..001df90 100644
--- a/src/css/charts.scss
+++ b/src/css/charts.scss
@@ -1,3 +1,6 @@
+$label-color: #313B44;
+$axis-line-color:  #E2E6E9;
+
 .chart-container {
 	position: relative; /* for absolutely positioned tooltip */
 
@@ -7,10 +10,10 @@
 		'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 
 	.axis, .chart-label {
-		fill: #555b51;
+		fill: $label-color;
 
 		line {
-			stroke: #dadada;
+			stroke: $axis-line-color;
 		}
 	}
 	.dataset-units {
@@ -98,6 +101,7 @@
 		text-align: left;
 		padding: 0px;
 		pointer-events: none;
+		
 		.title {
 			display: block;
 			padding: 16px;
diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js
index 8466a27..f9ef021 100644
--- a/src/js/utils/draw.js
+++ b/src/js/utils/draw.js
@@ -7,8 +7,8 @@ export const AXIS_TICK_LENGTH = 6;
 const LABEL_MARGIN = 4;
 const LABEL_MAX_CHARS = 15;
 export const FONT_SIZE = 10;
-const BASE_LINE_COLOR = '#dadada';
-const FONT_FILL = '#555b51';
+const BASE_LINE_COLOR = '#E2E6E9';
+const FONT_FILL = '#313B44';
 
 function $(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;