diff --git a/UI/components/global-colors.js b/UI/components/global-colors.js
new file mode 100644
index 0000000..8d3f5de
--- /dev/null
+++ b/UI/components/global-colors.js
@@ -0,0 +1,77 @@
+export const colors = {
+ white: '#efefef',
+ c9: '#EBD6D4',
+ c7: '#ab9b9a',
+ c5: '#756867',
+ c3: '#5d5352',
+ c1: '#453e3d',
+ dark: '#332d2d',
+ green: '#46b646',
+ red: '#e95353',
+ discord: '#7289da'
+}
+
+const getColors = () => {
+ Object.keys(colors).map(key => {
+ const nk = key.replace(/c([0-9])/, '$1')
+ return `--c-${nk}: ${colors[key]};`
+ }).join(' \n')
+}
+
+const Colors = () =>
+
+export default Colors
diff --git a/UI/pages/_app.js b/UI/pages/_app.js
new file mode 100644
index 0000000..8944c01
--- /dev/null
+++ b/UI/pages/_app.js
@@ -0,0 +1,58 @@
+import App, { Container } from 'next/app'
+import Head from 'next/head'
+import GlobalColors from '../components/global-colors'
+
+class RoleypolyApp extends App {
+ static async getInitialProps ({ Component, ctx }) {
+ let pageProps = {}
+
+ if (Component.getInitialProps) {
+ pageProps = await Component.getInitialProps(ctx)
+ }
+
+ return { pageProps }
+ }
+
+ componentDidMount () {
+ this.loadTypekit(document)
+ }
+
+ loadTypekit (d) {
+ var config = {
+ kitId: 'bck0pci',
+ scriptTimeout: 3000,
+ async: true
+ }
+ const h = d.documentElement
+ const t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive' }, config.scriptTimeout)
+ const tk = d.createElement('script')
+ const s = d.getElementsByTagName('script')[0]
+ let f = false
+ let a
+ h.className += ' wf-loading'
+ tk.src = 'https://use.typekit.net/' + config.kitId + '.js'
+ tk.async = true
+ tk.onload = tk.onreadystatechange = function () {
+ a = this.readyState
+ if (f || (a && a !== 'complete' && a !== 'loaded')) return
+ f = true
+ clearTimeout(t)
+ try { window.Typekit.load(config) } catch (e) {}
+ }
+ s.parentNode.insertBefore(tk, s)
+ }
+
+ render () {
+ const { Component, pageProps, router } = this.props
+
+ return (
+