src/components/Container/style.module.scss

@@ -1,6 +1,8 @@
+@import '../../styles/sizes.scss';
+
 .container {
   width: 100%;
   max-width: 1400px;
-  padding-inline: 10px;
+  padding-inline: $default-container-padding-inline;
   margin-inline: auto;
 }

src/components/Landing/CardComponent/CardComponent.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@mui/material'
 import { ReactElement } from 'react'
 
 import styles from './style.module.scss'
@@ -23,9 +22,7 @@ export const CardComponent = ({
         {title}
       </h3>
       <p className={styles.description}>{description}</p>
-      <Box mt={'auto'} textAlign={'right'}>
+      {actions ? <div className={styles.actions}>{actions}</div> : null}
-        {actions}
-      </Box>
     </div>
   )
 }

src/components/Landing/CardComponent/style.module.scss

@@ -28,6 +28,11 @@
       text-decoration: underline;
     }
   }
+  button {
+    transition:
+      color 0s,
+      background-color 0.2s;
+  }
 }
 
 a {
@@ -37,6 +42,10 @@ a {
 .icon {
   color: $primary-main;
   font-size: 25px;
+  line-height: 1;
+
+  height: 25px;
+  width: 25px;
 }
 
 .title {
@@ -53,3 +62,8 @@ a {
   font-size: 14px;
   font-weight: 500;
 }
+
+.actions {
+  margin-top: auto;
+  text-align: right;
+}

src/layouts/style.module.scss

@@ -3,7 +3,26 @@
 @import '../styles/typography.scss';
 
 :root {
-  color: $text-color;
+  // Import colors once as variables
+  --primary-main: #{$primary-main};
+  --primary-light: #{$primary-light};
+  --primary-dark: #{$primary-dark};
+
+  --secondary-main: #{$secondary-main};
+
+  --box-shadow-color: #{$box-shadow-color};
+  --border-color: #{$border-color};
+
+  --body-background-color: #{$body-background-color};
+  --overlay-background-color: #{$overlay-background-color};
+
+  --text-color: #{$text-color};
+  --input-text-color: #{$input-text-color};
+
+  --review-feedback-correct: #{$review-feedback-correct};
+  --review-feedback-incorrect: #{$review-feedback-incorrect};
+  --review-feedback-neutral: #{$review-feedback-neutral};
+  --review-feedback-selected-color: #{$review-feedback-selected-color};
 }
 
 body {

src/pages/landing/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Typography } from '@mui/material'
+import { Box, Button } from '@mui/material'
 import { useEffect } from 'react'
 import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 import { appPublicRoutes } from '../../routes'
@@ -154,30 +154,12 @@ export const LandingPage = () => {
   return (
     <Container className={styles.container}>
       <img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
-      <div>
+      <div className={styles.titleSection}>
-        <Typography
+        <h1 className={styles.title}>Secure &amp; Private Document Signing</h1>
-          variant="h1"
-          sx={{
-            letterSpacing: '1px',
-            fontWeight: 'bold',
-            fontSize: '2.5rem',
-            textAlign: 'center'
-          }}
-        >
-          Secure &amp; Private Document Signing
-        </Typography>
         <p className={styles.subTitle}>
           An open-source and self-hostable solution for secure document signing
           and verification.
         </p>
-        <Typography
-          mt={'15px'}
-          sx={{
-            fontSize: '18px',
-            lineHeight: '25px',
-            letterSpacing: '1px'
-          }}
-        ></Typography>
       </div>
       <Box
         display={'grid'}
@@ -203,7 +185,8 @@ export const LandingPage = () => {
       <Button
         sx={{
           fontSize: '22px',
-          padding: '16px 32px'
+          padding: '16px 32px',
+          backgroundColor: 'var(--secondary-main)'
         }}
         variant="contained"
         onClick={onSignInClick}

src/pages/landing/style.module.scss

@@ -1,4 +1,5 @@
 @import '../../styles/colors.scss';
+@import '../../styles/sizes.scss';
 
 .container {
   display: flex;
@@ -6,7 +7,7 @@
 
   position: relative;
   padding-block: 50px;
-  padding-inline: 50px;
+  padding-inline: 50px + $default-container-padding-inline;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -17,6 +18,16 @@
   max-width: 500px;
 }
 
+.titleSection {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
 .subTitle {
   font-size: 16px;
   font-weight: 500;

src/styles/colors.scss

@@ -2,6 +2,8 @@ $primary-main: #4c82a3;
 $primary-light: #5e8eab;
 $primary-dark: #447592;
 
+$secondary-main: #7d54a3;
+
 $box-shadow-color: rgba(0, 0, 0, 0.1);
 $border-color: #27323c;
 

src/styles/sizes.scss

@@ -1,2 +1,4 @@
 $header-height: 65px;
 $body-vertical-padding: 25px;
+
+$default-container-padding-inline: 10px;

src/theme/index.ts

@@ -34,31 +34,28 @@ export const theme = extendTheme({
     MuiButton: {
       styleOverrides: {
         root: {
-          transition: 'ease 0.4s',
-          padding: '10px 20px',
           fontSize: '14px',
-          fontWeight: 'bold',
+          fontWeight: 500,
-          boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)',
+          padding: '10px 20px',
+          transition: 'ease 0.2s',
+          boxShadow: 'unset',
           lineHeight: '1.25',
           borderRadius: '4px',
           ':hover': {
-            transform: 'scale(1.02)',
+            background: 'var(--primary-light)',
-            boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)'
+            boxShadow: 'unset'
           }
         },
         text: {
-          color: '#00000059',
+          color: 'inherit',
           background: 'transparent',
           ':hover': {
-            background: '#47cccf',
             color: 'white'
           }
         },
         contained: {
-          background: '#47cccf',
+          background: 'var(--primary-main)',
-          ':hover': {
+          color: 'white'
-            background: '#47cccf'
-          }
         },
         outlined: {
           ':hover': {