src/components/section/Breadcrumb.module.scss

@@ -1,3 +1,5 @@
+@import "../../styles/utils/variables.scss";
+
 .breadcrumb {
   padding: 30px 100px 0 100px;
   display: flex;
@@ -27,7 +29,7 @@
     font-weight: 400;
     line-height: 14px;
     text-transform: uppercase;
-    color: #c4c4c4;
+    color: $primary-600;
 
     @media (min-width: 2500px) {
       font-size: 24px;

src/components/section/ContentAbout.module.scss

@@ -1,3 +1,5 @@
+@import "../../styles/utils/variables.scss";
+
 .contentAbout {
   h2 {
     margin: 12px 0;
@@ -20,7 +22,7 @@
     font-size: 14.2px;
     font-weight: 400;
     line-height: 15px;
-    color: #7d7d7d;
+    color: $primary-300;
 
     &:nth-child(3) {
       margin: 20px 0;

src/components/section/NavInstitucional.module.scss

@@ -1,5 +1,7 @@
-.NavInstitucional {
-  border-right: 1px solid #000;
+@import "../../styles/utils/variables.scss";
+
+.navInstitucional {
+  border-right: 1px solid $black;
   margin-right: 30px;
 
   @media (max-width: 1024px) {
@@ -28,7 +30,7 @@
         font-size: 16px;
         font-weight: 400;
         line-height: 19px;
-        color: #7d7d7d;
+        color: $primary-300;
         text-decoration: none;
 
         @media (min-width: 2500px) {
@@ -39,10 +41,10 @@
     }
 
     .active {
-      background-color: #000;
+      background-color: $black;
 
       a {
-        color: #fff;
+        color: $white;
         font-weight: 700;
 
         @media (min-width: 2500px) {

src/components/section/NavInstitucional.tsx

@@ -6,7 +6,7 @@ import styleNavInstitucional from "./NavInstitucional.module.scss";
 
 const NavInstitucional = () => {
   return (
-    <nav className={styleNavInstitucional["NavInstitucional"]}>
+    <nav className={styleNavInstitucional["navInstitucional"]}>
       <ul>
         <li className={styleNavInstitucional["active"]} >
           <a href="sobre">Sobre</a>

src/styles/utils/variables.scss

@@ -4,8 +4,8 @@ $primary-900: #ff0000;
 $primary-800: #f9f9f9;
 $primary-700: #f2f2f2;
 $primary-600: #c4c4c4;
-$primary-500: #c6c6c6;
+$primary-500: #c6c6c6; 
 $primary-400: #919191;
-$primary-300: #5e5e5e;
-$primary-200: #303030;
-$primary-100: #5200ff;
+$primary-300: #7d7d7d;
+$primary-200: #5e5e5e;
+$primary-100: #303030;