global colors

src/components/styles/Global.styled.ts

@@ -9,7 +9,6 @@ export const GlobalStyles = createGlobalStyle`
 
       color-scheme: light dark;
       color: white;
-      background-color: ${({ theme }) => theme.colors['500']};
 
       font-synthesis: none;
       text-rendering: optimizeLegibility;
@@ -27,6 +26,8 @@ export const GlobalStyles = createGlobalStyle`
       position: relative;
 
       font-size: 1rem;
+      background-color: ${({ theme }) => theme.colors['bg']};
+
 
       @media screen and (max-width: ${deviceSize.md}) {
          font-size: calc(1vw + 0.6rem);

src/components/styles/Landing.styled.ts

@@ -60,7 +60,7 @@ export const StyledBrandName = styled.div`
     height: 100%;
     top: 0;
     left: 0;
-    background-color: ${({ theme }) => theme.colors['500']};
+    background-color: ${({ theme }) => theme.colors['bg']};
 
     animation: typing 0.75s steps(11) forwards;
   }
@@ -74,7 +74,7 @@ export const StyledBrandName = styled.div`
     height: 100%;
     top: 0;
     left: 0;
-    background-color: ${({ theme }) => theme.colors['500']};
+    background-color: ${({ theme }) => theme.colors['bg']};
     border-left: 10px solid ${({ theme }) => theme.colors.accent};
 
     animation: typing 0.75s steps(11) forwards, blinking 1.5s infinite;

src/theme.ts

@@ -4,7 +4,8 @@ export const theme = {
     300: '#bbc1c9',
     400: '#415a77',
     500: '#1b263b',
-    600: '#0d1b2a',
+    600: '#111',
+    bg: '#22252b',
     accent: '#ffbd00',
   },
   fonts: {