diff --git a/packages/core/src/Lib/UseColor/Internal/Lib/UseTextColor.ts b/packages/core/src/Lib/UseColor/Internal/Lib/UseTextColor.ts
index c2c444ff..5099fdee 100644
--- a/packages/core/src/Lib/UseColor/Internal/Lib/UseTextColor.ts
+++ b/packages/core/src/Lib/UseColor/Internal/Lib/UseTextColor.ts
@@ -1,16 +1,20 @@
-import type { Color, ColorableTextComponentName, FlyonUIVueAppDefaultConfig } from '@/Lib';
-import type { ComputedRef, MaybeRefOrGetter, Ref }                            from 'vue';
-import { useColor }                                                           from '@/Lib/UseColor/Internal';
-import { isDefined }                                                          from '@/Lib/Utils/Internal';
-import { computed, toValue }                                                  from 'vue';
+import type { FlyonUIVueAppDefaultConfig, TextColor, TextColorableComponentName } from '@/Lib';
+import type { ComputedRef, MaybeRefOrGetter, Ref }                                from 'vue';
+import { useColor }                                                               from '@/Lib/UseColor/Internal';
+import { computed, toValue }                                                      from 'vue';
 
 export function useTextColor(
     config: Ref<FlyonUIVueAppDefaultConfig>,
-    componentName: MaybeRefOrGetter<ColorableTextComponentName>,
-    color: MaybeRefOrGetter<Color | undefined>,
-    defaultColorClass: MaybeRefOrGetter<string> = '',
+    componentName: MaybeRefOrGetter<TextColorableComponentName>,
+    color: MaybeRefOrGetter<TextColor | undefined>,
 ): ComputedRef<string> {
     return computed((): string => {
-        return isDefined(color) ? useColor(config, componentName, color).value : toValue(defaultColorClass);
+        const c = toValue(color);
+
+        if (c === 'base') {
+            return 'text-base-content';
+        }
+
+        return useColor(config, componentName, c).value;
     });
 }
diff --git a/packages/core/src/Lib/UseColor/Types/Color.ts b/packages/core/src/Lib/UseColor/Types/Color.ts
index 8a456722..277cce3b 100644
--- a/packages/core/src/Lib/UseColor/Types/Color.ts
+++ b/packages/core/src/Lib/UseColor/Types/Color.ts
@@ -14,10 +14,10 @@ export type ColorableComponentName = Extract<
     | 'FoStatus'
     | 'FoSwitch'
     | 'FoTooltip'
-    | ColorableTextComponentName
+    | TextColorableComponentName
 >;
 
-export type ColorableTextComponentName = Extract<ComponentName, 'FoDivider' | 'FoHeading' | 'FoLink' | 'FoLoading'>;
+export type TextColorableComponentName = Extract<ComponentName, 'FoDivider' | 'FoHeading' | 'FoLink' | 'FoLoading'>;
 
 export type Color = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
 
@@ -25,3 +25,10 @@ export interface Colorable {
     /** The component's color */
     color?: Color;
 }
+
+export type TextColor = 'base' | Color;
+
+export interface TextColorable {
+    /** The component's text color */
+    color?: TextColor;
+}
diff --git a/packages/core/src/UI/Components/Loading/Types/Loading.ts b/packages/core/src/UI/Components/Loading/Types/Loading.ts
index 571ec9c1..e0a5bbb4 100644
--- a/packages/core/src/UI/Components/Loading/Types/Loading.ts
+++ b/packages/core/src/UI/Components/Loading/Types/Loading.ts
@@ -1,8 +1,8 @@
-import type { Colorable, Sizable  } from '@/Lib';
+import type { Sizable, TextColorable } from '@/Lib';
 
 export type LoadingAnimation = 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
 
