diff --git a/src/components/Challenge/challengeCard.scss b/src/components/Challenge/challengeCard.scss
index 1b48f50c56f0fd48bbac45b221ec413ddcaedd91..9cac755c11a77f978a6ff1e683272b0a84e5b8f5 100644
--- a/src/components/Challenge/challengeCard.scss
+++ b/src/components/Challenge/challengeCard.scss
@@ -1,5 +1,3 @@
-@import '../../styles/base/typography';
-
 .slide {
   margin: auto;
   // height: 465px;
diff --git a/src/components/Challenge/challengeCardDone.scss b/src/components/Challenge/challengeCardDone.scss
index a2c9e39b41fb78719bca5e96fffaf586db74e761..f0044b838d21dc93eeec4503739705b850830754 100644
--- a/src/components/Challenge/challengeCardDone.scss
+++ b/src/components/Challenge/challengeCardDone.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/typography';
+@import '../../styles/base/typo-variables';
 @import '../../styles/base/color';
 
 .cardDone {
diff --git a/src/components/Challenge/challengeCardLocked.scss b/src/components/Challenge/challengeCardLocked.scss
index 1207be3ae477b3735ee35e65c874913c34a6538a..a39157c6c27fcd455fff7733a18eef7c1081f92c 100644
--- a/src/components/Challenge/challengeCardLocked.scss
+++ b/src/components/Challenge/challengeCardLocked.scss
@@ -1,4 +1,3 @@
-@import '../../styles/base/typography';
 @import '../../styles/base/color';
 
 .cardLocked {
diff --git a/src/components/Challenge/challengeCardOnGoing.scss b/src/components/Challenge/challengeCardOnGoing.scss
index 95f6f77901e96f3978fc8bf25473cdb406e19a87..f888d6eb91dac094c73e85b0ad100cae0641e25d 100644
--- a/src/components/Challenge/challengeCardOnGoing.scss
+++ b/src/components/Challenge/challengeCardOnGoing.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/typography';
+@import '../../styles/base/typo-variables';
 @import '../../styles/base/color';
 
 .cardContent {
@@ -115,7 +115,7 @@
     background: $grey-linear-gradient-background;
   }
 }
-.explorationCard{
+.explorationCard {
   position: relative;
 }
 .goDuel {
diff --git a/src/components/Challenge/challengeCardUnlocked.scss b/src/components/Challenge/challengeCardUnlocked.scss
index 3f1bdc5424474296a65cc288fb7caa31e983e450..5cbab13fc08455b2619c931afcb7974b2b6de83e 100644
--- a/src/components/Challenge/challengeCardUnlocked.scss
+++ b/src/components/Challenge/challengeCardUnlocked.scss
@@ -1,5 +1,3 @@
-@import '../../styles/base/typography';
-
 .modal-overlay {
   width: 100%;
   height: 100%;
diff --git a/src/components/Challenge/challengeNoFluidModal.scss b/src/components/Challenge/challengeNoFluidModal.scss
index af743b408c196aa0387865c9fa315226b15e8d96..3a92b7a758d22868fbfaf6d4ed206b52654ed7ef 100644
--- a/src/components/Challenge/challengeNoFluidModal.scss
+++ b/src/components/Challenge/challengeNoFluidModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/typography';
+@import '../../styles/base/typo-variables';
 
 .noFluidModal {
   padding: 1rem;
diff --git a/src/components/Challenge/challengeView.scss b/src/components/Challenge/challengeView.scss
index 56e68b0489c40ae6cb205f085d146b7804e23cce..bd9128e4b4c47e5bf7446d324cf9b1438a9754dc 100644
--- a/src/components/Challenge/challengeView.scss
+++ b/src/components/Challenge/challengeView.scss
@@ -1,4 +1,6 @@
-@import '../../styles/base/typography';
+@import '../../styles/base/breakpoint';
+@import '../../styles/base/typo-variables';
+@import '../../styles/base/color';
 
 .challengeSlider {
   min-height: inherit;
diff --git a/src/components/Duel/duelError.scss b/src/components/Duel/duelError.scss
index 7085a1b770829d1d9c4d3399aef4ea3e51a47b97..870895cd6a79ccdebd718fccd9ea835bd5d6c5c0 100644
--- a/src/components/Duel/duelError.scss
+++ b/src/components/Duel/duelError.scss
@@ -1,6 +1,6 @@
-@import '../../styles/base/typography';
+@import '../../styles/base/color';
 
-.duel-error-container{
+.duel-error-container {
   display: flex;
   min-height: 60vh;
   flex-direction: column;
@@ -9,11 +9,11 @@
   padding: 1rem 1.5rem;
   color: $grey-bright;
 }
-.duel-error-message{
+.duel-error-message {
   margin-top: 3rem;
   text-align: center;
 }
-.duel-error-button{
+.duel-error-button {
   margin-top: 3rem;
   width: 7.5rem;
-}
\ No newline at end of file
+}
diff --git a/src/components/Duel/duelOngoing.scss b/src/components/Duel/duelOngoing.scss
index 0f414f8cfce76feae0e01664eed3432e93667e10..68bfc1ea9022d0ceedf03afd3ce8e91ece63b244 100644
--- a/src/components/Duel/duelOngoing.scss
+++ b/src/components/Duel/duelOngoing.scss
@@ -1,47 +1,46 @@
-@import '../../styles/base/typography';
+@import '../../styles/base/color';
 
-.duel-ongoing-container{
+.duel-ongoing-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-.duel-title{
+.duel-title {
   color: $soft-grey;
   margin-top: 1rem;
 }
-.duel-goal{
+.duel-goal {
   color: $grey-bright;
   margin: 1rem 3rem;
   text-align: center;
 }
-.duel-consumption{
+.duel-consumption {
   color: $grey-bright;
   margin: 1rem auto;
-  .consumption{
+  .consumption {
     color: $gold-light;
-
   }
 }
-.duel-chart{
+.duel-chart {
   height: 15.625rem;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80%;
 }
-.duel-chart-caption{
+.duel-chart-caption {
   display: flex;
   flex-direction: column;
   align-self: flex-start;
-  .duel-caption{
+  .duel-caption {
     display: flex;
     margin-top: 0.75rem;
-    .caption-icon{
+    .caption-icon {
       margin: auto 1.5rem;
     }
-    .caption-label{
+    .caption-label {
       color: $grey-bright;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Duel/duelUnlocked.scss b/src/components/Duel/duelUnlocked.scss
index d1339ffa593577d091c123b078533722942ceb68..b787378c76622ff62741ee16c410d208edd89138 100644
--- a/src/components/Duel/duelUnlocked.scss
+++ b/src/components/Duel/duelUnlocked.scss
@@ -1,29 +1,29 @@
-@import '../../styles/base/typography';
+@import '../../styles/base/color';
 
-.duel-unlocked-container{
+.duel-unlocked-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 0 1.25rem;
 }
-.duel-icon{
+.duel-icon {
   margin-top: 2.5rem;
 }
-.duel-title{
+.duel-title {
   color: $soft-grey;
 }
-.duel-description{
+.duel-description {
   color: $blue-light;
   margin-top: 0.75rem;
   text-align: center;
 }
-.duel-average-info{
+.duel-average-info {
   color: $grey-bright;
   margin-top: 0.75rem;
   text-align: center;
 }
-.button-start{
+.button-start {
   width: 11rem;
   margin-top: 2.5rem;
-}
\ No newline at end of file
+}
diff --git a/src/components/Duel/duelView.scss b/src/components/Duel/duelView.scss
index 6708d11d3c270338fc2f69a8bb15f815da5b7134..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/components/Duel/duelView.scss
+++ b/src/components/Duel/duelView.scss
@@ -1 +0,0 @@
-@import '../../styles/base/typography';
\ No newline at end of file
diff --git a/src/components/Exploration/explorationError.scss b/src/components/Exploration/explorationError.scss
index de5b9d02f9676afbd041a997cdf0cf52f2e0968d..9c747d83a044c9cb1c9fe7975d78348b059ba188 100644
--- a/src/components/Exploration/explorationError.scss
+++ b/src/components/Exploration/explorationError.scss
@@ -1,6 +1,6 @@
-@import '../../styles/base/typography';
+@import '../../styles/base/color';
 
-.exploration-error-container{
+.exploration-error-container {
   display: flex;
   min-height: 60vh;
   flex-direction: column;
@@ -9,11 +9,11 @@
   padding: 1rem 1.5rem;
   color: $grey-bright;
 }
-.exploration-error-message{
+.exploration-error-message {
   margin-top: 3rem;
   text-align: center;
 }
-.exploration-error-button{
+.exploration-error-button {
   margin-top: 3rem;
   width: 7.5rem;
-}
\ No newline at end of file
+}
diff --git a/src/components/Exploration/explorationView.scss b/src/components/Exploration/explorationView.scss
index 6708d11d3c270338fc2f69a8bb15f815da5b7134..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/components/Exploration/explorationView.scss
+++ b/src/components/Exploration/explorationView.scss
@@ -1 +0,0 @@
-@import '../../styles/base/typography';
\ No newline at end of file
diff --git a/src/styles/base/_typo-variables.scss b/src/styles/base/_typo-variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f13e5d0a88b5d1ef05f35e9e02aa3287be4c8b2b
--- /dev/null
+++ b/src/styles/base/_typo-variables.scss
@@ -0,0 +1 @@
+$text-font: Lato, sans-serif;
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 6841e3c511c3ff663dce9aad565289733eeb129f..55a7ea33e7d49cbb2d8b173f2951bae92146a741 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -1,7 +1,6 @@
 @import 'breakpoint';
 @import 'color';
-
-$text-font: Lato, sans-serif;
+@import 'typo-variables';
 
 * {
   font-family: $text-font;