diff --git a/.storybook/css/code-pro-font.css b/.storybook/css/code-pro-font.css
new file mode 100644
index 000000000..090414313
--- /dev/null
+++ b/.storybook/css/code-pro-font.css
@@ -0,0 +1,31 @@
+/* Regular */
+@font-face {
+    font-family: 'Code Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Code Regular');
+}
+
+/* Light */
+@font-face {
+    font-family: 'Code Pro';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Code Light');
+}
+
+/* Medium */
+@font-face {
+    font-family: 'Code Pro';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Code Bold');
+}
+
+/* Bold */
+@font-face {
+    font-family: 'Code Pro';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Code Bold');
+}
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 34c925dd8..77b8cfd70 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,6 +2,7 @@ import './css/roboto.css';
 import './css/vivo-font.css';
 import './css/telefonica-font.css';
 import './css/onair-font.css';
+import './css/code-pro-font.css';
 import './css/main.css';
 import * as React from 'react';
 import {
@@ -122,6 +123,9 @@ const MisticaThemeProvider = ({Story, context}): React.ReactElement => {
                         {(skin === O2_SKIN || skin === O2_NEW_SKIN || skin === MOVISTAR_SKIN) && (
                             <style>{`body {font-family: "On Air"}`}</style>
                         )}
+                        {skin === BLAU_SKIN && (
+                            <style>{`body {font-family: "Code Pro", -apple-system, "Roboto", "Helvetica", "Arial", sans-serif}`}</style>
+                        )}
                         <Story {...context} />
                     </OverscrollColorProvider>
                 </ThemeContextProvider>
diff --git a/playroom/frame-component.tsx b/playroom/frame-component.tsx
index ee6e7607e..fc263777c 100644
--- a/playroom/frame-component.tsx
+++ b/playroom/frame-component.tsx
@@ -16,6 +16,7 @@ import {
     O2_NEW_SKIN,
     TU_SKIN,
     MOVISTAR_SKIN,
+    BLAU_SKIN,
 } from '../src';
 
 import type {ThemeConfig} from '../src';
@@ -50,7 +51,7 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
                 ? 'body {font-family: "On Air"}'
                 : ''
         }
-        
+        ${skinName === BLAU_SKIN ? 'body {font-family: "Code Pro", -apple-system, "Roboto", "Helvetica", "Arial", sans-serif}' : ''}
 
         *[class^='_1fu0koy1'] {
             display: none;
diff --git a/src/skins/blau.tsx b/src/skins/blau.tsx
index 4bd9c3207..6631de686 100644
--- a/src/skins/blau.tsx
+++ b/src/skins/blau.tsx
@@ -311,20 +311,20 @@ export const getBlauSkin: GetKnownSkin = () => {
             cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.grey6, 0)} 0%, ${applyAlpha(palette.grey6, 0.4)} 30%, ${applyAlpha(palette.grey6, 0.7)} 100%)`,
         },
         borderRadii: {
-            avatar: '50%',
-            bar: '999px',
-            button: '4px',
+            button: '2px',
+            input: '2px',
+            container: '4px',
+            legacyDisplay: '2px',
+            popup: '0px',
             checkbox: '2px',
-            container: '8px',
-            indicator: '999px',
-            input: '8px',
-            legacyDisplay: '16px',
-            popup: '8px',
-            sheet: '8px',
-            mediaSmall: '8px',
+            indicator: '2px',
+            sheet: '2px',
+            bar: '2px',
+            avatar: '50%',
+            mediaSmall: '2px',
         },
         textPresets: {
-            cardTitle: {weight: 'regular'},
+            cardTitle: {weight: 'medium'},
             button: {weight: 'medium'},
             tabsLabel: {
                 weight: 'medium',
@@ -333,20 +333,20 @@ export const getBlauSkin: GetKnownSkin = () => {
             },
             link: {weight: 'medium'},
             title1: {weight: 'medium'},
-            title2: {weight: 'light'},
-            title3: {weight: 'light', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
+            title2: {weight: 'bold'},
+            title3: {weight: 'bold', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
             indicator: {weight: 'medium'},
             navigationBar: {weight: 'medium'},
             text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
             text2: {size: {mobile: 14, desktop: 16}, lineHeight: {mobile: 20, desktop: 24}},
             text3: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
             text4: {size: {mobile: 18, desktop: 20}, lineHeight: {mobile: 24, desktop: 28}},
-            text5: {weight: 'light', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            text6: {weight: 'light', size: {mobile: 24, desktop: 32}, lineHeight: {mobile: 32, desktop: 40}},
-            text7: {weight: 'light', size: {mobile: 28, desktop: 40}, lineHeight: {mobile: 32, desktop: 48}},
-            text8: {weight: 'light', size: {mobile: 32, desktop: 48}, lineHeight: {mobile: 40, desktop: 56}},
-            text9: {weight: 'light', size: {mobile: 40, desktop: 56}, lineHeight: {mobile: 48, desktop: 64}},
-            text10: {weight: 'light', size: {mobile: 48, desktop: 64}, lineHeight: {mobile: 56, desktop: 72}},
+            text5: {weight: 'bold', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
+            text6: {weight: 'bold', size: {mobile: 24, desktop: 32}, lineHeight: {mobile: 32, desktop: 40}},
+            text7: {weight: 'bold', size: {mobile: 28, desktop: 40}, lineHeight: {mobile: 32, desktop: 48}},
+            text8: {weight: 'bold', size: {mobile: 32, desktop: 48}, lineHeight: {mobile: 40, desktop: 56}},
+            text9: {weight: 'bold', size: {mobile: 40, desktop: 56}, lineHeight: {mobile: 48, desktop: 64}},
+            text10: {weight: 'bold', size: {mobile: 48, desktop: 64}, lineHeight: {mobile: 56, desktop: 72}},
         },
     };
     return skin;