diff --git a/packages/core/src/ArwesThemeProvider/ArwesThemeProvider.component.tsx b/packages/core/src/ArwesThemeProvider/ArwesThemeProvider.component.tsx
index 40e10854..621cf37b 100644
--- a/packages/core/src/ArwesThemeProvider/ArwesThemeProvider.component.tsx
+++ b/packages/core/src/ArwesThemeProvider/ArwesThemeProvider.component.tsx
@@ -1,10 +1,19 @@
 import React, { FC, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@emotion/react';
-import { ThemeSettings, ThemePalette, Theme, createTheme } from '@arwes/design';
+import { ThemeSettings, ThemePalette, Theme, createTheme, ThemeSettingsPalette } from '@arwes/design';
+
+interface ArwesThemeSettingsPalette extends ThemeSettingsPalette {
+  text?: {
+    root?: string
+    headings?: string
+    link?: string
+    linkHover?: string
+  }
+}
 
 interface ArwesThemeSettings extends ThemeSettings {
-  fontScale?: number
+  palette?: ArwesThemeSettingsPalette
 }
 
 interface ArwesThemePalette extends ThemePalette {
@@ -18,8 +27,6 @@ interface ArwesThemePalette extends ThemePalette {
 
 interface ArwesTheme extends Theme {
   palette: ArwesThemePalette
-  fontScale: number
-  transitionDuration: number
 }
 
 interface ArwesThemeProviderProps {
@@ -55,23 +62,15 @@ const ArwesThemeProvider: FC<ArwesThemeProviderProps> = props => {
         neutral: {
           main: '#021114'
         },
+        ...themeSettings?.palette,
         text: {
           root: '#7efcf6',
           headings: '#00f8f8',
           link: '#ffa76c',
-          linkHover: '#ffc69f'
-        },
-        ...themeSettings?.palette
-      },
-      space: themeSettings?.space ?? 5,
-      outline: themeSettings?.outline ?? 1,
-      shadow: {
-        blur: 1,
-        spread: 1,
-        ...themeSettings?.shadow
-      },
-      fontScale: themeSettings?.fontScale ?? 1,
-      transitionDuration: themeSettings?.transitionDuration ?? 150
+          linkHover: '#ffc69f',
+          ...themeSettings?.palette?.text
+        }
+      }
     }) as ArwesTheme;
   }, []);
 