-export interface LoadingProps extends Colorable, Sizable {
+export interface LoadingProps extends TextColorable, Sizable {
     /** The component's loading animation */
     animation?: LoadingAnimation;
 }
diff --git a/packages/core/src/UI/Content/Divider/Types/Divider.ts b/packages/core/src/UI/Content/Divider/Types/Divider.ts
index 779df8aa..e217c25f 100644
--- a/packages/core/src/UI/Content/Divider/Types/Divider.ts
+++ b/packages/core/src/UI/Content/Divider/Types/Divider.ts
@@ -1,6 +1,6 @@
-import type { Colorable, Orientable, Preset, Presettable } from '@/Lib';
-import type { Alignable }                                  from '@/Lib/UseAlignment';
+import type { Orientable, Preset, Presettable, TextColorable } from '@/Lib';
+import type { Alignable }                                      from '@/Lib/UseAlignment';
 
 export type DividerPreset = Extract<Preset, 'dash' | 'dot'>;
 
-export type DividerProps = Colorable & Presettable<DividerPreset> & Alignable & Orientable;
+export type DividerProps = TextColorable & Presettable<DividerPreset> & Alignable & Orientable;
diff --git a/packages/core/src/UI/Content/Heading/Types/Heading.ts b/packages/core/src/UI/Content/Heading/Types/Heading.ts
index f2ad9e98..4622e86a 100644
--- a/packages/core/src/UI/Content/Heading/Types/Heading.ts
+++ b/packages/core/src/UI/Content/Heading/Types/Heading.ts
@@ -1,8 +1,8 @@
-import type { Colorable } from '@/Lib';
+import type { TextColorable } from '@/Lib';
 
 export type HeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
 
-export interface HeadingProps extends Colorable {
+export interface HeadingProps extends TextColorable {
     /** The heading's rank */
     level: HeadingLevel;
 }
diff --git a/packages/core/src/UI/Content/Heading/UI/FoHeading.vue b/packages/core/src/UI/Content/Heading/UI/FoHeading.vue
index 62045d0c..79e8096a 100644
--- a/packages/core/src/UI/Content/Heading/UI/FoHeading.vue
+++ b/packages/core/src/UI/Content/Heading/UI/FoHeading.vue
@@ -30,7 +30,7 @@ const [
     colorClass,
     sizeClass,
 ] = [
-    useTextColor(config, 'FoHeading', () => props.color, 'text-base-content'),
+    useTextColor(config, 'FoHeading', () => props.color),
     computed(() => {
         const classes: Record<HeadingLevel, string> = {
             1: 'text-4xl',
diff --git a/packages/core/src/UI/Content/Link/Types/Link.ts b/packages/core/src/UI/Content/Link/Types/Link.ts
index ebd21ae9..79812945 100644
--- a/packages/core/src/UI/Content/Link/Types/Link.ts
+++ b/packages/core/src/UI/Content/Link/Types/Link.ts
@@ -1,4 +1,4 @@
-import type { Colorable }         from '@/Lib';
+import type { TextColorable }     from '@/Lib';
 import type { FoRouterLinkProps } from '@/UI/Content/Link/Internal';
 import type { RouteLocationRaw }  from 'vue-router';
 
@@ -8,7 +8,7 @@ export type To = Link | RouteLocationRaw;
 
 export type UnderlineLinkEffect = 'hover' | 'hover-animated' | 'no-underline';
 
-export interface LinkProps extends FoRouterLinkProps, Colorable {
+export interface LinkProps extends FoRouterLinkProps, TextColorable {
     /**
      * If "hover", the link will be underlined when hovered
      * If "hover-animated", the link will be underlined with an underline animation when hovered
diff --git a/packages/core/tests/Lib/UseColor/Internal/Lib/UseTextColor.spec.ts b/packages/core/tests/Lib/UseColor/Internal/Lib/UseTextColor.spec.ts
index 07d0bb7e..1cab5cbe 100644
--- a/packages/core/tests/Lib/UseColor/Internal/Lib/UseTextColor.spec.ts
+++ b/packages/core/tests/Lib/UseColor/Internal/Lib/UseTextColor.spec.ts
@@ -11,17 +11,9 @@ describe('useTextColor', () => {
         expect(useTextColor(config, 'FoLink', 'neutral').value).toBe('link-neutral');
     });
 
-    it('returns no default class if the color is not defined', () => {
+    it('returns the base color class if the color is the base one', () => {
         const config = ref<FlyonUIVueAppDefaultConfig>({ ...flyonUIVueAppDefaultConfig });
 
-        expect(useTextColor(config, 'FoLink', () => undefined).value).toBe('');
-    });
-
-    it('returns a specific default class if the color is not defined and the default class is specified', () => {
-        const config = ref<FlyonUIVueAppDefaultConfig>({ ...flyonUIVueAppDefaultConfig });
-
-        const defaultColorClass = 'default-class';
-
-        expect(useTextColor(config, 'FoLink', () => undefined, defaultColorClass).value).toBe(defaultColorClass);
+        expect(useTextColor(config, 'FoLink', () => 'base').value).toBe('text-base-content');
     });
 });
diff --git a/packages/docs/Components/Loading/LoadingAnimation.vue b/packages/docs/Components/Loading/LoadingAnimation.vue
index 8af2a7e8..3b0f4f0e 100644
--- a/packages/docs/Components/Loading/LoadingAnimation.vue
+++ b/packages/docs/Components/Loading/LoadingAnimation.vue
@@ -1,101 +1,139 @@
 <template>
-    <FoLoading size="extraSmall" />
+    <FoLoading color="base"
+               size="extraSmall"
+    />
 
-    <FoLoading size="small" />
+    <FoLoading color="base"
+               size="small"
+    />
 
-    <FoLoading />
+    <FoLoading color="base" />
 
-    <FoLoading size="large" />
+    <FoLoading color="base"
+               size="large"
+    />
 
-    <FoLoading size="extraLarge" />
+    <FoLoading color="base"
+               size="extraLarge"
+    />
 
     <FoLoading animation="dots"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="dots"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="dots" />
+    <FoLoading animation="dots"
+               color="base"
+    />
 
     <FoLoading animation="dots"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="dots"
+               color="base"
                size="extraLarge"
     />
 
     <FoLoading animation="ring"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="ring"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="ring" />
+    <FoLoading animation="ring"
+               color="base"
+    />
 
     <FoLoading animation="ring"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="ring"
+               color="base"
                size="extraLarge"
     />
 
     <FoLoading animation="ball"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="ball"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="ball" />
+    <FoLoading animation="ball"
+               color="base"
+    />
 
     <FoLoading animation="ball"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="ball"
+               color="base"
                size="extraLarge"
     />
 
     <FoLoading animation="bars"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="bars"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="bars" />
+    <FoLoading animation="bars"
+               color="base"
+    />
 
     <FoLoading animation="bars"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="bars"
+               color="base"
                size="extraLarge"
     />
 
     <FoLoading animation="infinity"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="infinity"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="infinity" />
+    <FoLoading animation="infinity"
+               color="base"
+    />
 
     <FoLoading animation="infinity"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="infinity"
+               color="base"
                size="extraLarge"
     />
 </template>
diff --git a/packages/docs/Components/Loading/LoadingColor.vue b/packages/docs/Components/Loading/LoadingColor.vue
index 3ae992a1..079e75b0 100644
--- a/packages/docs/Components/Loading/LoadingColor.vue
+++ b/packages/docs/Components/Loading/LoadingColor.vue
@@ -1,14 +1,16 @@
 <template>
     <FoLoading />
 
+    <FoLoading color="base" />
+
+    <FoLoading color="neutral" />
+
     <FoLoading color="primary" />
 
     <FoLoading color="secondary" />
 
     <FoLoading color="accent" />
 
-    <FoLoading color="neutral" />
-
     <FoLoading color="info" />
 
     <FoLoading color="success" />
diff --git a/packages/docs/Content/Heading/HeadingColor.vue b/packages/docs/Content/Heading/HeadingColor.vue
index 1a02963c..82424079 100644
--- a/packages/docs/Content/Heading/HeadingColor.vue
+++ b/packages/docs/Content/Heading/HeadingColor.vue
@@ -3,6 +3,12 @@
         Default
     </FoHeading>
 
+    <FoHeading level="4"
+               color="base"
+    >
+        Base
+    </FoHeading>
+
     <FoHeading level="4"
                color="neutral"
     >
diff --git a/packages/docs/Content/Heading/HeadingLevel.vue b/packages/docs/Content/Heading/HeadingLevel.vue
index 147223bf..f74656f2 100644
--- a/packages/docs/Content/Heading/HeadingLevel.vue
+++ b/packages/docs/Content/Heading/HeadingLevel.vue
@@ -1,25 +1,37 @@
 <template>
-    <FoHeading level="1">
+    <FoHeading level="1"
+               color="base"
+    >
         Heading 1
     </FoHeading>
 
-    <FoHeading level="2">
+    <FoHeading level="2"
+               color="base"
+    >
         Heading 2
     </FoHeading>
 
-    <FoHeading level="3">
+    <FoHeading level="3"
+               color="base"
+    >
         Heading 3
     </FoHeading>
 
-    <FoHeading level="4">
+    <FoHeading level="4"
+               color="base"
+    >
         Heading 4
     </FoHeading>
 
-    <FoHeading level="5">
+    <FoHeading level="5"
+               color="base"
+    >
         Heading 5
     </FoHeading>
 
-    <FoHeading level="6">
+    <FoHeading level="6"
+               color="base"
+    >
         Heading 6
     </FoHeading>
 </template>
diff --git a/packages/docs/Content/Link/AnimatedUnderlineLink.vue b/packages/docs/Content/Link/AnimatedUnderlineLink.vue
index ee7226e4..5189d572 100644
--- a/packages/docs/Content/Link/AnimatedUnderlineLink.vue
+++ b/packages/docs/Content/Link/AnimatedUnderlineLink.vue
@@ -1,5 +1,6 @@
 <template>
-    <FoLink to="https://www.google.com"
+    <FoLink color="base"
+            to="https://www.google.com"
             underline-effect="hover-animated"
     >
         Animated underline when hovered over.
diff --git a/packages/docs/Content/Link/DefaultLink.vue b/packages/docs/Content/Link/DefaultLink.vue
index fdbcb4ec..d6f14732 100644
--- a/packages/docs/Content/Link/DefaultLink.vue
+++ b/packages/docs/Content/Link/DefaultLink.vue
@@ -1,9 +1,12 @@
 <template>
-    <FoLink to="https://www.google.com">
+    <FoLink color="base"
+            to="https://www.google.com"
+    >
         Default link
     </FoLink>
 
-    <FoLink to="https://www.google.com"
+    <FoLink color="base"
+            to="https://www.google.com"
             underline-effect="no-underline"
     >
         Link with no underline
diff --git a/packages/docs/Content/Link/LinkColor.vue b/packages/docs/Content/Link/LinkColor.vue
index c866847d..aaea0858 100644
--- a/packages/docs/Content/Link/LinkColor.vue
+++ b/packages/docs/Content/Link/LinkColor.vue
@@ -3,6 +3,12 @@
         Default link
     </FoLink>
 
+    <FoLink to="https://www.google.com"
+            color="base"
+    >
+        Base link
+    </FoLink>
+
     <FoLink to="https://www.google.com"
             color="neutral"
     >
diff --git a/packages/docs/Content/Link/UnderlineOnHoverLink.vue b/packages/docs/Content/Link/UnderlineOnHoverLink.vue
index 23795b5d..42124088 100644
--- a/packages/docs/Content/Link/UnderlineOnHoverLink.vue
+++ b/packages/docs/Content/Link/UnderlineOnHoverLink.vue
@@ -1,5 +1,6 @@
 <template>
-    <FoLink to="https://www.google.com"
+    <FoLink color="base"
+            to="https://www.google.com"
             underline-effect="hover"
     >
         Underline when hovered over.
diff --git a/packages/docs/Next/Content/Divider/DashedDivider.vue b/packages/docs/Next/Content/Divider/DashedDivider.vue
index 9652212d..e21debd8 100644
--- a/packages/docs/Next/Content/Divider/DashedDivider.vue
+++ b/packages/docs/Next/Content/Divider/DashedDivider.vue
@@ -1,116 +1,122 @@
 <template>
     <FoDivider preset="dash">
-        Dashed
+        Default
+    </FoDivider>
+
+    <FoDivider color="base"
+               preset="dash"
+    >
+        Base
     </FoDivider>
 
     <FoDivider color="neutral"
                preset="dash"
     >
-        Dashed
+        Neutral
     </FoDivider>
 
     <FoDivider color="primary"
                preset="dash"
     >
-        Dashed
+        Primary
     </FoDivider>
 
     <FoDivider color="secondary"
                preset="dash"
     >
-        Dashed
+        Secondary
     </FoDivider>
 
     <FoDivider color="accent"
                preset="dash"
     >
-        Dashed
+        Accent
     </FoDivider>
 
     <FoDivider color="info"
                preset="dash"
     >
-        Dashed
+        Info
     </FoDivider>
 
     <FoDivider color="success"
                preset="dash"
     >
-        Dashed
+        Success
     </FoDivider>
 
     <FoDivider color="warning"
                preset="dash"
     >
-        Dashed
+        Warning
     </FoDivider>
 
     <FoDivider color="error"
                preset="dash"
     >
-        Dashed
+        Error
     </FoDivider>
 
     <FoDivider preset="dash"
                orientation="horizontal"
     >
-        Dashed
+        Default
     </FoDivider>
 
     <FoDivider color="neutral"
                preset="dash"
                orientation="horizontal"
     >
-        Dashed
+        Neutral
     </FoDivider>
 
     <FoDivider color="primary"
                preset="dash"
                orientation="horizontal"
     >
-        Dashed
+        Primary
     </FoDivider>
 
     <FoDivider color="secondary"
                preset="dash"
                orientation="horizontal"
     >
-        Dashed
+        Secondary
     </FoDivider>
 
     <FoDivider color="accent"
                preset="dash"
                orientation="horizontal"
     >
-        Dashed
+        Accent
     </FoDivider>
 
     <FoDivider color="info"
                preset="dash"
                orientation="horizontal"
     >
-        Dashed
+        Info
     </FoDivider>
 
     <FoDivider color="success"
                preset="dash"
                orientation="horizontal"
     >
-        Dashed
+        Success
     </FoDivider>
 
     <FoDivider color="warning"
                preset="dash"
                orientation="horizontal"
     >
-        Dashed
+        Warning
     </FoDivider>
 
     <FoDivider color="error"
                preset="dash"
                orientation="horizontal"
     >
-        Dashed
+        Error
     </FoDivider>
 </template>
 
diff --git a/packages/docs/Next/Content/Divider/DividerContentAlignment.vue b/packages/docs/Next/Content/Divider/DividerContentAlignment.vue
index 60d2078c..e98d1543 100644
--- a/packages/docs/Next/Content/Divider/DividerContentAlignment.vue
+++ b/packages/docs/Next/Content/Divider/DividerContentAlignment.vue
@@ -1,27 +1,35 @@
 <template>
-    <FoDivider alignment="left">
+    <FoDivider color="base"
+               alignment="left"
+    >
         Start
     </FoDivider>
 
-    <FoDivider>
+    <FoDivider color="base">
         Center
     </FoDivider>
 
-    <FoDivider alignment="right">
+    <FoDivider color="base"
+               alignment="right"
+    >
         End
     </FoDivider>
 
-    <FoDivider alignment="left"
+    <FoDivider color="base"
+               alignment="left"
                orientation="horizontal"
     >
         Start
     </FoDivider>
 
-    <FoDivider orientation="horizontal">
+    <FoDivider color="base"
+               orientation="horizontal"
+    >
         Center
     </FoDivider>
 
-    <FoDivider alignment="right"
+    <FoDivider color="base"
+               alignment="right"
                orientation="horizontal"
     >
         End
diff --git a/packages/docs/Next/Content/Divider/DividerWithCustomThickness.vue b/packages/docs/Next/Content/Divider/DividerWithCustomThickness.vue
index b1a134d0..4473b441 100644
--- a/packages/docs/Next/Content/Divider/DividerWithCustomThickness.vue
+++ b/packages/docs/Next/Content/Divider/DividerWithCustomThickness.vue
@@ -1,15 +1,19 @@
 <template>
-    <FoDivider class="after:border-t-2 before:border-t-2">
+    <FoDivider class="after:border-t-2 before:border-t-2"
+               color="base"
+    >
         Solid
     </FoDivider>
 
     <FoDivider class="after:border-t-4 before:border-t-4"
+               color="base"
                preset="dot"
     >
         Dotted
     </FoDivider>
 
     <FoDivider class="after:border-t-8 before:border-t-8"
+               color="base"
                preset="dash"
     >
         Dashed
diff --git a/packages/docs/Next/Content/Divider/DottedDivider.vue b/packages/docs/Next/Content/Divider/DottedDivider.vue
index 40a0d772..f8474b67 100644
--- a/packages/docs/Next/Content/Divider/DottedDivider.vue
+++ b/packages/docs/Next/Content/Divider/DottedDivider.vue
@@ -1,116 +1,122 @@
 <template>
     <FoDivider preset="dot">
-        Dotted
+        Default
+    </FoDivider>
+
+    <FoDivider color="base"
+               preset="dot"
+    >
+        Base
     </FoDivider>
 
     <FoDivider color="neutral"
                preset="dot"
     >
-        Dotted
+        Neutral
     </FoDivider>
 
     <FoDivider color="primary"
                preset="dot"
     >
-        Dotted
+        Primary
     </FoDivider>
 
     <FoDivider color="secondary"
                preset="dot"
     >
-        Dotted
+        Secondary
     </FoDivider>
 
     <FoDivider color="accent"
                preset="dot"
     >
-        Dotted
+        Accent
     </FoDivider>
 
     <FoDivider color="info"
                preset="dot"
     >
-        Dotted
+        Info
     </FoDivider>
 
     <FoDivider color="success"
                preset="dot"
     >
-        Dotted
+        Success
     </FoDivider>
 
     <FoDivider color="warning"
                preset="dot"
     >
-        Dotted
+        Warning
     </FoDivider>
 
     <FoDivider color="error"
                preset="dot"
     >
-        Dotted
+        Error
     </FoDivider>
 
     <FoDivider preset="dot"
                orientation="horizontal"
     >
-        Dotted
+        Default
     </FoDivider>
 
     <FoDivider color="neutral"
                preset="dot"
                orientation="horizontal"
     >
-        Dotted
+        Neutral
     </FoDivider>
 
     <FoDivider color="primary"
                preset="dot"
                orientation="horizontal"
     >
-        Dotted
+        Primary
     </FoDivider>
 
     <FoDivider color="secondary"
                preset="dot"
                orientation="horizontal"
     >
-        Dotted
+        Secondary
     </FoDivider>
 
     <FoDivider color="accent"
                preset="dot"
                orientation="horizontal"
     >
-        Dotted
+        Accent
     </FoDivider>
 
     <FoDivider color="info"
                preset="dot"
                orientation="horizontal"
     >
-        Dotted
+        Info
     </FoDivider>
 
     <FoDivider color="success"
                preset="dot"
                orientation="horizontal"
     >
-        Dotted
+        Success
     </FoDivider>
 
     <FoDivider color="warning"
                preset="dot"
                orientation="horizontal"
     >
-        Dotted
+        Warning
     </FoDivider>
 
     <FoDivider color="error"
                preset="dot"
                orientation="horizontal"
     >
-        Dotted
+        Error
     </FoDivider>
 </template>
 
diff --git a/packages/docs/Next/Content/Divider/HorizontalDivider.vue b/packages/docs/Next/Content/Divider/HorizontalDivider.vue
index ee0bd08d..bcdba894 100644
--- a/packages/docs/Next/Content/Divider/HorizontalDivider.vue
+++ b/packages/docs/Next/Content/Divider/HorizontalDivider.vue
@@ -1,17 +1,24 @@
 <template>
-    <FoDivider orientation="horizontal" />
+    <FoDivider color="base"
+               orientation="horizontal"
+    />
 
-    <FoDivider orientation="horizontal">
+    <FoDivider color="base"
+               orientation="horizontal"
+    >
         Text
     </FoDivider>
 
-    <FoDivider orientation="horizontal">
+    <FoDivider color="base"
+               orientation="horizontal"
+    >
         <FoIcon icon="tabler:sun"
                 size="small"
         />
     </FoDivider>
 
     <FoDivider class="h-72"
+               color="base"
                orientation="horizontal"
     >
         <FoIcon icon="tabler:sun"
diff --git a/packages/docs/Next/Content/Divider/HorizontallyResponsiveDivider.vue b/packages/docs/Next/Content/Divider/HorizontallyResponsiveDivider.vue
index 76cdfa74..6482dca7 100644
--- a/packages/docs/Next/Content/Divider/HorizontallyResponsiveDivider.vue
+++ b/packages/docs/Next/Content/Divider/HorizontallyResponsiveDivider.vue
@@ -3,6 +3,7 @@
         <div class="shadow-base-300/20 bg-base-200 grid h-32 grow place-items-center shadow-sm" />
 
         <FoDivider :class="orientation === 'horizontal' && 'h-32!'"
+                   color="base"
                    :orientation="orientation"
         >
             OR
diff --git a/packages/docs/Next/Content/Divider/SolidDivider.vue b/packages/docs/Next/Content/Divider/SolidDivider.vue
index 3e9cb157..bb56c16f 100644
--- a/packages/docs/Next/Content/Divider/SolidDivider.vue
+++ b/packages/docs/Next/Content/Divider/SolidDivider.vue
@@ -1,90 +1,94 @@
 <template>
     <FoDivider>
-        Solid
+        Default
+    </FoDivider>
+
+    <FoDivider color="base">
+        Base
     </FoDivider>
 
     <FoDivider color="neutral">
-        Solid
+        Neutral
     </FoDivider>
 
     <FoDivider color="primary">
-        Solid
+        Primary
     </FoDivider>
 
     <FoDivider color="secondary">
-        Solid
+        Secondary
     </FoDivider>
 
     <FoDivider color="accent">
-        Solid
+        Accent
     </FoDivider>
 
     <FoDivider color="info">
-        Solid
+        Info
     </FoDivider>
 
     <FoDivider color="success">
-        Solid
+        Success
     </FoDivider>
 
     <FoDivider color="warning">
-        Solid
+        Warning
     </FoDivider>
 
     <FoDivider color="error">
-        Solid
+        Error
     </FoDivider>
 
     <FoDivider orientation="horizontal">
-        Solid
+        Default
     </FoDivider>
 
     <FoDivider color="neutral"
                orientation="horizontal"
     >
-        Solid
+        Neutral
     </FoDivider>
 
     <FoDivider color="primary"
                orientation="horizontal"
     >
-        Solid
+        Primary
     </FoDivider>
 
     <FoDivider color="secondary"
                orientation="horizontal"
     >
-        Solid
+        Secondary
     </FoDivider>
 
     <FoDivider color="accent"
                orientation="horizontal"
     >
-        Solid
+        Accent
     </FoDivider>
 
     <FoDivider color="info"
                orientation="horizontal"
     >
-        Solid
+        Info
     </FoDivider>
 
     <FoDivider color="success"
                orientation="horizontal"
     >
-        Solid
+        Success
     </FoDivider>
 
     <FoDivider color="warning"
                orientation="horizontal"
     >
-        Solid
+        Warning
     </FoDivider>
 
     <FoDivider color="error"
                orientation="horizontal"
     >
-        Solid
+        Error
     </FoDivider>
 </template>
 
diff --git a/packages/docs/Next/Content/Divider/VerticalDivider.vue b/packages/docs/Next/Content/Divider/VerticalDivider.vue
index 4987d0fe..cfcf0815 100644
--- a/packages/docs/Next/Content/Divider/VerticalDivider.vue
+++ b/packages/docs/Next/Content/Divider/VerticalDivider.vue
@@ -1,11 +1,11 @@
 <template>
-    <FoDivider />
+    <FoDivider color="base" />
 
-    <FoDivider>
+    <FoDivider color="base">
         Text
     </FoDivider>
 
-    <FoDivider>
+    <FoDivider color="base">
         <FoIcon icon="tabler:crown"
                 size="small"
         />
diff --git a/packages/docs/Next/Content/Divider/VerticallyResponsiveDivider.vue b/packages/docs/Next/Content/Divider/VerticallyResponsiveDivider.vue
index 7c3333e9..6ef44588 100644
--- a/packages/docs/Next/Content/Divider/VerticallyResponsiveDivider.vue
+++ b/packages/docs/Next/Content/Divider/VerticallyResponsiveDivider.vue
@@ -3,6 +3,7 @@
         <div class="shadow-base-300/20 bg-base-200 grid h-32 grow place-items-center shadow-sm" />
 
         <FoDivider :class="orientation === 'horizontal' && 'h-32!'"
+                   color="base"
                    :orientation="orientation"
         >
             OR
diff --git a/packages/docs/UpgradeGuide.md b/packages/docs/UpgradeGuide.md
index 9b5ebe09..36d4fda8 100644
--- a/packages/docs/UpgradeGuide.md
+++ b/packages/docs/UpgradeGuide.md
@@ -11,6 +11,7 @@ The minimum required version for Node.js is now `>= 20.19.0`.
 - The `Direction` type has been renamed to `TextDirection`.
 - The property `direction` of the type `FlyonUIVueAppGlobalConfig` has been renamed to `textDirection`.
 - The `Animation` type has been renamed to `LoadingAnimation`.
+- The `ColorableTextComponentName` type has been renamed to `TextColorableComponentName`.
 
 ### All Components - Props
 
@@ -35,3 +36,9 @@ The possible values of the prop `social` have been updated and fully lowercased,
 | `Github`   | `github`   |
 | `Linkedin` | `linkedin` |
 | `Twitter`  | `x`        |
+
+### FoDivider | FoHeading | FoLink | FoLoading
+
+The default color is now the color defined by the flyonui vue configuration, that is neutral if no settings have been
+manually configured. Before, the default color was the `--color-base-content`, if you now want this color you have to pass
+the `base` value to the `color` prop.
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-dashed-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-dashed-chromium-linux.png
index de6ccfd3..0a97ad9b 100644
Binary files a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-dashed-chromium-linux.png and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-dashed-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-dotted-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-dotted-chromium-linux.png
index 68ef4067..f10529fe 100644
Binary files a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-dotted-chromium-linux.png and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-dotted-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-solid-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-solid-chromium-linux.png
index 85a94231..fa14a8ad 100644
Binary files a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-solid-chromium-linux.png and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-solid-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-with-custom-thickness-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-with-custom-thickness-chromium-linux.png
index 36077b9a..ed186ddc 100644
Binary files a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-with-custom-thickness-chromium-linux.png and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-divider-with-custom-thickness-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-heading-color-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-heading-color-chromium-linux.png
index b4e6e62b..c8f9abd3 100644
Binary files a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-heading-color-chromium-linux.png and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-heading-color-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-link-color-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-link-color-chromium-linux.png
index 096324d0..623aab85 100644
Binary files a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-link-color-chromium-linux.png and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/content-link-color-chromium-linux.png differ