diff --git a/src/styles.scss b/src/styles.scss
index d0a4015..ad11642 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @import url('./styles/variables.scss');
+@import url('./styles/shared.scss');
 
 * {
     margin: 0;

diff --git a/src/styles.scss b/src/styles.scss
index d0a4015..ad11642 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @import url('./styles/variables.scss');
+@import url('./styles/shared.scss');
 
 * {
     margin: 0;
diff --git a/src/styles/shared.scss b/src/styles/shared.scss
new file mode 100644
index 0000000..aef121e
--- /dev/null
+++ b/src/styles/shared.scss
@@ -0,0 +1,46 @@
+* {
+    margin: 0;
+  }
+
+  
+.has-bg-primary{
+    background: var(--base-color-primary);
+}
+.has-bg-secondary{
+    background: var(--base-color-secondary);
+}
+
+.has-bg-blue{
+    background: var(--base-color-blue);
+}
+
+/* Black and white */
+.has-bg-white{
+    background: var(--base-color-white);
+}
+.has-bg-dark{
+    background: var(--base-color-dark);
+}
+
+/* Color gray */
+.has-bg-gray{
+    background: var(--base-color-gray);
+}
+.has-bg-gray-light{
+    background: var(--base-color-gray-light);
+}
+.has-bg-gray-dark{
+    background: var(--base-color-gray-dark);
+}
+
+
+/*Border radius*/
+.has-br-small{
+    border-radius: var(--base-rounded-small);
+}
+.has-br-medium{
+    border-radius: var(--base-rounded-medium);
+}
+.has-br-large{
+    border-radius: var(--base-rounded-large);
+}
\ No newline at end of file

diff --git a/src/styles.scss b/src/styles.scss
index d0a4015..ad11642 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @import url('./styles/variables.scss');
+@import url('./styles/shared.scss');
 
 * {
     margin: 0;
diff --git a/src/styles/shared.scss b/src/styles/shared.scss
new file mode 100644
index 0000000..aef121e
--- /dev/null
+++ b/src/styles/shared.scss
@@ -0,0 +1,46 @@
+* {
+    margin: 0;
+  }
+
+  
+.has-bg-primary{
+    background: var(--base-color-primary);
+}
+.has-bg-secondary{
+    background: var(--base-color-secondary);
+}
+
+.has-bg-blue{
+    background: var(--base-color-blue);
+}
+
+/* Black and white */
+.has-bg-white{
+    background: var(--base-color-white);
+}
+.has-bg-dark{
+    background: var(--base-color-dark);
+}
+
+/* Color gray */
+.has-bg-gray{
+    background: var(--base-color-gray);
+}
+.has-bg-gray-light{
+    background: var(--base-color-gray-light);
+}
+.has-bg-gray-dark{
+    background: var(--base-color-gray-dark);
+}
+
+
+/*Border radius*/
+.has-br-small{
+    border-radius: var(--base-rounded-small);
+}
+.has-br-medium{
+    border-radius: var(--base-rounded-medium);
+}
+.has-br-large{
+    border-radius: var(--base-rounded-large);
+}
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a14a4e4..9e9ef63 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,11 +1,17 @@
-
-:root{
-    --base-color-primary: #b72929;
-    --base-color-secondary: #ffd600;
-    --base-color-yellow: #ffd600;
-    --rounded-small: 5px;
+:root {
+  --base-color-primary: #b72929;
+  --base-color-dark: #1c1c1c;
+  --base-color-secondary: #ffd600;
+  --base-color-blue: #2635bc;
+  --base-color-white: #ffffff;
+  --base-color-gray-light: #f2f2f2;
+  --base-color-gray: #cecece;
+  --base-color-gray-dark: #8c8c8c;
+  --base-rounded-small: 5px;
+  --base-rounded-medium: 10px;
+  --base-rounded-large: 20px;
 }
 
 * {
-    margin: 0;
-}
\ No newline at end of file
+  margin: 0;
+}