diff --git a/packages/core/src/Blockquote/Blockquote.animator.ts b/packages/core/src/Blockquote/Blockquote.animator.ts
index efa6dfba..d43f614b 100644
--- a/packages/core/src/Blockquote/Blockquote.animator.ts
+++ b/packages/core/src/Blockquote/Blockquote.animator.ts
@@ -21,7 +21,7 @@ const transitionRemoveBlockquote = (animator: AnimatorRef, containerRef: Contain
 const transitionCard = (animator: AnimatorRef, containerRef: ContainerRef): void => {
   const { flow, duration } = animator;
   const isEntering = flow.entering || flow.entered;
-  const transitionDuration = isEntering ? duration.enter : duration.exit;
+  const durationTransition = isEntering ? duration.enter : duration.exit;
 
   const container = containerRef.current;
   const line = container.querySelector('.arwes-blockquote__line');
@@ -30,15 +30,15 @@ const transitionCard = (animator: AnimatorRef, containerRef: ContainerRef): void
   if (isEntering) {
     anime({
       targets: line,
-      duration: transitionDuration,
+      duration: durationTransition,
       easing: 'easeOutSine',
       height: [0, '100%']
     });
 
-    transitionAppear([line, bg], transitionDuration);
+    transitionAppear([line, bg], durationTransition);
   }
   else {
-    transitionDisappear([line, bg], transitionDuration);
+    transitionDisappear([line, bg], durationTransition);
   }
 };
 
diff --git a/packages/core/src/Blockquote/Blockquote.styles.ts b/packages/core/src/Blockquote/Blockquote.styles.ts
index 5e8cd80f..f821c147 100644
--- a/packages/core/src/Blockquote/Blockquote.styles.ts
+++ b/packages/core/src/Blockquote/Blockquote.styles.ts
@@ -7,7 +7,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate?: boolean, palette?: string }
 ): Record<string, CSSObject> => {
-  const { space, outline, shadow } = theme;
+  const { space, outline, shadowBlur } = theme;
   const { animate } = options;
 
   const defaultPalette = theme.palette.primary;
@@ -43,7 +43,7 @@ const generateStyles = (
       width: outline(6),
       height: '100%',
       backgroundColor: color,
-      boxShadow: `0 0 ${shadow.blur(2)}px ${color}`,
+      boxShadow: `0 0 ${shadowBlur(2)}px ${color}`,
       opacity: animate ? 0 : undefined
     },
     content: {
diff --git a/packages/core/src/Button/Button.effects.ts b/packages/core/src/Button/Button.effects.ts
index f332a388..31a1e3e5 100644
--- a/packages/core/src/Button/Button.effects.ts
+++ b/packages/core/src/Button/Button.effects.ts
@@ -6,7 +6,7 @@ import { ArwesTheme } from '../ArwesThemeProvider';
 
 const highlightFrameBgs = (container: HTMLElement, theme: ArwesTheme, palette?: string): void => {
   const color = theme.palette[palette as string]?.main || theme.palette.primary.main;
-  const duration = theme.transitionDuration / 2;
+  const duration = theme.transitionDuration(0.5);
 
   const bgs: HTMLElement[] = Array.from(container.querySelectorAll(`.${ARWES_CORE_FRAME_BG_CLASSNAME}`));
 
diff --git a/packages/core/src/Button/Button.styles.ts b/packages/core/src/Button/Button.styles.ts
index 012257e3..3a69a65e 100644
--- a/packages/core/src/Button/Button.styles.ts
+++ b/packages/core/src/Button/Button.styles.ts
@@ -10,7 +10,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { palette?: string, active?: boolean, disabled?: boolean }
 ): Record<string, CSSObject> => {
-  const { shadow, transitionDuration } = theme;
+  const { shadowBlur, transitionDuration } = theme;
   const { active, disabled } = options;
 
   const defaultPalette = theme.palette.primary;
@@ -28,22 +28,22 @@ const generateStyles = (
       fontSize: '0.875rem',
       textTransform: 'uppercase',
       textDecoration: 'none',
-      textShadow: `0 0 ${shadow.blur(1)}px ${color}`,
+      textShadow: `0 0 ${shadowBlur(1)}px ${color}`,
       color,
       cursor: disabled ? 'default' : 'pointer',
       transition: ['color', 'text-shadow']
-        .map(prop => `${prop} ${transitionDuration}ms ease-out`)
+        .map(prop => `${prop} ${transitionDuration()}ms ease-out`)
         .join(','),
 
       [`& .${ARWES_CORE_FRAME_BG_CLASSNAME}`]: active && {
         backgroundColor: color,
         opacity: BUTTON_FRAME_BG_BASE_OPACITY,
-        transition: `opacity ${transitionDuration}ms ease-out`
+        transition: `opacity ${transitionDuration()}ms ease-out`
       },
 
       '&:hover, &:focus': !disabled && {
         color: colorHover,
-        textShadow: `0 0 ${shadow.blur(1)}px ${colorHover}`,
+        textShadow: `0 0 ${shadowBlur(1)}px ${colorHover}`,
 
         [`& .${ARWES_CORE_FRAME_BG_CLASSNAME}`]: active && {
           backgroundColor: colorHover
diff --git a/packages/core/src/Card/Card.animator.ts b/packages/core/src/Card/Card.animator.ts
index 8d65b325..4d9ebaec 100644
--- a/packages/core/src/Card/Card.animator.ts
+++ b/packages/core/src/Card/Card.animator.ts
@@ -30,7 +30,7 @@ const transitionCard = (
 ): void => {
   const { flow, duration } = animator;
   const isEntering = flow.entering || flow.entered;
-  const transitionDuration = isEntering ? duration.enter : duration.exit;
+  const durationTransition = isEntering ? duration.enter : duration.exit;
   const container = containerRef.current;
   const { space } = theme;
 
@@ -39,27 +39,27 @@ const transitionCard = (
 
     anime({
       targets: container.querySelector('.arwes-card__line-picture'),
-      duration: transitionDuration,
+      duration: durationTransition,
       easing: 'easeOutSine',
       translateX: [space(4), 0]
     });
 
     anime({
       targets: container.querySelector('.arwes-card__line-content'),
-      duration: transitionDuration,
+      duration: durationTransition,
       easing: 'easeOutSine',
       translateY: [-space(4), 0]
     });
 
     transitionAppear(
       container.querySelectorAll('.arwes-card__line'),
-      transitionDuration
+      durationTransition
     );
 
     transitionAppear(
       container.querySelectorAll('.arwes-card__image, .arwes-card__content-bg'),
-      transitionDuration,
-      transitionDuration
+      durationTransition,
+      durationTransition
     );
   }
   else {
@@ -69,7 +69,7 @@ const transitionCard = (
         '.arwes-card__image',
         '.arwes-card__content-bg'
       ].join(',')),
-      transitionDuration
+      durationTransition
     );
   }
 };
diff --git a/packages/core/src/Card/Card.styles.ts b/packages/core/src/Card/Card.styles.ts
index 70643106..d9cf1150 100644
--- a/packages/core/src/Card/Card.styles.ts
+++ b/packages/core/src/Card/Card.styles.ts
@@ -7,7 +7,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate?: boolean, landscape?: boolean, hover?: boolean }
 ): Record<string, CSSObject> => {
-  const { palette, space, outline, shadow, transitionDuration } = theme;
+  const { palette, space, outline, shadowBlur, transitionDuration } = theme;
   const { animate, landscape, hover } = options;
 
   const contentBg = rgba(palette.primary.light1, 0.05);
@@ -21,7 +21,7 @@ const generateStyles = (
         '&:focus .arwes-card__line-picture'
       ].join(',')]: hover && {
         backgroundColor: palette.secondary.light1,
-        boxShadow: `0 0 ${shadow.blur(1)}px ${palette.secondary.light1}`
+        boxShadow: `0 0 ${shadowBlur(1)}px ${palette.secondary.light1}`
       },
 
       [[
@@ -29,7 +29,7 @@ const generateStyles = (
         '&:focus .arwes-card__line-content'
       ].join(',')]: hover && {
         backgroundColor: palette.primary.light1,
-        boxShadow: `0 0 ${shadow.blur(1)}px ${palette.primary.light1}`
+        boxShadow: `0 0 ${shadowBlur(1)}px ${palette.primary.light1}`
       }
     },
     container: {
@@ -42,7 +42,7 @@ const generateStyles = (
     line: {
       position: 'absolute',
       transition: ['background-color', 'box-shadow']
-        .map(prop => `${prop} ${transitionDuration}ms ease-out`)
+        .map(prop => `${prop} ${transitionDuration()}ms ease-out`)
         .join(','),
       opacity: animate ? 0 : undefined
     },
@@ -78,7 +78,7 @@ const generateStyles = (
       width: outline(1),
       height: '100%',
       backgroundColor: palette.secondary.dark1,
-      boxShadow: `0 0 ${shadow.blur(1)}px ${palette.secondary.dark1}`
+      boxShadow: `0 0 ${shadowBlur(1)}px ${palette.secondary.dark1}`
     },
 
     content: {
@@ -121,7 +121,7 @@ const generateStyles = (
       width: '100%',
       height: outline(1),
       backgroundColor: palette.primary.dark1,
-      boxShadow: `0 0 ${shadow.blur(1)}px ${palette.primary.dark1}`
+      boxShadow: `0 0 ${shadowBlur(1)}px ${palette.primary.dark1}`
     }
   };
 };
diff --git a/packages/core/src/CodeBlock/CodeBlock.styles.ts b/packages/core/src/CodeBlock/CodeBlock.styles.ts
index 5dbd2d2f..22467d2d 100644
--- a/packages/core/src/CodeBlock/CodeBlock.styles.ts
+++ b/packages/core/src/CodeBlock/CodeBlock.styles.ts
@@ -7,7 +7,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate: boolean }
 ): Record<string, CSSObject> => {
-  const { palette, space, outline, shadow } = theme;
+  const { palette, space, outline, shadowBlur } = theme;
   const { animate } = options;
 
   return {
@@ -55,7 +55,7 @@ const generateStyles = (
       top: outline(1),
       padding: `${space(0.5)}px ${space(1.5)}px`,
       color: palette.secondary.main,
-      textShadow: `0 0 ${shadow.blur(1)}px ${palette.secondary.main}`,
+      textShadow: `0 0 ${shadowBlur(1)}px ${palette.secondary.main}`,
       textTransform: 'uppercase'
     },
     langBg: {
diff --git a/packages/core/src/Figure/Figure.styles.ts b/packages/core/src/Figure/Figure.styles.ts
index 92ebd0d5..e00c239e 100644
--- a/packages/core/src/Figure/Figure.styles.ts
+++ b/packages/core/src/Figure/Figure.styles.ts
@@ -7,13 +7,13 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate: boolean, fluid?: boolean }
 ): Record<string, CSSObject> => {
-  const { palette, space, outline, shadow } = theme;
+  const { palette, space, outline, shadowBlur } = theme;
   const { animate, fluid } = options;
 
   const containerPadding = space(2);
 
   const lineWidth = outline(1);
-  const lineShadowBlur = shadow.blur(2);
+  const lineShadowBlur = shadowBlur(2);
   const lineColor = palette.primary.main;
   const lineShadowColor = palette.primary.main;
   const lineLength = space(18);
diff --git a/packages/core/src/FrameUnderline/FrameUnderline.animator.ts b/packages/core/src/FrameUnderline/FrameUnderline.animator.ts
index 943d8273..ffc5ac91 100644
--- a/packages/core/src/FrameUnderline/FrameUnderline.animator.ts
+++ b/packages/core/src/FrameUnderline/FrameUnderline.animator.ts
@@ -45,13 +45,13 @@ const transitionFrameUnderline = (
 
   const { duration, flow } = animator;
   const isEntering = flow.entering || flow.entered;
-  const transitionDuration = isEntering ? duration.enter : duration.exit;
+  const durationTransition = isEntering ? duration.enter : duration.exit;
   const { space } = theme;
   const container = containerRef.current;
 
   anime({
     targets: container,
-    duration: transitionDuration,
+    duration: durationTransition,
     easing: 'easeOutSine',
     translateX: isEntering ? [-space(2), 0] : [0, -space(2)]
   });
@@ -60,7 +60,7 @@ const transitionFrameUnderline = (
     targets: container.querySelectorAll(
       '.arwes-frame-underline__shapes, .arwes-frame-underline__line'
     ),
-    duration: transitionDuration,
+    duration: durationTransition,
     easing: 'easeOutSine',
     opacity: isEntering ? [0, 1] : [1, 0]
   });
diff --git a/packages/core/src/FrameUnderline/FrameUnderline.styles.ts b/packages/core/src/FrameUnderline/FrameUnderline.styles.ts
index 9b9a96a9..32095445 100644
--- a/packages/core/src/FrameUnderline/FrameUnderline.styles.ts
+++ b/packages/core/src/FrameUnderline/FrameUnderline.styles.ts
@@ -6,7 +6,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate: boolean, palette?: string, hover?: boolean, disabled?: boolean }
 ): Record<string, CSSObject> => {
-  const { space, outline, shadow, transitionDuration } = theme;
+  const { space, outline, shadowBlur, transitionDuration } = theme;
   const { animate, hover, disabled } = options;
 
   const defaultPalette = theme.palette.primary;
@@ -24,7 +24,7 @@ const generateStyles = (
         '&:focus .arwes-frame-underline__line'
       ].join(',')]: hover && !disabled && {
         backgroundColor: colorHover,
-        boxShadow: `0 0 ${shadow.blur(2)}px ${colorHover}`
+        boxShadow: `0 0 ${shadowBlur(2)}px ${colorHover}`
       }
     },
     container: {},
