diff --git a/scripts/renderers/calcPercentages.test.ts b/scripts/renderers/calcPercentages.test.ts
index e782fd7..e119b3e 100644
--- a/scripts/renderers/calcPercentages.test.ts
+++ b/scripts/renderers/calcPercentages.test.ts
@@ -1,5 +1,4 @@
-import { calcPercentages as calcPercentagesPie } from './renderLangPie';
-import { calcPercentages as calcPercentagesBar } from './renderLangPercent';
+import { calcPercentagesPie, calcPercentagesBar } from './calcPercentages';
 import { LanguageData } from '../../types';
 
 const mockLanguages: LanguageData[] = [
diff --git a/scripts/renderers/calcPercentages.ts b/scripts/renderers/calcPercentages.ts
new file mode 100644
index 0000000..22ee06d
--- /dev/null
+++ b/scripts/renderers/calcPercentages.ts
@@ -0,0 +1,47 @@
+import { LanguageData } from "../../types";
+import { LanguageDataWithAccum } from "./types";
+
+export const calcPercentagesPie = (languages: LanguageData[]): LanguageDataWithAccum[] => {
+	// Deep copy of an array of objects
+	const langStats: LanguageDataWithAccum[] = JSON.parse(JSON.stringify(languages))
+		.slice(0, 5);
+
+	const totalCount = langStats
+		.reduce((accumulator: number, language: LanguageDataWithAccum) => {
+			return accumulator + language.count;
+		}, 0);
+
+	for (let i = 0; i < langStats.length - 1; i++) {
+		langStats[i].count = Math.round((100 * langStats[i].count) / totalCount);
+	}
+	const sumOfOthers = langStats.slice(0, -1).reduce((acc: number, lang: LanguageDataWithAccum) => acc + lang.count, 0);
+	langStats[langStats.length - 1].count = 100 - sumOfOthers;
+
+	langStats
+		.sort((a: LanguageDataWithAccum, b: LanguageDataWithAccum) => {
+			return a.count - b.count;
+		})
+		.reduce((accumulator: number, language: LanguageDataWithAccum) => {
+			language.accum = accumulator;
+			return accumulator + language.count
+		}, 0);
+
+	return langStats;
+}
+
+export const calcPercentagesBar = (languages: LanguageData[]): LanguageData[] => {
+	// Deep copy of an array of objects
+	const langStats: LanguageData[] = JSON.parse(JSON.stringify(languages))
+		.slice(0, 5);
+
+	const totalCount = langStats
+		.reduce((accumulator: number, language: LanguageData) => {
+			return accumulator + language.count;
+		}, 0);
+
+	for (let i = 0; i < langStats.length; i++) {
+		langStats[i].count = Math.round((100 * langStats[i].count) / totalCount);
+	}
+
+	return langStats;
+}
diff --git a/scripts/renderers/renderLangPercent.ts b/scripts/renderers/renderLangPercent.ts
index fce0a44..b470331 100644
--- a/scripts/renderers/renderLangPercent.ts
+++ b/scripts/renderers/renderLangPercent.ts
@@ -1,47 +1,15 @@
 import * as svgs from "../utils/svgs";
-import { CARD_WIDTH, CARD_HEIGHT, LANG_ITEM_COUNT, DIVIDER_Y } from "../utils/constants";
+import { CARD_WIDTH, CARD_HEIGHT, LANG_ITEM_COUNT, DIVIDER_Y, COLOR_SUBTLE, COLOR_LIGHT, COLOR_DARK } from "../utils/constants";
 import { LanguageData, UserLanguageStats } from "../../types";
-
-interface TextAttr {
-	weight: number;
-	index: number;
-	color: string;
-	fontSize: number;
-	dir: string;
-	title: boolean;
-}
-
-interface CardAttr {
-	width: number;
-	height: number;
-	background: string;
-	style: string;
-	children: string[];
-}
-
-const calcPercentages = (languages: LanguageData[]): LanguageData[] => {
-	// Deep copy of an array of objects
-	const langStats: LanguageData[] = JSON.parse(JSON.stringify(languages))
-		.slice(0, 5);
-
-	const totalCount = langStats
-		.reduce((accumulator: number, language: LanguageData) => {
-			return accumulator + language.count;
-		}, 0);
-
-	for (let i = 0; i < langStats.length; i++) {
-		langStats[i].count = Math.round((100 * langStats[i].count) / totalCount);
-	}
-
-	return langStats;
-}
+import { TextAttr, CardAttr } from "./types";
+import { calcPercentagesBar as calcPercentages } from "./calcPercentages";
 
 const renderLanguageCard = (userData: UserLanguageStats, color: string): string => {
-	let lightFontColor = "#A4A5A6";
-	let normalFontColor = "#FFFFFF";
+	let lightFontColor = COLOR_SUBTLE;
+	let normalFontColor = COLOR_LIGHT;
 	if (color === "white") {
-		lightFontColor = "#161B22";
-		normalFontColor = "#161B22";
+		lightFontColor = COLOR_DARK;
+		normalFontColor = COLOR_DARK;
 	}
 
 	const createText = (text: string, textAttr: TextAttr): string => {
@@ -81,7 +49,7 @@ const renderLanguageCard = (userData: UserLanguageStats, color: string): string
 	const cardAttr: CardAttr = {
 		width: CARD_WIDTH,
 		height: CARD_HEIGHT,
-		background: `${ (color === "white") ? "white" : "#161B22"}`,
+		background: `${ (color === "white") ? "white" : COLOR_DARK}`,
 		style: "border-radius: 10px;",
 		children: languageStats.reduce((acc: string[], item) => [...acc, item.name], ["Most used languages"])
 	}
@@ -128,4 +96,5 @@ const renderLanguageCard = (userData: UserLanguageStats, color: string): string
 	</svg>`;
 }
 
-export { renderLanguageCard, calcPercentages };
+export { renderLanguageCard };
+export { calcPercentagesBar as calcPercentages } from "./calcPercentages";
diff --git a/scripts/renderers/renderLangPie.ts b/scripts/renderers/renderLangPie.ts
index 09dd72b..e2918c4 100644
--- a/scripts/renderers/renderLangPie.ts
+++ b/scripts/renderers/renderLangPie.ts
@@ -1,63 +1,15 @@
 import * as svgs from "../utils/svgs";
-import { CARD_WIDTH, CARD_HEIGHT, LANG_ITEM_COUNT, DIVIDER_Y } from "../utils/constants";
-import { LanguageData, UserLanguageStats } from "../../types";
-
-/** Extended LanguageData with an accumulated percentage offset used for pie chart arc drawing. */
-interface LanguageDataWithAccum extends LanguageData {
-	accum: number;
-}
-
-interface TextAttr {
-	weight: number;
-	index: number;
-	color: string;
-	fontSize: number;
-	dir: string;
-	title: boolean;
-}
-
-interface CardAttr {
-	width: number;
-	height: number;
-	background: string;
-	style: string;
-	children: string[];
-}
-
-const calcPercentages = (languages: LanguageData[]): LanguageDataWithAccum[] => {
-	// Deep copy of an array of objects
-	const langStats: LanguageDataWithAccum[] = JSON.parse(JSON.stringify(languages))
-		.slice(0, 5);
-
-	const totalCount = langStats
-		.reduce((accumulator: number, language: LanguageDataWithAccum) => {
-			return accumulator + language.count;
-		}, 0);
-
-	for (let i = 0; i < langStats.length - 1; i++) {
-		langStats[i].count = Math.round((100 * langStats[i].count) / totalCount);
-	}
-	const sumOfOthers = langStats.slice(0, -1).reduce((acc: number, lang: LanguageDataWithAccum) => acc + lang.count, 0);
-	langStats[langStats.length - 1].count = 100 - sumOfOthers;
-
-	langStats
-		.sort((a: LanguageDataWithAccum, b: LanguageDataWithAccum) => {
-			return a.count - b.count;
-		})
-		.reduce((accumulator: number, language: LanguageDataWithAccum) => {
-			language.accum = accumulator;
-			return accumulator + language.count
-		}, 0);
-
-	return langStats;
-}
+import { CARD_WIDTH, CARD_HEIGHT, LANG_ITEM_COUNT, DIVIDER_Y, COLOR_SUBTLE, COLOR_LIGHT, COLOR_DARK } from "../utils/constants";
+import { UserLanguageStats } from "../../types";
+import { TextAttr, CardAttr, LanguageDataWithAccum } from "./types";
+import { calcPercentagesPie as calcPercentages } from "./calcPercentages";
 
 const renderLanguageCard = (userData: UserLanguageStats, color: string): string => {
-	let lightFontColor = "#A4A5A6";
-	let normalFontColor = "#FFFFFF";
+	let lightFontColor = COLOR_SUBTLE;
+	let normalFontColor = COLOR_LIGHT;
 	if (color === "white") {
-		lightFontColor = "#161B22";
-		normalFontColor = "#161B22";
+		lightFontColor = COLOR_DARK;
+		normalFontColor = COLOR_DARK;
 	}
 
 	const createText = (text: string, textAttr: TextAttr): string => {
@@ -108,7 +60,7 @@ const renderLanguageCard = (userData: UserLanguageStats, color: string): string
 	const cardAttr: CardAttr = {
 		width: CARD_WIDTH,
 		height: CARD_HEIGHT,
-		background: `${ (color === "white") ? "white" : "#161B22"}`,
+		background: `${ (color === "white") ? "white" : COLOR_DARK}`,
 		style: "border-radius: 10px;",
 		children: languageStatsDesc.reduce((acc: string[], item) => [...acc, item.name], ["Most used languages"])
 	}
@@ -159,4 +111,5 @@ const renderLanguageCard = (userData: UserLanguageStats, color: string): string
 
 }
 
-export { renderLanguageCard, calcPercentages };
+export { renderLanguageCard };
+export { calcPercentagesPie as calcPercentages } from "./calcPercentages";
diff --git a/scripts/renderers/renderStatCard.ts b/scripts/renderers/renderStatCard.ts
index d6c8f1b..6643f71 100644
--- a/scripts/renderers/renderStatCard.ts
+++ b/scripts/renderers/renderStatCard.ts
@@ -1,32 +1,16 @@
 import * as svgs from "../utils/svgs";
-import { CARD_WIDTH, CARD_HEIGHT, DIVIDER_Y } from "../utils/constants";
+import { CARD_WIDTH, CARD_HEIGHT, DIVIDER_Y, COLOR_SUBTLE, COLOR_LIGHT, COLOR_DARK } from "../utils/constants";
 import { UserStats } from "../../types";
-
-interface TextAttr {
-	weight: number;
-	index: number;
-	color: string;
-	fontSize: number;
-	dir: string;
-	title: boolean;
-}
-
-interface CardAttr {
-	width: number;
-	height: number;
-	background: string;
-	style: string;
-	children: string[];
-}
+import { TextAttr, CardAttr } from "./types";
 
 const renderStatCard = (userData: UserStats, color: string, peng: boolean): string => {
-	let lightFontColor = "#A4A5A6";
-	let normalFontColor = "#FFFFFF";
+	let lightFontColor = COLOR_SUBTLE;
+	let normalFontColor = COLOR_LIGHT;
 	const icons = [...svgs.icons];
 
 	if (color === "white") {
-		lightFontColor = "#161B22";
-		normalFontColor = "#161B22";
+		lightFontColor = COLOR_DARK;
+		normalFontColor = COLOR_DARK;
 	}
 
 	const createText = (text: string, textAttr: TextAttr): string => {
@@ -65,7 +49,7 @@ const renderStatCard = (userData: UserStats, color: string, peng: boolean): stri
 	const cardAttr: CardAttr = {
 		width: CARD_WIDTH,
 		height: CARD_HEIGHT,
-		background: `${ (color === "white") ? "white" : "#161B22"}`,
+		background: `${ (color === "white") ? "white" : COLOR_DARK}`,
 		style: "border-radius: 10px;",
 		children: [
 			`@${ userData.user }'s GitHub`,
diff --git a/scripts/renderers/types.ts b/scripts/renderers/types.ts
new file mode 100644
index 0000000..69a2518
--- /dev/null
+++ b/scripts/renderers/types.ts
@@ -0,0 +1,23 @@
+import { LanguageData } from "../../types";
+
+/** Extended LanguageData with an accumulated percentage offset used for pie chart arc drawing. */
+export interface LanguageDataWithAccum extends LanguageData {
+	accum: number;
+}
+
+export interface TextAttr {
+	weight: number;
+	index: number;
+	color: string;
+	fontSize: number;
+	dir: string;
+	title: boolean;
+}
+
+export interface CardAttr {
+	width: number;
+	height: number;
+	background: string;
+	style: string;
+	children: string[];
+}
diff --git a/scripts/utils/constants.ts b/scripts/utils/constants.ts
index 8125008..9bea887 100644
--- a/scripts/utils/constants.ts
+++ b/scripts/utils/constants.ts
@@ -4,3 +4,6 @@ export const CACHE_DURATION_SECONDS: number = 72000;
 export const LANG_ITEM_COUNT: number = 6;
 export const DIVIDER_Y: number = 44;
 export const ERROR_DIVIDER_Y: number = 84;
+export const COLOR_SUBTLE: string = "#A4A5A6";
+export const COLOR_LIGHT: string = "#FFFFFF";
+export const COLOR_DARK: string = "#161B22";