diff --git a/app/components/ArticlesDropdown/index.tsx b/app/components/ArticlesDropdown/index.tsx
index 73a86d79..6011ae0c 100644
--- a/app/components/ArticlesDropdown/index.tsx
+++ b/app/components/ArticlesDropdown/index.tsx
@@ -37,7 +37,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
     toc: TOCItem[]
     className?: string
   }) => (
-    <div className={'myClassName ' + (className || '')}>
+    <div className={(className || '')}>
       <div className="default-bold">{category}</div>
       {toc
         .filter((item) => item.category === category)
diff --git a/app/components/Nav/nav.css b/app/components/Nav/nav.css
index 41c1e85d..fa97fdb6 100644
--- a/app/components/Nav/nav.css
+++ b/app/components/Nav/nav.css
@@ -18,12 +18,12 @@
 }
 
 .top-logo {
-  padding: 0 56px 0 0;
+  padding: 0 var(--spacing-56) 0 0;
 }
 
 .top-menu {
   display: flex;
-  gap: 40px;
+  gap: var(--spacing-40);
   list-style: none;
 }
 
diff --git a/app/newRoot.css b/app/newRoot.css
index ab745d4f..fe0d3b52 100644
--- a/app/newRoot.css
+++ b/app/newRoot.css
@@ -2,7 +2,7 @@
 
 :root {
   /* colors */
-  --colors-black: #000;
+  --colors-black: #1b2b3e;
   --colors-cool-grey-900: #1b2b3e;
   --colors-cool-grey-800: #3a485a;
   --colors-cool-grey-700: #596676;
@@ -128,7 +128,7 @@ h2 {
 /* color classes */
 
 .black {
-  color: var(--text-black);
+  color: var(--colors-black, #1b2b3e);
 }
 
 .grey {