diff --git a/components/HomePage/styles.js b/components/HomePage/styles.js
index 084fab1..03bf5b2 100644
--- a/components/HomePage/styles.js
+++ b/components/HomePage/styles.js
@@ -1,7 +1,7 @@
import styled from 'styled-components';
export const Container = styled('div')`
- background: #fff;
+ background: ${({ theme }) => theme.colors.neutral[200]};
font-family: 'Poppins', sans-serif;
`;
@@ -108,7 +108,7 @@ export const LogoText = styled('p')`
`;
export const InfoCard = styled('div')`
- background-color: #04102f;
+ background-color: ${({ theme }) => theme.colors.neutral[700]};
border-radius: 1rem;
color: #fff;
margin-top: 5rem;
diff --git a/global-styles/theme.js b/global-styles/theme.js
new file mode 100644
index 0000000..9bc9699
--- /dev/null
+++ b/global-styles/theme.js
@@ -0,0 +1,55 @@
+const theme = {
+ colors: {
+ primary: {
+ 700: '#02600A',
+ 600: '#287832',
+ 500: '#329628',
+ 400: '#5BC13E',
+ 300: '#96DC8C',
+ 200: '#C8F0C8',
+ 100: '#F0FAFA',
+ },
+ secondary: {
+ 600: '#04102F',
+ 500: '#475065',
+ 400: '#8E94A4',
+ 300: '#C7CAD1',
+ 200: '#E3E5E8',
+ 100: '#F7F7F7',
+ },
+ neutral: {
+ 700: '#1F1F1F',
+ 600: '#6D6D6D',
+ 500: '#B1B1B1',
+ 400: '#DEDEDE',
+ 300: '#F3F3F3',
+ 200: '#FFFFFF',
+ },
+ status: {
+ success: {
+ 700: '#45A73D',
+ 600: '#4BC540',
+ 500: '#6FEC64',
+ 400: '#BAF4B5',
+ 300: '#E3F9E1',
+ 200: '#F7FDF6',
+ },
+ warning: {
+ 700: '#807300',
+ 600: '#B3A100',
+ 500: '#FFE500',
+ 400: '#FFF599',
+ 300: '#FFFACC',
+ },
+ error: {
+ 700: '#721111',
+ 600: '#C41E1E',
+ 500: '#F86363',
+ 400: '#F8A6A6',
+ 300: '#F9D5D5',
+ 200: '#FDF4F4',
+ },
+ },
+ },
+};
+export default theme;
diff --git a/pages/_app.js b/pages/_app.js
index f21b484..ccede53 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,7 @@
import { Fragment, useEffect } from 'react';
import Head from 'next/head';
+import { ThemeProvider } from 'styled-components';
+import theme from 'global-styles/theme';
import useHotjar from 'react-use-hotjar';
import { init as initMatomo } from '@openpolitica/matomo-next';
@@ -9,7 +11,9 @@ function Votu({ Component, pageProps }) {
Votu.pe
-
+
+
+
);
}