diff --git a/src/scss/components/_colors.scss b/src/scss/components/_colors.scss
index 85f43e2..74d0c7d 100644
--- a/src/scss/components/_colors.scss
+++ b/src/scss/components/_colors.scss
@@ -1,47 +1,70 @@
-:root {
-  /* BRAND */
-  --sand-50: 249 248 243;
-  --sand-100: 242 239 226;
-  --sand-200: 227 221 197;
-  --sand-300: 210 199 159;
-  --sand-400: 194 176 128; // Main
-  --sand-500: 177 151 94;
-  --sand-600: 164 133 82;
-  --sand-700: 136 107 70;
-  --sand-800: 111 88 61;
-  --sand-900: 90 72 52;
-  --sand-950: 48 37 26;
-  
-  --forest-50: 244 247 238;
-  --forest-100: 231 238 217;
-  --forest-200: 208 223 183;
-  --forest-300: 187 208 154; // Main
-  --forest-400: 149 180 103;
-  --forest-500: 119 152 74;
-  --forest-600: 93 120 56;
-  --forest-700: 72 93 46;
-  --forest-800: 59 75 41;
-  --forest-900: 52 65 38;
-  --forest-950: 26 34 17;
-  /* BRAND */
+/* BRAND */
+$sand-50: 249 248 243;
+$sand-100: 242 239 226;
+$sand-200: 227 221 197;
+$sand-300: 210 199 159;
+$sand-400: 194 176 128; // Main
+$sand-500: 177 151 94;
+$sand-600: 164 133 82;
+$sand-700: 136 107 70;
+$sand-800: 111 88 61;
+$sand-900: 90 72 52;
+$sand-950: 48 37 26;
 
+$forest-50: 244 247 238;
+$forest-100: 231 238 217;
+$forest-200: 208 223 183;
+$forest-300: 187 208 154; // Main
+$forest-400: 149 180 103;
+$forest-500: 119 152 74;
+$forest-600: 93 120 56;
+$forest-700: 72 93 46;
+$forest-800: 59 75 41;
+$forest-900: 52 65 38;
+$forest-950: 26 34 17;
+/* BRAND */
+/* NEUTRAL */
+$light-0: 255, 255, 255, 0;
+$light-2: 255, 255, 255, 0.02;
+$light-4: 255, 255, 255, 0.04;
+$light-6: 255, 255, 255, 0.06;
+$light-8: 255, 255, 255, 0.08;
+$light-10: 255, 255, 255, 0.1;
+$light-20: 255, 255, 255, 0.2;
+$light-30: 255, 255, 255, 0.3;
+$light-40: 255, 255, 255, 0.4;
+$light-50: 255, 255, 255, 0.5;
+$light-60: 255, 255, 255, 0.6;
+$light-70: 255, 255, 255, 0.7;
+$light-80: 255, 255, 255, 0.8;
+$light-90: 255, 255, 255, 0.9;
+$light-100: 255, 255, 255;
 
+$dark-0: 9, 9, 11, 0;
+$dark-2: 9, 9, 11, 0.02;
+$dark-4: 9, 9, 11, 0.04;
+$dark-6: 9, 9, 11, 0.06;
+$dark-8: 9, 9, 11, 0.08;
+$dark-10: 9, 9, 11, 0.1;
+$dark-20: 9, 9, 11, 0.2;
+$dark-30: 9, 9, 11, 0.3;
+$dark-40: 9, 9, 11, 0.4;
+$dark-50: 9, 9, 11, 0.5;
+$dark-60: 9, 9, 11, 0.6;
+$dark-70: 9, 9, 11, 0.7;
+$dark-80: 9, 9, 11, 0.8;
+$dark-90: 9, 9, 11, 0.9;
+$dark-100: 9, 9, 11;
 
-
-
-  --shark-50: 246 246 246;
-  --shark-100: 231 231 231;
-  --shark-200: 209 209 209;
-  --shark-300: 176 176 176;
-  --shark-400: 136 136 136;
-  --shark-500: 109 109 109;
-  --shark-600: 93 93 93;
-  --shark-700: 79 79 79;
-  --shark-800: 69 69 69;
-  --shark-900: 61 61 61;
-  --shark-950: 30 30 30; // Main
-
-
-  
-  
-}
\ No newline at end of file
+$shark-50: 246 246 246;
+$shark-100: 231 231 231;
+$shark-200: 209 209 209;
+$shark-300: 176 176 176;
+$shark-400: 136 136 136;
+$shark-500: 109 109 109;
+$shark-600: 93 93 93;
+$shark-700: 79 79 79;
+$shark-800: 69 69 69;
+$shark-900: 61 61 61;
+$shark-950: 30 30 30; // Main
+/* NEUTRAL */
\ No newline at end of file
diff --git a/src/scss/components/_tokens.scss b/src/scss/components/_tokens.scss
new file mode 100644
index 0000000..d655fcd
--- /dev/null
+++ b/src/scss/components/_tokens.scss
@@ -0,0 +1,52 @@
+@import './components/colors';
+
+:root {
+  --neutral-lowest: #{$light-100};
+  --neutral-lower: #{$shark-100};
+  --neutral-low: #{$shark-300};
+  --neutral-medium: #{$shark-400};
+  --neutral-high: #{$shark-600};
+  --neutral-higher: #{$shark-700};
+  --neutral-highest: #{$dark-100};
+  
+  --brand-primary-lowest: #{$sand-50};
+  --brand-primary-lower: #{$sand-100};
+  --brand-primary-low: #{$sand-300};
+  --brand-primary-medium: #{$sand-500};
+  --brand-primary-high: #{$sand-700};
+  --brand-primary-higher: #{$sand-900};
+  --brand-primary-highest: #{$sand-950};
+  
+  --brand-secondary-lowest: #{$forest-50};
+  --brand-secondary-lower: #{$forest-100};
+  --brand-secondary-low: #{$forest-300};
+  --brand-secondary-medium: #{$forest-500};
+  --brand-secondary-high: #{$forest-700};
+  --brand-secondary-higher: #{$forest-900};
+  --brand-secondary-highest: #{$forest-950};
+  
+  /* --success-lowest: #000;
+  --success-lower: #000;
+  --success-low: #000;
+  --success-medium: #000;
+  --success-high: #000;
+  --success-higher: #000;
+  --success-highest: #000; */
+  
+  /* --danger-lowest: #000;
+  --danger-lower: #000;
+  --danger-low: #000;
+  --danger-medium: #000;
+  --danger-high: #000;
+  --danger-higher: #000;
+  --danger-highest: #000; */
+  
+  /* --warning-lowest: #000;
+  --warning-lower: #000;
+  --warning-low: #000;
+  --warning-medium: #000;
+  --warning-high: #000;
+  --warning-higher: #000;
+  --warning-highest: #000; */
+
+}
\ No newline at end of file
diff --git a/src/scss/components/_variables.scss b/src/scss/components/_variables.scss
index 74a8c60..9b4a83c 100644
--- a/src/scss/components/_variables.scss
+++ b/src/scss/components/_variables.scss
@@ -1,16 +1,16 @@
 :root {
-  --light-1: rgb(var(--shark-100));
-  --dark-1: rgb(var(--shark-950));
-  --dark-2: rgb(var(--shark-950) / .95);
+  --light-1: rgb(var(--neutral-lower));
+  --dark-1: rgb(var(--neutral-highest));
+  --dark-2: rgba(var(--neutral-highest), .8);
 
-  --primary: rgb(var(--sand-400));
-  --primary-light: rgb(var(--sand-300));
-  --primary-dark: rgb(var(--sand-500));
-  --secondary: rgb(var(--forest-300));
-  --secondary-light: rgb(var(--forest-200));
-  --secondary-dark: rgb(var(--forest-400));
+  --primary: rgb(var(--brand-primary-medium));
+  --primary-light: rgb(var(--brand-primary-low));
+  --primary-dark: rgb(var(--brand-primary-medium));
+  --secondary: rgb(var(--brand-secondary-low));
+  --secondary-light: rgb(var(--brand-secondary-lower));
+  --secondary-dark: rgb(var(--brand-secondary-medium));
 
-  --bg-gradient: linear-gradient(180deg, rgb(var(--sand-400)) 0%, rgb(var(--sand-400)) 3%, rgb(var(--sand-300)) 20%, rgb(var(--sand-200)) 35%, rgb(var(--forest-200)) 60%, rgb(var(--forest-300)) 75%, rgb(var(--forest-400)) 98%, rgb(var(--forest-400)) 100%);
+  --bg-gradient: linear-gradient(180deg, rgb(var(--brand-primary-medium)) 0%, rgb(var(--brand-primary-medium)) 5%, rgb(var(--brand-primary-low)) 30%, rgb(var(--brand-primary-lower)) 50%, rgb(var(--brand-secondary-lower)) 51%, rgb(var(--brand-secondary-low)) 65%, rgb(var(--brand-secondary-medium)) 98%, rgb(var(--brand-secondary-medium)) 100%);
 
   --background: var(--primary-light);
   --text: var(--dark-1);
diff --git a/src/scss/critical.scss b/src/scss/critical.scss
index 46b71df..f27b8fe 100644
--- a/src/scss/critical.scss
+++ b/src/scss/critical.scss
@@ -1,4 +1,4 @@
-@use './components/colors';
+@use './components/tokens';
 @use './components/variables';
 @use './components/reset';
 @use './components/superminimal';
@@ -17,7 +17,7 @@ html {
   }
 }
 body {
-  background: rgb(var(--sand-400));
+  background: rgb(var(--brand-primary-medium));
   background: var(--bg-gradient);
 
   header, footer {
@@ -49,7 +49,7 @@ main {
 }
 footer {
   /* background-color: var(--secondary); */
-  background-color: rgb(var(--forest-400));
+  background-color: rgb(var(--brand-secondary-medium));
   justify-items: center;
   margin-block-start: 1.5rem;
 
@@ -275,7 +275,7 @@ i {
       aspect-ratio: 1;
       inline-size: var(--size);
       background-color: var(--light-1);
-      border: 6px solid rgb(var(--forest-500));
+      border: 6px solid rgb(var(--brand-secondary-medium));
       /* border: 6px solid var(--secondary-dark); */
       inset-inline-start: 0;
       // inset-inline-start: .9rem;
@@ -290,7 +290,7 @@ i {
 
     &:hover {
       &:before {
-        border-color: rgb(var(--forest-600));
+        border-color: rgb(var(--brand-secondary-high));
       }
     }
   }
@@ -315,7 +315,7 @@ i {
 }
 
 .btn-download {
-  color: rgb(var(--forest-200));
+  color: rgb(var(--brand-secondary-lower));
 }
 
 .competences-section {