Color system and initial color schema.

src/App.scss

@@ -1,10 +1,16 @@
-@import '~antd/dist/antd.css';
+@import 'antd/dist/antd.variable.min.css';
+@import './colors.scss';
 
 .App {
   text-align: center;
+  background-color: $secondary;
 }
 
 .App .App-content {
   display: flex;
   justify-content: center;
 }
+
+article {
+  margin: 2em;
+}

src/App.tsx

@@ -6,11 +6,21 @@ import { Main } from './pages/Main';
 import { Registration } from './pages/Registration';
 import { IntlProvider } from 'react-intl';
 import { localization } from './constants/localization';
+import { Header } from './components/Header';
+import { ConfigProvider } from 'antd';
 
 export default function App() {
   const language = useRecoilValue(currentLanguage)
+
+  ConfigProvider.config({
+    theme: {
+      primaryColor: '#21b635',
+    }
+  });
+
   return (
     <IntlProvider locale={language} messages={localization[language]}>
+      <Header />
       <Router>
         <Switch>
           <Route exact path="/:page">

src/colors.scss

@@ -0,0 +1,2 @@
+$primary: #21b635;
+$secondary: #98cc9f;

src/components/styles/header.scss

@@ -1,5 +1,7 @@
+@import '../../colors.scss';
+
 .App-header {
-  background-color: #282c34;
+  background-color: $primary;
   display: flex;
   flex-direction: column;
   align-items: center;

src/index.scss

@@ -1,3 +1,5 @@
+@import './colors.scss';
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,6 +7,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: $secondary !important;
 }
 
 code {

src/index.tsx

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom';
 import { RecoilRoot } from 'recoil';
 import './index.scss';
 import App from './App';
+import { ConfigProvider } from 'antd';
 
 ReactDOM.render(
   <React.StrictMode>
     <RecoilRoot>
-      <App />
+      <ConfigProvider>
+        <App />
+      </ConfigProvider>
     </RecoilRoot>
   </React.StrictMode>,
   document.getElementById('root')