@@ -33,9 +33,9 @@ const generateStyles = (
       position: 'absolute',
       height: outline(2),
       backgroundColor: color,
-      boxShadow: `0 0 ${shadow.blur(2)}px ${color}`,
+      boxShadow: `0 0 ${shadowBlur(2)}px ${color}`,
       transition: ['background-color', 'box-shadow']
-        .map(prop => `${prop} ${transitionDuration}ms ease-out`)
+        .map(prop => `${prop} ${transitionDuration()}ms ease-out`)
         .join(','),
       opacity: animate ? 0 : undefined
     },
diff --git a/packages/core/src/List/List.animator.ts b/packages/core/src/List/List.animator.ts
index 6a865b6b..7ceccdb2 100644
--- a/packages/core/src/List/List.animator.ts
+++ b/packages/core/src/List/List.animator.ts
@@ -20,7 +20,7 @@ const transitionList = (animator: AnimatorRef, containerRef: ContainerRef, theme
 
   const { flow, duration } = animator;
   const isEntering = flow.entering || flow.entered;
-  const transitionDuration = isEntering ? duration.enter : duration.exit;
+  const durationTransition = isEntering ? duration.enter : duration.exit;
 
   const container = containerRef.current;
   const items = container.querySelectorAll(':scope > li');
@@ -33,12 +33,12 @@ const transitionList = (animator: AnimatorRef, containerRef: ContainerRef, theme
       delay: anime.stagger(duration.stagger),
       opacity: {
         easing: 'easeOutExpo',
-        duration: transitionDuration / 3,
+        duration: durationTransition / 3,
         value: [0, 1]
       },
       translateX: {
         easing: 'easeOutSine',
-        duration: transitionDuration,
+        duration: durationTransition,
         value: [-space(2), 0]
       }
     });
