5 files changed, 199 insertions, 0 deletions
diff --git a/packages/website/ts/@next/constants/.gitkeep b/packages/website/ts/@next/constants/.gitkeep
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/packages/website/ts/@next/constants/.gitkeep
diff --git a/packages/website/ts/@next/constants/animations.tsx b/packages/website/ts/@next/constants/animations.tsx
new file mode 100644
index 000000000..6a58c4b40
--- /dev/null
+++ b/packages/website/ts/@next/constants/animations.tsx
@@ -0,0 +1,18 @@
+import { css, keyframes } from 'styled-components';
+
+export const fadeIn = keyframes`
+    0% {
+        transform: translateY(10px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+`;
+
+export const addFadeInAnimation = (duration: string = '0.5s', delay: string = '0s') => css`
+    opacity: 0;
+    transform: translateY(10px);
+    animation: ${fadeIn} ${duration} ${delay} forwards;
+`;
diff --git a/packages/website/ts/@next/constants/cssReset.js b/packages/website/ts/@next/constants/cssReset.js
new file mode 100644
index 000000000..4c5105b50
--- /dev/null
+++ b/packages/website/ts/@next/constants/cssReset.js
@@ -0,0 +1,50 @@
+export const cssReset = `
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article, aside, details, figcaption, figure,
+  footer, header, hgroup, menu, nav, section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol, ul {
+    list-style: none;
+  }
+  blockquote, q {
+    quotes: none;
+  }
+  blockquote:before, blockquote:after,
+  q:before, q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+`;
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
new file mode 100644
index 000000000..b095fafb5
--- /dev/null
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -0,0 +1,109 @@
+import { createGlobalStyle, withTheme } from 'styled-components';
+import { cssReset } from 'ts/@next/constants/cssReset';
+
+export interface GlobalStyle {
+    theme: {
+        bgColor: string;
+        textColor: string;
+        linkColor: string;
+        dropdownButtonBg: string;
+    };
+}
+
+const GlobalStyles = withTheme(
+    createGlobalStyle <
+        GlobalStyle >
+        `
+    ${cssReset};
+
+    html {
+        font-size: 18px;
+        background-color: ${props => props.theme.bgColor};
+        overflow-x: hidden;
+    }
+
+    @media (min-width: 768px) {
+        :root {
+            --smallHeading: 20px;
+            --defaultHeading: 28px;
+            --mediumHeading: 50px;
+            --largeHeading: 80px;
+            --smallHeadingHeight: 1.4em;
+            --defaultHeadingHeight: 1.357142857em;
+            --mediumHeadingHeight: 1.16em;
+            --largeHeadingHeight: 1em;
+            --smallParagraph: 14px;
+            --defaultParagraph: 18px;
+            --mediumParagraph: 22px;
+            --largeParagraph: 28px;
+            --smallIcon: 75px;
+            --mediumIcon: 85px;
+            --largeIcon: 145px;
+            --heroIcon: 282px;
+        }
+    }
+
+    @media (max-width: 1170px) {
+      :root {
+        --largeHeading: 60px;
+      }
+    }
+
+    @media (max-width: 768px) {
+        :root {
+            --smallHeading: 18px;
+            --defaultHeading: 18px;
+            --mediumHeading: 40px;
+            --largeHeading: 46px;
+            --smallHeadingHeight: 1.4em; // TO DO
+            --defaultHeadingHeight: 1.357142857em; // TO DO
+            --mediumHeadingHeight: 1.16em; // TO DO
+            --largeHeadingHeight: 1.108695652em; // TO DO
+            --smallParagraph: 14px; // TO DO
+            --defaultParagraph: 16px; // TO DO
+            --mediumParagraph: 20px; // TO DO
+            --largeParagraph: 20px; // TO DO
+            --smallIcon: 55px;
+            --mediumIcon: 85px;
+            --largeIcon: 115px;
+        }
+    }
+
+    body {
+        font-family: 'Formular', sans-serif !important;
+        -webkit-font-smoothing: antialiased;
+        color: ${props => props.theme.textColor};
+        font-feature-settings: "zero";
+        scroll-behavior: smooth;
+    }
+
+    .visuallyHidden {
+        position: absolute !important;
+        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+        clip: rect(1px, 1px, 1px, 1px);
+        padding:0 !important;
+        border:0 !important;
+        height: 1px !important;
+        width: 1px !important;
+        overflow: hidden;
+    }
+
+    img, svg {
+        max-width: 100%;
+        object-fit: contain;
+    }
+
+    a, button {
+        text-decoration: none;
+        font-family: inherit;
+        outline: none;
+    }
+
+    svg + p,
+    img + p {
+        padding-top: 30px;
+    }
+`,
+);
+
+export { GlobalStyles };
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx
new file mode 100644
index 000000000..ee5c5b4ce
--- /dev/null
+++ b/packages/website/ts/@next/constants/utilities.tsx
@@ -0,0 +1,22 @@
+export interface PaddingInterface {
+    padding?: number | Array<'large' | 'default' | 'small' | number>;
+    margin?: number | Array<'large' | 'default' | 'small' | number>;
+}
+
+interface PaddingSizes {
+    [key: string]: string;
+}
+
+export const PADDING_SIZES: PaddingSizes = {
+    default: '30px',
+    large: '60px',
+    small: '15px',
+};
+
+export const getCSSPadding = (value: number | Array<string | number> = 0): string => {
+    if (Array.isArray(value)) {
+        return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
+    } else {
+        return `${value}px`;
+    }
+};