@@ -49,7 +49,7 @@ const transitionList = (animator: AnimatorRef, containerRef: ContainerRef, theme
       // Only set `opacity: 0` when the animation is completed so the <List/>
       // children text components can be animated properly.
       easing: () => (progress: number): number => progress === 1 ? 1 : 0,
-      duration: transitionDuration,
+      duration: durationTransition,
       opacity: [1, 0]
     });
   }
diff --git a/packages/core/src/LoadingBars/LoadingBars.styles.ts b/packages/core/src/LoadingBars/LoadingBars.styles.ts
index 600021c2..537669c3 100644
--- a/packages/core/src/LoadingBars/LoadingBars.styles.ts
+++ b/packages/core/src/LoadingBars/LoadingBars.styles.ts
@@ -15,7 +15,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate: boolean, length: number, size: number, full?: boolean }
 ): Record<string, CSSObject> => {
-  const { palette, space, outline, shadow } = theme;
+  const { palette, space, outline, shadowBlur } = theme;
   const { animate, length, size, full } = options;
 
   return {
@@ -40,17 +40,17 @@ const generateStyles = (
       borderStyle: 'solid',
       borderColor: palette.primary.main,
       borderWidth: outline(1),
-      boxShadow: `0 0 ${shadow.blur(1 * size)}px ${palette.primary.main}`,
+      boxShadow: `0 0 ${shadowBlur(1 * size)}px ${palette.primary.main}`,
       transform: 'skewX(330deg)',
       transformOrigin: 'center'
     },
     itemPrimaryActive: {
       backgroundColor: palette.primary.main,
-      boxShadow: `0 0 ${shadow.blur(2 * size)}px ${palette.primary.main}`
+      boxShadow: `0 0 ${shadowBlur(2 * size)}px ${palette.primary.main}`
     },
     itemSecondaryActive: {
       backgroundColor: palette.primary.dark2,
-      boxShadow: `0 0 ${shadow.blur(2 * size)}px ${palette.primary.dark2}`
+      boxShadow: `0 0 ${shadowBlur(2 * size)}px ${palette.primary.dark2}`
     },
     itemInactive: {
       backgroundColor: '',
diff --git a/packages/core/src/StylesBaseline/StylesBaseline.styles.ts b/packages/core/src/StylesBaseline/StylesBaseline.styles.ts
index 5eb581c5..161ab636 100644
--- a/packages/core/src/StylesBaseline/StylesBaseline.styles.ts
+++ b/packages/core/src/StylesBaseline/StylesBaseline.styles.ts
@@ -4,7 +4,7 @@ import { CSSObject } from '@emotion/css';
 import { ArwesTheme } from '../ArwesThemeProvider';
 
 const createGlobalGeneralStyles = (theme: ArwesTheme): Record<string, CSSObject> => {
-  const { palette, space, outline, shadow, fontScale, transitionDuration } = theme;
+  const { palette, space, outline, shadowBlur, fontScale, transitionDuration } = theme;
 
   const highlightedContentBgColor1 = rgba(palette.primary.light1, 0.05);
   const highlightedContentBgColor2 = rgba(palette.primary.light1, 0.1);
@@ -23,7 +23,7 @@ const createGlobalGeneralStyles = (theme: ArwesTheme): Record<string, CSSObject>
       WebkitTextSizeAdjust: '100%',
 
       // Fonts
-      fontSize: `${16 * fontScale}px`,
+      fontSize: `${16 * fontScale()}px`,
       lineHeight: 1.3,
       color: palette.text.root,
 
@@ -62,7 +62,7 @@ const createGlobalGeneralStyles = (theme: ArwesTheme): Record<string, CSSObject>
       color: palette.text.headings,
       textTransform: 'uppercase',
       letterSpacing: 0.5,
-      textShadow: `0 0 ${shadow.blur(2)}px ${palette.text.headings}`
+      textShadow: `0 0 ${shadowBlur(2)}px ${palette.text.headings}`
     },
     h1: { fontSize: '1.75rem' },
     h2: { fontSize: '1.625rem' },
@@ -95,7 +95,7 @@ const createGlobalGeneralStyles = (theme: ArwesTheme): Record<string, CSSObject>
       color: palette.text.link,
       outline: 'none',
       textDecoration: 'none',
-      transition: `color ${transitionDuration}ms ease-out`,
+      transition: `color ${transitionDuration()}ms ease-out`,
 
       '&:hover, &:focus': {
         color: palette.text.linkHover
@@ -188,7 +188,7 @@ const createGlobalGeneralStyles = (theme: ArwesTheme): Record<string, CSSObject>
       padding: `${space(1)}px ${space(1.5)}px`
     },
     tr: {
-      transition: `background-color ${transitionDuration}ms ease-out`
+      transition: `background-color ${transitionDuration()}ms ease-out`
     },
 
     // ASSETS
@@ -262,9 +262,9 @@ const createGlobalGeneralStyles = (theme: ArwesTheme): Record<string, CSSObject>
       color: palette.secondary.light1,
       backgroundColor: 'transparent',
       transition: [
-        `border-color ${transitionDuration}ms ease-out`,
-        `background-color ${transitionDuration}ms ease-out`,
-        `box-shadow ${transitionDuration}ms ease-out`
+        `border-color ${transitionDuration()}ms ease-out`,
+        `background-color ${transitionDuration()}ms ease-out`,
+        `box-shadow ${transitionDuration()}ms ease-out`
       ].join(', '),
 
       '&::placeholder': {
diff --git a/packages/core/src/Table/TableRow/TableRow.styles.ts b/packages/core/src/Table/TableRow/TableRow.styles.ts
index 8f3e1dfa..47c2e532 100644
--- a/packages/core/src/Table/TableRow/TableRow.styles.ts
+++ b/packages/core/src/Table/TableRow/TableRow.styles.ts
@@ -17,7 +17,7 @@ const generateStyles = (
       flexDirection: 'row',
       marginBottom: space(1),
       fontWeight: isHeader ? 'bold' : 'normal',
-      transition: `background-color ${transitionDuration}ms ease-out`,
+      transition: `background-color ${transitionDuration()}ms ease-out`,
 
       '&:last-child': {
         marginBottom: 0
@@ -34,7 +34,7 @@ const generateStyles = (
       whiteSpace: 'normal',
       wordBreak: 'break-word',
       backgroundColor: animate ? undefined : rgba(palette.text.root, isHeader ? 0.15 : 0.05),
-      transition: `background-color ${transitionDuration}ms ease-out`,
+      transition: `background-color ${transitionDuration()}ms ease-out`,
 
       '&:last-child': {
         marginRight: 0